igGrid - width filter

by georgianastasov

HTML

<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>
<script src="https://igniteui.com/js-data/employee-data-allDatatypes"></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>


<table id="gridSimpleFiltering"></table>

CSS

div.ui-igeditor-input-container{
  width: 100% !important;
}

JavaScript

$(function () {
				var data = [
      	{ FirstName: 'Jon', LastName: 'Amith', RegistererDate: '11/11/2022', Country: 'USA', Age: 20, IsActive: true},
        { FirstName: 'Bob', LastName: 'Bull', RegistererDate: '10/10/2022', Country: 'USA', Age: 21, IsActive: false},
        { FirstName: 'Jake', LastName: 'Sollins', RegistererDate: '12/12/2022', Country: 'USA', Age: 22, IsActive: true},
        { FirstName: 'Simon', LastName: 'Oins', RegistererDate: '1/1/2022', Country: 'USA', Age: 23, IsActive: true},
        { FirstName: 'Kevin', LastName: 'Kake', RegistererDate: '8/8/2022', Country: 'USA', Age: 24, IsActive: false}
      ];
      
			$("#gridSimpleFiltering").igGrid({
								autoGenerateColumns: false,
                height: "500px",
                width: "100%",
				columns: [
          { headerText: "First Name", key: "FirstName", dataType: "string", width: "15%" },
          { headerText: "Last Name", key: "LastName", dataType: "string", width: "40%" },
          { headerText: "Register Date", key: "RegistererDate", dataType: "date", width: "15%" },
          { headerText: "Country", key: "Country", dataType: "string", width: "15%" },
          { headerText: "Age", key: "Age", dataType: "number", width: "10%" },
          { headerText: "Is Active", key: "IsActive", dataType: "bool", width: "15%" }
				],
				dataSource: data,
        //Here is the fauture iniciallization of Filtering
				features: [
        		{
							name: "Filtering",
							type: "local",
							mode: "simple",
						}
        ]
			});
});