Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
65
Search igHierarchicalGrid by text on all levels and columns.
posted

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>

Parents
  • 820
    Offline posted

    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

Reply Children