jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Filterype checkedlist with Knockout
Tagged: grid filter type
This topic contains 3 replies, has 2 voices, and was last updated by akerbeltz 11 years, 11 months ago.
-
Author
-
Hi there,
I can’t put to work the checkedlist filtering using knockout. When opening the list it’s always empty.
My code:var gModel = new GridModel(); var source = { datatype: 'observablearray', datafields: [ { name: 'qm_id' }, { name: 'qm_name' }, { name: 'qm_description' }, { name: 'qm_identifier'}, { name: 'qm_is_active', type: 'bool' }, { name: 'qm_company_id' }, { name: 'company_name', type: 'string' }, { name: 'qm_queue_category_id'}, { name: 'qc_name', type: 'string'} ], id: 'qm_id', localdata: gModel.items, sortcolumn: 'qm_name', sortdirection: 'asc', }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid( { source: dataAdapter, columns: [ { text: $.i18n.t('queues_configuration.lob_name'), datafield: 'qc_name', filtertype: 'list', width: 195 }, { text: $.i18n.t('queues_configuration.company'), datafield: 'company_name', filtertype: 'checkedlist', width: 195 }, { text: $.i18n.t('queues_configuration.name'), datafield: 'qm_name', filtertype: 'textbox', filtercondition: 'starts_with', width: 195 }, { text: $.i18n.t('queues_configuration.is_active'), columntype: 'checkbox', align: 'center', datafield: 'is_active', filtertype: 'bool', width: 80 } ], theme: theme, width: '700', height: '500', sortable: true, showfilterrow: true, filterable: true, showstatusbar: true, columnsresize: true, pageable: true, pagerheight: 40, toolbarheight: 65, showtoolbar: true });
My data:
0: Object company_name: "Company Data" qc_name: "Image Queue" qm_company_id: "f0b2089f-9de0-434e-bd6a-8ac6e10072bd" qm_description: "Truck Queue 354" qm_id: "f3366ad5-9f55-4c75-b6ba-071c9a1c4708" qm_identifier: "354" qm_is_active: true qm_name: "Truck 354" qm_queue_category_id: "3306d99a-536d-4dce-8c8b-e8a1948f514f"
Can you please advise?
Thanks
Hi akerbeltz,
Here’s a working sample based on the provided information:
<!DOCTYPE html><html lang="en"><head> <title id='Description'>This example shows how to integrate jqxGrid with Knockout.js. </title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="../../scripts/json2.js"></script> <script type="text/javascript" src="../../scripts/knockout-2.2.1.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = ''; var items = [{company_name: "Company Data", qc_name: "Image Queue", qm_company_id: "f0b2089f-9de0-434e-bd6a-8ac6e10072bd", qm_description: "Truck Queue 354", qm_id: "f3366ad5-9f55-4c75-b6ba-071c9a1c4708", qm_identifier: "354", qm_is_active: true, qm_name: "Truck 354", qm_queue_category_id: "3306d99a-536d-4dce-8c8b-e8a1948f514f"} ]; var gModel = function (items) { this.items = ko.observableArray(items); } var model = new gModel(items); var source = { datatype: 'observablearray', datafields: [ { name: 'qm_id' }, { name: 'qm_name' }, { name: 'qm_description' }, { name: 'qm_identifier' }, { name: 'qm_is_active', type: 'bool' }, { name: 'qm_company_id' }, { name: 'company_name', type: 'string' }, { name: 'qm_queue_category_id' }, { name: 'qc_name', type: 'string' } ], id: 'qm_id', localdata: model.items, sortcolumn: 'qm_name', sortdirection: 'asc' }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid( { source: dataAdapter, columns: [ { text: "qc_name", datafield: 'qc_name', filtertype: 'list', width: 195 }, { text: "company_name", datafield: 'company_name', filtertype: 'checkedlist', width: 195 }, { text: "qm_name", datafield: 'qm_name', filtertype: 'textbox', filtercondition: 'starts_with', width: 195 }, { text: "is_active", columntype: 'checkbox', align: 'center', datafield: 'is_active', filtertype: 'bool', width: 80 } ], theme: theme, width: '700', height: '500', sortable: true, showfilterrow: true, filterable: true, showstatusbar: true, columnsresize: true, pageable: true, pagerheight: 40, toolbarheight: 65, showtoolbar: true }); ko.applyBindings(model); }); </script></head><body class='default'> <div id="jqxgrid"> </div></body></html>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hi Peter,
I’m loading a remote JSON, and I can’t put it to work.
If I use a local object like your example it works perfect, but for remote data it doesn’t.Can you please advise?
Thanks in advance
Anyone was able to do it with remote data?
I’m still stuck with this :SThanks
-
AuthorPosts
You must be logged in to reply to this topic.