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,
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
How do i get the search to work on the entire hierarchy?Thank you for your help so far.