jQWidgets Forums
-
Search Results
-
If I want to print the contents of jQXgrid, in this JSFiddle, I changed this line
$("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');of code to this line$("#jqxgrid").jqxGrid('exportdata', 'html');and added some code for the newWindow but it doesn’t work.What am I doing wrong here? It shows blank new window in firefox for me.If you are using the DockingLayout component and you initialize another component via the
jqwidgets.createInstance()method, you don’t have any way of calling functions specific to that component.Consider the following:
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; import { jqxDockingLayoutComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxdockinglayout'; import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid'; import { Folder } from './models/folder.model'; import { LineItem } from './models/line-item.model'; import { MonolithicService } from './services/monolithic.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit, AfterViewInit { @ViewChild('lineItemsGridReference') public lineItemsGridRef: jqxGridComponent; @ViewChild('dockingLayoutReference') public dockingLayout: jqxDockingLayoutComponent; public lineItems: LineItem[] = []; public layout: any[] = this.generateLayout(); public lineItemColumns: any[] = [ { text: 'Code', datafield: 'Code' }, { text: 'Description', datafield: 'Description' }, { text: 'Quantity', datafield: 'Quantity' }, { text: 'Unit of Measure', datafield: 'UnitOfMeasure' }, { text: 'Quantity Factor', datafield: 'Factor' }, { text: 'Resource', datafield: 'Resource' }, { text: 'Labor Hours', datafield: 'LaborHours' }, { text: 'Resource Output', datafield: 'ResourceOutput' }, { text: 'Direct Cost', datafield: 'DirectCost' }, { text: 'Labor', datafield: 'Labor' }, { text: 'Equipment', datafield: 'Equipment' }, { text: 'Material', datafield: 'Material' }, { text: 'Other 1', datafield: 'Other1' }, { text: 'Other 2', datafield: 'Other2' }, { text: 'Other 3', datafield: 'Other3' } ]; public lineItemsSource: any = { datatype: 'array', localdata: this.lineItems, datafields: [ { name: 'Code', type: 'string' }, { name: 'Description', type: 'string' }, { name: 'Quantity', type: 'float' }, { name: 'UnitOfMeasure', type: 'string' }, { name: 'Factor', type: 'string' }, { name: 'Resource', type: 'float' }, { name: 'LaborHours', type: 'float' }, { name: 'ResourceOutput', type: 'float' }, { name: 'DirectCost', type: 'float' }, { name: 'Labor', type: 'float' }, { name: 'Equipment', type: 'float' }, { name: 'Material', type: 'float' }, { name: 'Other1', type: 'float' }, { name: 'Other2', type: 'float' }, { name: 'Other3', type: 'float' } ] }; public lineItemsDataAdapter: any = new jqx.dataAdapter(this.lineItemsSource); private folders: Folder[]; constructor(private readonly monoService: MonolithicService) {} private generateLayout(): any[] { const layout = [ { type: 'layoutGroup', orientation: 'horizontal', items: [ { type: 'tabbedGroup', width: '20%', minWidth: 200, items: [ { type: 'layoutPanel', title: 'Cost Estimate Tree', contentContainer: 'CostEstimateTree', initContent: () => { // initialize a jqxTree inside the Solution Explorer Panel const source: any[] = []; if (this.folders) { this.folders.forEach((f: Folder) => { source.push({ label: f.Description, expanded: false, id: f.WBSFolderID }); }); } jqwidgets.createInstance('#tree-container', 'jqxTree', { theme: this.theme, width: '100%', height: '100%', source: source }); } } ] }, { type: 'layoutGroup', orientation: 'vertical', width: '80%', items: [ { type: 'documentGroup', height: 600, minHeight: 200, items: [ { type: 'documentPanel', title: 'Detail Item Assignments', contentContainer: 'DetailItemAssignmentsPanel', initContent: () => { // initialize a jqxGrid jqwidgets.createInstance('#lineitems-grid-container', 'jqxGrid', { theme: this.theme, width: '100%', height: '100%', source: this.lineItemsDataAdapter, columns: this.lineItemColumns, sortable: true, altrows: true, editable: false }); } } ] }, { type: 'tabbedGroup', height: 200, pinnedHeight: 30, items: [ { type: 'layoutPanel', title: 'Detail Items', contentContainer: 'DetailItemsPanel' } ] } ] } ] } ]; return layout; } public ngOnInit(): void { this.monoService.getFolders().subscribe((_folders: Folder[]) => { this.folders = _folders; // Forces the layout to redraw this.layout = this.generateLayout(); this.dockingLayout.loadLayout(this.layout); }); this.monoService.getLineItems('33554460').subscribe((_lineItems: LineItem[]) => { this.lineItems = _lineItems; this.lineItemsSource.localdata = this.lineItems; this.lineItemsGridRef.updatebounddata(); // THIS WON'T WORK BECAUSE THE METHOD DOESN'T EXSIST }); } }with this template:
<jqxDockingLayout #dockingLayoutReference [theme]="theme" [height]="800" [layout]="layout"> <div data-container="CostEstimateTree"> <div id="tree-container" #treeContainer> </div> </div> <div data-container="DetailItemAssignmentsPanel"> <!-- Won't be able to access jqxGrid functions since it's a normal div --> <div id="lineitems-grid-container" #lineItemsGridReference> </div> </div> <div data-container="DetailItemsPanel"> <!-- Nothing for now --> </div> </jqxDockingLayout>How do I call
this.lineItemsGridRef.updatebounddata()? Because you getERROR TypeError: _this.lineItemsGridRef.updatebounddata is not a functionerrors when attempting to do so.There is no example of anything like this that I can find anywhere and it’s incredibly frustrating.
i m so sorry, i have sent the wrong stackblitz…
I resolved my problem with appendTo:’body’
But now i have an other problem…
When i want to drag and drop a cell of my grid, this grey column is displayed. an i need to refresh to hide it
HTML :
<div id="main" class= "main"> <div class ="target"> <jqxGrid #myGridPosition [width]="510" [autoheight]="true" [columns]="gridColumns" [source]="source" [rowsheight] ="137" [rendered]='rendered' [selectionmode]="'singlecell'" [keyboardnavigation]="false" > </jqxGrid> </div> </div>TS :
import { Component, OnInit,ViewChild } from '@angular/core'; import { CompositionComponent } from '../composition.component'; import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid'; @Component({ providers:[CompositionComponent], selector: 'app-form-attributes', templateUrl: './form-attributes.component.html', styleUrls: ['./form-attributes.component.scss'] }) export class FormAttributesComponent { @ViewChild('myGridPosition') myGridPosition: jqxGridComponent; source: any = { totalrecords: 1, unboundmode: true, datafields: [ { name: 'pos1' }, { name: 'pos2' }, { name: 'pos3' } ], }; dataAdapter: any = new jqx.dataAdapter(this.source, { downloadComplete: function (data, status, xhr) { }, loadComplete: function (data) { }, loadError: function (xhr, status, error) { } }); gridColumns: any[] = [ { text: 'Position 1', dataField: 'pos1',align: 'center', width: 170 }, { text: 'Position 2', dataField: 'pos2',align: 'center', width: 170 }, { text: 'Position 3', dataField: 'pos3',align: 'center', width: 170 } ] rendered = (type: any): void => { let options = { revert: true, dropAction: 'none', appendTo:'body' }; let uglyGridDragDropCells = jqwidgets.createInstance('.jqx-grid-cell', 'jqxDragDrop', options); } }I don’t understand why it’s bug, i have follow your demo…
do you understand ?Thanks a lot !
Topic: End Row Edit Problem
Topic: Jqxgrid date filtertype
Hi,
Issue with “date filtertype” in my application. Also i have included all the required plugins.
// plugin
<script type=”text/javascript” src=”${jsPath}/datatable/jqxcore.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/jqxgrid.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/jqxdata.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/jqxbuttons.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/plugin/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/jqxlistbox.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/jqxdatatable.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/jqxpanel.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/jqxradiobutton.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/jqxinput.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/jqxmenu.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/jqxgrid.grouping.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/plugin/jqxdata.export.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/plugin/jqxgrid.export.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/demos.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/toastr.min.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/common.js”></script><script type=”text/javascript” src=”${jsPath}/datatable/bootstrap-select.min.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/jqxtreegrid.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/globalize.js”></script>
<script type=”text/javascript” src=”${jsPath}/datatable/jqxcalendar.js”></script>//datafield
datafield:[
{ name: ‘startdate’, type: ‘string’ }
]Note: here I have use type as “string” instead of “date”, because i am getting the start date in the string format.
//grid
$(“#grid”).jqxGrid(
{
width: “100%”,
source: dataadapter,
theme: theme,
autoheight: true,
//rowsheight : 70,
pageable: true,
sortable: true,
filterable: true,
showfilterrow: true,
autoshowfiltericon: true,
autoloadstate: false,
selectionmode: ‘none’,
altrows: true,
groupable: true,
autorowheight: true,
pagesize: 10,
pagesizeoptions : [10, 50, 100, 500, 1000, 5000],
virtualmode: true,columns: [
{ text: ‘Start Date’, datafield: ‘startdate’, width: “20%”, filtertype:’date’}
]
});Issue: not getting Date filter and its corresponding filter option like, less than,greater than.
Hello,
I’m having an issue with the custom cell renderer.
const getEmployeeMenu = () => { return ( <Menu onClick={() => console.log('menu item clicked')}> <Menu.Item disabled={false}>{formatMessage('item 1')}</Menu.Item> <Menu.Item disabled={false}>{formatMessage('item 2')}</Menu.Item> <Menu.Item disabled={false}>{formatMessage('item 3')}</Menu.Item> <Menu.Item disabled={false}>{formatMessage('item 4')}</Menu.Item> <Menu.Item disabled={true}>{formatMessage('item 5')}</Menu.Item> <Menu.Item disabled={true}>{formatMessage('item 6')}</Menu.Item> <Menu.Item key={'viewAvailableShifts'}>{formatMessage('item 6')}</Menu.Item> </Menu> ); }; export const employeeCellRenderer = (row, column, value) => { let employeeContextMenu = getEmployeeMenu(); let menuHolder = ( <Dropdown overlay={employeeContextMenu}> <i className={'fas fa-chevron-circle-down'}/> </Dropdown> ); return ReactDOMServer.renderToStaticMarkup( <div className={styles.employeeCellExpanded}> <div className={styles.employeeCellExpanded}> <div className={styles.avatar}><Avatar avatarId={Math.random() * 100} avatarInitials={value.substring(0, 1)}/></div> <div className={styles.employeeName}>{value}</div> <div className={styles.dropdownMenu}>{menuHolder}</div> </div> <div className={styles.utilizationBar}><EmployeeScheduledHoursBar availableHours={32} scheduledHours={4}/></div> </div> ); };Inside of the read-only cell is a button that creates a drop-down. However, when I select the dropdown, it selected the cell. Is there a way to only pick up click events inside the cell container and not the container itself.
I’m completely new to jQWidgets and I think I must be missing something. I’m attempting to create a simple proof of concept for an Angular 7 app using jQWidgets DataTable. Among the many features I’ll need for my app, I’ll need to able to select multiple rows. This would appear to be quite simple, but I have been unable to get it working and I haven’t found any information to help explain what I should do differently. Since I am completely new to jQWidgets, I’ll try to include as much information as possible in case I made mistake just getting set up.
Here’s what I added to my tsconfig:
"include": [ "src/**/*" ], "files": [ "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxdatatable.ts" ]And my angular.json:
"styles": [ "src/styles.scss", "node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.base.css" ],New app.module imports:
import { jqxDataTableComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxdatatable'; @NgModule({ declarations: [ AppComponent, jqxDataTableComponent ], ...app.component.html:
<jqxDataTable [source]="dataAdapter" [sortable]="true" [pageable]="true" [columns]="columns" [selectionMode]="'multipleRows'"></jqxDataTable>app.component.ts:
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { source: any = { localdata: this.generatedata(85), datatype: "array", datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' } ], sortcolumn: 'firstname', sortdirection: 'asc' }; dataAdapter: any = new jqx.dataAdapter(this.source); columns: any[] = [ { text: 'Name', dataField: 'firstname', width: 200 }, { text: 'Last Name', dataField: 'lastname', width: 200 }, { text: 'Product', editable: false, dataField: 'productname', width: 180 }, { text: 'Quantity', dataField: 'quantity', width: 80, align: 'right', cellsAlign: 'right' }, { text: 'Unit Price', dataField: 'price', width: 90, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' } ]; generatedata(num: number) { return [ {firstname: 'Ian', lastname: 'Devling', productname: 'Espresso Truffle', price: 1.75, quantity: 8}, {firstname: 'Nancy', lastname: 'Wilson', productname: 'Cappuccino', price: 5.00, quantity: 3}, {firstname: 'Cheryl', lastname: 'Nodier', productname: 'Caffe Americano', price: 2.50, quantity: 4}, {firstname: 'Martin', lastname: 'Saavedra', productname: 'Caramel Latte', price: 3.80, quantity: 11}, {firstname: 'Guylene', lastname: 'Bjorn', productname: 'Green Tea', price: 1.50, quantity: 8}, {firstname: 'Andrew', lastname: 'Burke', productname: 'Caffe Espresso', price: 3.00, quantity: 2}, {firstname: 'Regina', lastname: 'Murphy', productname: 'White Chocolate Mocha', price: 3.60, quantity: 6}, {firstname: 'Michael', lastname: 'Murphy', productname: 'Caramel Latte', price: 3.80, quantity: 2}, {firstname: 'Petra', lastname: 'Bein', productname: 'Caffe Americano', price: 2.50, quantity: 7}, {firstname: 'Nancy', lastname: 'Nodier', productname: 'Caffe Latte', price: 4.50, quantity: 10}, {firstname: 'Peter', lastname: 'Devling', productname: 'Green Tea', price: 1.50, quantity: 1}, {firstname: 'Beate', lastname: 'Saylor', productname: 'Espresso con Panna', price: 3.25, quantity: 3}, {firstname: 'Shelley', lastname: 'Nodier', productname: 'Peppermint Mocha Twist', price: 4.00, quantity: 7}, {firstname: 'Nancy', lastname: 'Murphy', productname: 'Peppermint Mocha Twist', price: 4.00, quantity: 1}, {firstname: 'Lars', lastname: 'Wilson', productname: 'Caffe Espresso', price: 3.00, quantity: 11} ]; } }As far as I can tell, multiple row selection should just work once you’ve set selectionMode = multipleRows. But I would expect then that when I click on a row, it appears darker and when I click on another row, both of the two selected rows appear darker. Instead, the first row appears unselected once I select a new row. Likewise I would expect DataTable.getSelection to return an array of all selected rows, but it only returns an object of the most recently selected row.
What am I missing here?
i have a page where based on dropdown i’m changing the grid data.In grid data the status field is having a filter row . when i change the dropdown so i create a new array for status filter row and update the filterrow using
$('#jqxgrid').jqxGrid('refreshfilterrow'). so it works only once when second time i will select the dropdown and change the value of filterrow it will not reflecting to the grid.page.html
<div class="requests index"> <div class="panel panel-default"> <div class="panel-heading"> <h5><?php __('Cases');?></h5> </div> <div class="panel-body"> <!-- <p>Below is a list of all cases, please click on an item in the list for full information.</p>--> <div class="list-types"> <div class="container"> <div class="caselist-parent-row row"> <div class="col-md-4 form-group" style="marginTop: '25px';marginRight: '-20px';width: '250px'"> <select placeholder="select" class="form-control" id="quickFilter"> <option value="">Select filter</option> <?php if(sizeof($config)>0) { foreach($config as $k=>$v) { ?> <option value="<?php echo $v['name'];?>" <?php if(!empty($v['default']) && $v['default']=="1") echo 'selected="selected"'; ?>><?php echo $v['label'];?></option> <?php } } ?> </select> </div> <div class="col-md-1 form-group" style="marginTop: '25px';marginRight: '-20px';width: '120px'"> <button type="submit" class="btn btn-default search-btn"><i class="fa fa-floppy-o"></i> Save</button> </div> <div class="col-md-1 form-group" style="marginTop: '25px';marginRight: '-20px';width: '120px'"> <button type="submit" class="btn btn-default search-btn" > <i class="fa fa-pencil-square-o" aria-hidden="true"></i> Save As </button> </div> <div class="col-md-1 form-group" style="margin: 0 0 0 470px"> <i class="fa fa-download img-space" aria-hidden="true" id='excelExport1'></i> <i class="fa fa-columns" aria-hidden="true"></i> </div> <br/><br/> <div style="text-align: right;margin: 0 23px 10px 0;"> <div style="display:inline-block" id='exportReport' ></div> <div style="display:inline-block" id='expandColoumn' ></div> <div id='jqxlistBox'></div> </div> <div id='eventLog'></div> <div class="caselist-child-row" > <div id="jqxgrid"></div> </div> <br /> </div> </div> </div><!-- /end list tabs --> </div> </div> </div>data.js
$(document).ready(function () { const filterJson = JSON.parse(filterData); var defaultSelect = $('#quickFilter option:selected').val(); const basicFilters = { retailer_id: [1, 2, 4, 5, 12, 20, 23, 24], is_sandbox_on: [0] } let html = ''; let cloudItems = []; let repairerSource = { datatype: 'array', datafields: [ { name: 'label', type: 'string' }, { name: 'value', type: 'string' } ] }; if(defaultSelect){ var defaultData = findObjectByKey(filterJson, 'name', defaultSelect); basicFilters.conditions = defaultData.conditions; repairerSource.localdata = defaultData.repairer_status; }else{ basicFilters.conditions = []; basicFilters.status = []; repairerSource.localdata = []; } // prepare the data var source = { datafields: [ {name: 'id', type: 'number'}, {name: 'last_name', type: 'string'}, {name: 'store', type: 'string'}, {name: 'item_descriptor', type: 'string'}, {name: 'repairer_name', type: 'string'}, {name: 'product_brand', type: 'html'}, {name: 'is_floor_stock', type: 'bool'}, {name: 'days', type: 'number'}, {name: 'created', type: 'date'}, {name: 'updated', type: 'date'}, {name: 'repairer_status', type: 'string'}, {name: 'is_extended_warranty', type: 'bool'}, {name: 'is_floor_stock', type: 'bool'}, {name: 'is_inhome', type: 'number'}, {name: 'is_sandbox_mode', type: 'number'}, {name: 'callcentre', type: 'number'}, {name: 'retailer', type: 'string'}, {name: 'phone', type: 'string'}, {name: 'product_serial_number', type: 'string'}, {name: 'replacement_serial_number', type: 'string'}, {name: 'unique_product_identification', type: 'string'}, {name: 'repairer_reference_number', type: 'string'}, {name: 'model_no', type: 'string'}, {name: 'product_id', type: 'number'}, {name: 'apn_no', type: 'number'}, ], url: 'http://sample-api.com/search', datatype: 'json', pagesize: 20, type: 'post', root: 'Rows', cache: false, sortcolumn: 'id', sortdirection: 'desc', data: { params: basicFilters, }, filter: function () { // update the grid and send a request to the server. $('#jqxgrid').jqxGrid('updatebounddata', 'filter') }, sort: function () { // update the grid and send a request to the server. $('#jqxgrid').jqxGrid('updatebounddata', 'sort') }, beforeprocessing: function (data) { if (data != null && data.length > 0) { source.totalrecords = data[0].TotalRows } }, pager: function (pagenum, pagesize, oldpagenum) { $('#jqxgrid').jqxGrid('updatebounddata', 'data') }, } var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (data) { }, loadError: function (xhr, status, error) { }, downloadComplete: function (data, status, xhr) { document.body.classList.remove('reactloader'); }, }) $('#jqxgrid').on('filter', function (event) { var filterGroups = $('#jqxgrid').jqxGrid('getfilterinformation') var eventData = 'Triggered \'filter\' event' html = ''; for (i = 0; i < filterGroups.length; i++) { var filterGroup = filterGroups[i]; var filters = filterGroup.filter.getfilters(); for (var j = 0; j < filters.length; j++) { let valueData = filters[j].value; if(filterGroup.filtercolumn === "created" || filterGroup.filtercolumn === "updated") { valueData = Moment(filters[j].value).format("YYYY-MM-DD"); } html += '<div class="label-size">'+ filterGroup.filtercolumntext +' :'+valueData.toString()+'</div>'; } } document.getElementById('eventLog').innerHTML = html; }) $('#quickFilter').change(function () { var selectedVal = this.value var objd = JSON.parse(filterData); let defaultData = findObjectByKey(objd, 'name', selectedVal); //console.log(defaultData.conditions); source.data = { params: { conditions: defaultData.conditions, retailer_id: [1, 2, 4, 5, 12, 20, 23, 24], is_sandbox_on: [0] } } html = ''; //alert(JSON.stringify(defaultData.repairer_status)); repairerSource.localdata = defaultData.repairer_status; //alert(JSON.stringify(repairerSource.localdata)) $('#jqxgrid').jqxGrid('updatebounddata', 'data') $('#jqxgrid').jqxGrid('refreshfilterrow') displayCloud(defaultData) }) $('#jqxgrid').jqxGrid( { source: dataAdapter, altrows: true, width: 1106, autoheight: true, sortable: true, filterable: true, showfilterrow: true, showsortmenuitems: false, pageable: true, virtualmode: true, rendergridrows: function (obj) { return obj.data }, sorttogglestates: 1, autoshowloadelement: false, columnsresize: true, autorowheight: true, columnsheight: 40, enablebrowserselection: true, columns: [ { text: 'Id', columntype: 'textbox', width: '100', cellsalign: 'center', datafield: 'id', }, { text: 'Customer', columntype: 'textbox', datafield: 'last_name', cellsalign: 'center', hidden: false, }, { text: 'Store', columntype: 'textbox', datafield: 'store', cellsalign: 'center', hidden: false, }, { text: 'Product', datafield: 'item_descriptor', cellsalign: 'center', hidden: false, }, { text: 'Brand', columntype: 'textbox', width: '100', datafield: 'product_brand', cellsalign: 'center', hidden: false, }, { text: 'Repairer Name', columntype: 'textbox', datafield: 'repairer_name', cellsalign: 'center', hidden: false, }, { text: 'Age', width: '100', datafield: 'days', filtertype: 'number', cellsalign: 'center', cellsrenderer: function (row, column, value) { return '<div class="jqx-grid-cell-middle-align">' + value + ' days</div>' }, }, { text: 'Status', datafield: 'repairer_status', filtertype: 'checkedlist', filteritems: new $.jqx.dataAdapter(repairerSource), cellsalign: 'center', createfilterwidget: (column, htmlElement, editor) => { editor.jqxDropDownList( {displayMember: 'label', valueMember: 'value'}) }, }, { text: 'Created', filtertype: 'date', datafield: 'created', cellsformat: 'yyyy-MM-dd', cellsalign: 'center', hidden: true, }, { text: 'Updated', filtertype: 'date', datafield: 'updated', cellsformat: 'yyyy-MM-dd', cellsalign: 'center', hidden: true, }, { text: 'Extended Warranty', datafield: 'is_extended_warranty', filterable: false, hidden: true, }, { text: 'Floor Stock', datafield: 'is_floor_stock', filterable: false, hidden: true, }, { text: 'In Home', datafield: 'is_inhome', filterable: false, hidden: true, }, { text: 'SandBox Mode', datafield: 'is_sandbox_mode', filterable: false, hidden: true, }, { text: 'Callcentre', datafield: 'callcentre', filterable: false, hidden: true, }, {text: 'Retailer', datafield: 'retailer', hidden: true}, {text: 'Phone', datafield: 'phone', hidden: true}, { text: 'Replacement Serial No.', datafield: 'replacement_serial_number', hidden: true, }, { text: 'Unique Product Identification', datafield: 'unique_product_identification', hidden: true, }, { text: 'Product Serial No.', datafield: 'product_serial_number', hidden: true, }, { text: 'Repaierer Reference No.', datafield: 'repairer_reference_number', hidden: true, }, {text: 'Model No.', datafield: 'model_no', hidden: true}, {text: 'Product Id', datafield: 'product_id', hidden: true}, {text: 'Apn No', datafield: 'apn_no', hidden: true}, { text: 'Action', width: '80px', datafield: 'Edit', sortable: false, filterable: false, showfilterrow: false, columntype: 'button', cellsrenderer: function (row) { var datarow = $('#jqxgrid').jqxGrid('getrowdata', row) //console.log(datarow.id) return '<i class=\'fa fa-eye\' \'> </i> <a href=\'/requests/view/' + datarow.id + '?type=newatstore&offset=1\'><span class=\'link\'> View</span> ' //console.log(dataRecord); }, }, ], }) let listBoxSource = [ {'label': 'Id', 'value': 'id', 'checked': true}, {'label': 'Age', 'value': 'days', 'checked': true}, {'label': 'Apn Number', 'value': 'apn_no', 'checked': false}, {'label': 'Brand', 'value': 'product_brand', 'checked': true}, {'label': 'Callcentre', 'value': 'callcentre', 'checked': false}, {'label': 'Created', 'value': 'created', 'checked': false}, {'label': 'Customer', 'value': 'last_name', 'checked': true}, { 'label': 'Extended Warranty', 'value': 'is_extended_warranty', 'checked': false, }, {'label': 'Floor Stock', 'value': 'is_floor_stock', 'checked': false}, {'label': 'In Home', 'value': 'is_inhome', 'checked': false}, {'label': 'Model No', 'value': 'model_no', 'checked': false}, {'label': 'Phone', 'value': 'phone', 'checked': false}, { 'label': 'Product Description', 'value': 'item_descriptor', 'checked': true, }, {'label': 'Product Id', 'value': 'product_id', 'checked': false}, { 'label': 'Product Serial No', 'value': 'product_serial_number', 'checked': false, }, {'label': 'Repairer Name', 'value': 'repairer_name', 'checked': true}, { 'label': 'Repairer Reference No', 'value': 'repairer_reference_number', 'checked': false, }, { 'label': 'Replacement Serial No', 'value': 'replacement_serial_number', 'checked': false, }, { 'label': 'Replacement Serial No', 'value': 'replacement_serial_number', 'checked': false, }, {'label': 'Retailer', 'value': 'retailer', 'checked': false}, {'label': 'Sandbox Mode', 'value': 'is_sandbox_mode', 'checked': false}, {'label': 'Status', 'value': 'repairer_status', 'checked': true}, {'label': 'Store', 'value': 'store', 'checked': true}, { 'label': 'Unique Product Identification', 'value': 'unique_product_identification', 'checked': false, }, {'label': 'Updated', 'value': 'updated', 'checked': false}] $('#jqxlistBox').on('checkChange', function (event) { $('#jqxgrid').jqxGrid('beginupdate') if (event.args.checked) { $('#jqxgrid').jqxGrid('showcolumn', event.args.value) } else { $('#jqxgrid').jqxGrid('hidecolumn', event.args.value) } $('#jqxgrid').jqxGrid('endupdate') }) function findObjectByKey(array, key, value) { for (var i = 0; i < array.length; i++) { if (array[i][key] === value) { return array[i]; } } return null; } $(".fa-download").click(function () { var ts = new Date(); let fileName = "solvup-"+ts.toISOString()+"-"+getRandomNumber(0, 10000); $("#jqxgrid").jqxGrid('exportdata', 'xls', fileName, true, null); }); $("#jqxlistBox").hide(); $(".fa-columns").click(function () { $("#jqxlistBox").toggle(); }); function displayCloud (data) { Object.keys(data.conditions).forEach(function(key,index) { if(key == 'status'){ if(data.conditions.status != undefined && data.repairer_status != undefined){ for (var j = 0; j < data.repairer_status.length; j++){ let labelName = data.repairer_status[j].label; html += '<div class="label-size">STATUS : ' + labelName.toString() + '</div>'; } } }else if(key == 'status_not'){ if(data.conditions.status_not != undefined && data.repairer_status != undefined){ for (var j = 0; j < data.repairer_status.length; j++){ let labelName = data.repairer_status[j].label; html += '<div class="label-size">STATUS NOT : ' + labelName.toString() + '</div>'; } } }else if(key == 'end_date'){ console.log(key) html += '<div class="label-size">'+ key +' : '+index+'</div>'; }else{ html += '<div class="label-size">'+ key +' : '+index.toString()+'</div>'; } }); document.getElementById('eventLog').innerHTML = html; } function getRandomNumber(low, high) { var r = Math.floor(Math.random() * (high - low + 1)) + low; return r; } $("#jqxlistBox").jqxListBox({ source: listBoxSource,checkboxes : true }); })In above js file i have a quickFilter on change function where i want to check the dropdown is changed or not , if it changed so i get the value and update
repairerSource.localdata = defaultData.repairer_statusafter that i have updatebound data and refresh filter row . so it is working only once when i try to change the dropdown again it is not working so i didn’t get why it is not working.