jQWidgets Forums

jQuery UI Widgets Forums Grid Filterype checkedlist with Knockout

This topic contains 3 replies, has 2 voices, and was last updated by  akerbeltz 11 years, 11 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Filterype checkedlist with Knockout #25806

    akerbeltz
    Member

    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

    Filterype checkedlist with Knockout #25829

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    Filterype checkedlist with Knockout #25843

    akerbeltz
    Member

    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

    Filterype checkedlist with Knockout #26128

    akerbeltz
    Member

    Anyone was able to do it with remote data?
    I’m still stuck with this :S

    Thanks

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.