Hi, I'm new to Infragistics and I am trying to implement a search by text on a HierarchicalGrid. I am using an XML as the table Datasource. This what i have done so far.
<!DOCTYPE html> <html> <head> <script src="https://igniteui.com/js/modernizr.min.js"></script> <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script> <script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script> <link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link> <link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link> </head> <body> <input type="text" id="filterType" /> <table id="hierarchicalGrid1"></table> <script> $(function () { //Sample XML Data /*var xmlDoc = '<OrgChart Name="All Employees">' + '<Employee Name="Gustavo Achong" Age="42" Email="gachong@adventureworks.com">' + '<Employee Name="Kim Abercrombie" Age="33" Email="kabercrombie@adventureworks.com" />' + '<Employee Name="Lawrence Tapley" Age="52" Email="ltapley@adventureworks.com" />' + '</Employee>' + '<Employee Name="Catherine Abel" Age="27" Email="cabel@adventureworks.com">' + '<Employee Name="Kristen Anderson" Age="30" Email="kanderson@adventureworks.com" />' + '<Employee Name="Richard Lee" Age="25" Email="rlee@adventureworks.com" />' + '<Employee Name="Victoria Gramley" Age="23" Email="vgramley@adventureworks.com" />' + '</Employee>' + '<Employee Name="Adrienne Mauro" Age="27" Email="amauro@adventureworks.com">' + '<Employee Name="Christopher Chadwick" Age="37" Email="cchadwick@adventureworks.com" />' + '</Employee>' + '</OrgChart>';*/ var xmlDoc = '<FullTransaction xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" type="832" id="0" parentid="0" POStatus="0" source="0" isclient="0"> <Loop type="Main" count="4"> <RepeatingSegment type="ST" count="1"> <Segment type="ST" count="2"> <Element type="ST01" name="Transaction Set Identifier Code" value="832">832</Element> <Element type="ST02" name="Transaction Set Control Number" value="1234">1234</Element> </Segment> </RepeatingSegment> <RepeatingSegment type="BCT" count="1"> <Segment type="BCT" count="4"> <Element type="BCT01" name="Catalog Purpose Code" value="Sales Catalog">SC</Element> <Element type="BCT02" name="Catalog Number" value="LPCSC0224202159">LPCSC0224202159</Element> <Element type="BCT03" name="Catalog Version Number" value="1254">1254</Element> <Element type="BCT10" name="Transaction Set Purpose Code" value="Original">00</Element> </Segment> </RepeatingSegment> <RepeatingSegment type="CUR" count="1"> <Segment type="CUR" count="2"> <Element type="CUR01" name="Identification code" value="Selling Party">SE</Element> <Element type="CUR02" name="Currency code" value="USD">USD</Element> </Segment> </RepeatingSegment> <RepeatingSegment type="SE" count="1"> <Segment type="SE" count="2"> <Element type="SE01" name="Number Of Included Segments" value="832">832</Element> <Element type="SE02" name="Transaction Set Control Number" value="2">1234</Element> </Segment> </RepeatingSegment> </Loop> <Loop uid="2" type="LIN" count="5"> <RepeatingSegment type="LIN" count="1"> <Segment type="LIN" count="7"> <Element type="LIN01" name="Assigned Identification" value="1">1</Element> <Element type="LIN02" name="Product/Service Id Qualifier" value="Vendors Part Number">VP</Element> <Element type="LIN03" name="Product/Service Id" value="AC-3-MFI">AC-3-MFI</Element> <Element type="LIN04" name="Product/Service Id Qualifier" value="Manufacturers Part Number">MG</Element> <Element type="LIN05" name="Product/Service Id" value="AC-3-MFI">AC-3-MFI</Element> <Element type="LIN06" name="Product/Service Id Qualifier" value="U.P.C. Consumer Package Code">UP</Element> <Element type="LIN07" name="Product/Service Id" value="123">123</Element> </Segment> </RepeatingSegment> <RepeatingSegment type="DTM" count="1"> <Segment type="DTM" count="2"> <Element type="DTM01" name="DateType" value="Effective">007</Element> <Element type="DTM02" name="Date" value="20170905">20170905</Element> </Segment> </RepeatingSegment> <RepeatingSegment type="YNQ" count="1"> <Segment type="YNQ" count="2"> <Element type="YNQ02" name="Response Code" value="No">N</Element> <Element type="YNQ05" name="Free Text" value="SERIALIZED">SERIALIZED</Element> </Segment> </RepeatingSegment> <RepeatingSegment type="PID" count="1"> <Segment type="PID" count="2"> <Element type="PID01" name="?tem Description Type" value="F">F</Element> <Element type="PID05" name="Description" value="Anywhere Cart 3ft Lightning MFI Certified Cable">Anywhere Cart 3ft Lightning MFI Certified Cable</Element> </Segment> </RepeatingSegment> <RepeatingSegment type="PO4" count="1"> <Segment type="PO4" count="11"> <Element type="PO401" name="Pack" value="1">1</Element> <Element type="PO402" name="Size" value="1">1</Element> <Element type="PO403" name="UOM" value="Each">EA</Element> <Element type="PO404" name="Packaging code" value="123">123</Element> <Element type="PO405" name="Weight Qualifier" value="U">U</Element> <Element type="PO406" name="Gross Weight" value="1">1</Element> <Element type="PO407" name="UOM" value="Pound">LB</Element> <Element type="PO410" name="Length" value="2">2</Element> <Element type="PO411" name="Width" value="2">2</Element> <Element type="PO412" name="Height" value="2">2</Element> <Element type="PO413" name="UOM" value="Inch">IN</Element> </Segment> </RepeatingSegment> <Loop uid="3" type="CTP" count="2"> <RepeatingSegment type="CTP" count="1"> <Segment type="CTP" count="2"> <Element type="CTP02" name="Price Identifier Code" value="CDW Price">C01</Element> <Element type="CTP03" name="USD" value="9">9</Element> </Segment> </RepeatingSegment> <RepeatingSegment type="LDT" count="1"> <Segment type="LDT" count="3"> <Element type="LDT01" name="Lead Time Code" value="AE">AE</Element> <Element type="LDT02" name="Quantity" value="1">1</Element> <Element type="LDT03" name="Interval" value="Calendar Days">DA</Element> </Segment> </RepeatingSegment> </Loop> <Loop uid="3" type="CTP" count="2"> <RepeatingSegment type="CTP" count="1"> <Segment type="CTP" count="2"> <Element type="CTP02" name="Price Identifier Code" value="Manufacturers Suggested Retail">MSR</Element> <Element type="CTP03" name="USD" value="25">25</Element> </Segment> </RepeatingSegment> <RepeatingSegment type="LDT" count="1"> <Segment type="LDT" count="3"> <Element type="LDT01" name="Lead Time Code" value="AE">AE</Element> <Element type="LDT02" name="Quantity" value="1">1</Element> <Element type="LDT03" name="Interval" value="Calendar Days">DA</Element> </Segment> </RepeatingSegment> </Loop> <Loop uid="3" type="N1" count="1"> <RepeatingSegment type="N1" count="1"> <Segment type="N1" count="2"> <Element type="N101" name="Entity Identifier Code" value="Manufacturer of Goods">MF</Element> <Element type="N102" name="Free-form name" value="ANYWHERE CART">ANYWHERE CART</Element> </Segment> </RepeatingSegment> </Loop> </Loop> <Loop uid="4" type="LIN" count="5"> <RepeatingSegment type="LIN" count="1"> <Segment type="LIN" count="7"> <Element type="LIN01" name="Assigned Identification" value="2">2</Element> <Element type="LIN02" name="Product/Service Id Qualifier" value="Vendors Part Number">VP</Element> <Element type="LIN03" name="Product/Service Id" value="AC-45">AC-45</Element> <Element type="LIN04" name="Product/Service Id Qualifier" value="Manufacturers Part Number">MG</Element> <Element type="LIN05" name="Product/Service Id" value="AC-45">AC-45</Element> <Element type="LIN06" name="Product/Service Id Qualifier" value="U.P.C. Consumer Package Code">UP</Element> <Element type="LIN07" name="Product/Service Id" value="123">123</Element> </Segment> </RepeatingSegment> <RepeatingSegment type="DTM" count="1"> <Segment type="DTM" count="2"> <Element type="DTM01" name="DateType" value="Effective">007</Element> <Element type="DTM02" name="Date" value="20171009">20171009</Element> </Segment> </RepeatingSegment> <RepeatingSegment type="YNQ" count="1"> <Segment type="YNQ" count="2"> <Element type="YNQ02" name="Response Code" value="Yes">Y</Element> <Element type="YNQ05" name="Free Text" value="SERIALIZED">SERIALIZED</Element> </Segment> </RepeatingSegment> <RepeatingSegment type="PID" count="1"> <Segment type="PID" count="2"> <Element type="PID01" name="?tem Description Type" value="F">F</Element> <Element type="PID05" name="Description" value="45 BAY - ANYWHERE CART W/ INTELLI-SENSE TIMER-SECURE CHARGING CART">45 BAY - ANYWHERE CART W/ INTELLI-SENSE TIMER-SECURE CHARGING CART</Element> </Segment> </RepeatingSegment> <RepeatingSegment type="PO4" count="1"> <Segment type="PO4" count="11"> <Element type="PO401" name="Pack" value="1">1</Element> <Element type="PO402" name="Size" value="1">1</Element> <Element type="PO403" name="UOM" value="Each">EA</Element> <Element type="PO404" name="Packaging code" value="123">123</Element> <Element type="PO405" name="Weight Qualifier" value="U">U</Element> <Element type="PO406" name="Gross Weight" value="210">210</Element> <Element type="PO407" name="UOM" value="Pound">LB</Element> <Element type="PO410" name="Length" value="32">32</Element> <Element type="PO411" name="Width" value="27">27</Element> <Element type="PO412" name="Height" value="50">50</Element> <Element type="PO413" name="UOM" value="Inch">IN</Element> </Segment> </RepeatingSegment> <Loop uid="5" type="CTP" count="2"> <RepeatingSegment type="CTP" count="1"> <Segment type="CTP" count="2"> <Element type="CTP02" name="Price Identifier Code" value="CDW Price">C01</Element> <Element type="CTP03" name="USD" value="1259">1259</Element> </Segment> </RepeatingSegment> <RepeatingSegment type="LDT" count="1"> <Segment type="LDT" count="3"> <Element type="LDT01" name="Lead Time Code" value="AE">AE</Element> <Element type="LDT02" name="Quantity" value="1">1</Element> <Element type="LDT03" name="Interval" value="Calendar Days">DA</Element> </Segment> </RepeatingSegment> </Loop> <Loop uid="5" type="CTP" count="2"> <RepeatingSegment type="CTP" count="1"> <Segment type="CTP" count="2"> <Element type="CTP02" name="Price Identifier Code" value="Manufacturers Suggested Retail">MSR</Element> <Element type="CTP03" name="USD" value="1899">1899</Element> </Segment> </RepeatingSegment> <RepeatingSegment type="LDT" count="1"> <Segment type="LDT" count="3"> <Element type="LDT01" name="Lead Time Code" value="AE">AE</Element> <Element type="LDT02" name="Quantity" value="1">1</Element> <Element type="LDT03" name="Interval" value="Calendar Days">DA</Element> </Segment> </RepeatingSegment> </Loop> <Loop uid="5" type="N1" count="1"> <RepeatingSegment type="N1" count="1"> <Segment type="N1" count="2"> <Element type="N101" name="Entity Identifier Code" value="Manufacturer of Goods">MF</Element> <Element type="N102" name="Free-form name" value="ANYWHERE CART">ANYWHERE CART</Element> </Segment> </RepeatingSegment> </Loop> </Loop> </FullTransaction>' //Binding to XML requires a schema to define data fields var xmlSchema = new $.ig.DataSchema("xml", { //searchField serves as the base node(s) for the XPaths searchField: "FullTransaction", childDataProperty: "Loop", fields: [ { name: "type", xpath: "@type" }, { name: "count", xpath: "@count" }, { name: "LIN01", xpath: "./RepeatingSegment/Segment/Element[@type='LIN01']/@value" }, { name: "LIN03", xpath: "./RepeatingSegment/Segment/Element[@type='LIN03']/@value" }, { name: "LIN05", xpath: "./RepeatingSegment/Segment/Element[@type='LIN03']/@value" }, /*{ name: "Email", xpath: "@Email" },*/ { name: "Loop", xpath: "Loop" }, { name: "RepeatingSegment", xpath: "./RepeatingSegment" } ] } ); console.log(xmlSchema); //This creates an Infragistics datasource from the XML //and the Schema which can be consumed by the grid. var ds = new $.ig.DataSource({ type: "xml", dataSource: xmlDoc, schema: xmlSchema }); $("#hierarchicalGrid1").igHierarchicalGrid({ dataSource: ds, //$.ig.DataSource object defined above autoGenerateColumns: false, columns: [ { headerText: "type", key: "type" } ], columnLayouts : [{ key: "Loop", autoGenerateColumns: false, columns: [ /* { headerText: "LoopType", key: "type" }, { headerText: "Count", key: "count" },*/ { headerText: "AssignedId", key: "LIN01" }, { headerText: "Vendors Part Number", key: "LIN03" }, { headerText: "Manufacturers Part Number", key: "LIN05" } /*{ headerText: "LoopType", key: "type" }, { headerText: "Age", key: "Age" }, { headerText: "Email", key: "Email" }*/ ], columnLayouts : [{ key: "Loop", autoGenerateColumns: false, columns: [ { headerText: "LoopType", key: "type" } /*{ headerText: "Age", key: "Age" }, { headerText: "Email", key: "Email" }*/ ] } ], rendered: function(evt, ui) { alert(); $('#filterType').on("input", function() { console.log(this.value); let $grid = $("#hierarchicalGrid1"); let filterExpressions = []; let cols = $grid.data("igGrid").options.columns; for(let i = 0; i < cols.length; i++) { if (cols[i].dataType === "string") filterExpressions.push({fieldName: cols[i].key, expr: this.value, cond: "contains", logic: "OR"}); } console.log(filterExpressions); $grid.igGridFiltering("filter", filterExpressions, false); }); }, features: [ { name: "Filtering", type: "local", inherit: true } ] }] }); }); </script> </body> </html>
Hello,
Since each level of igHierarchicalGrid is implemented using igGrid, which in turn uses its own data source, the filtering will work only per level and not the entire hierarchy.
In case that you would like to see this implemented in any of our future releases what I can suggest is logging a new product idea (or vote for existing ones) at https://es.infragistics.com/community/ideas.
Submitting your idea will allow you to communicate directly with our product management team, track the progress of your idea at any time, see how many votes it got, read comments from other developers in the community, and see if someone from the product team has additional questions for you.
Remember when submitting your idea to explain the context in which a feature would be used and why it is needed as well as anything that would prevent you from accomplishing this today. You can even add screenshots to build a stronger case. Remember that for your suggestion to be successful, you need other members of the community to vote for it. You can also link back to this thread for additional details.
Please let me know if you need any further assistance.
How do i get the search to work on the entire hierarchy?Thank you for your help so far.
Thank you for posting in our community.
After further investigation, I noticed the rendered event handler is defined in the columnLayouts array whereas it should be defined at the root object parameter of igHierarchicalGrid.
Please note that, at this point, the filtering feature works per level (either child or parent) and does not work for the entire hierarchy.
I have created and attached a sample based on the provided code snippet for your reference.
Please let me know if you need any further assistance with this matter.
7801.Sample.zip