jQuery UI Widgets Forums Grid Knouckout JqxGrid checkbox column not working correctly

This topic contains 1 reply, has 2 voices, and was last updated by  Yavor Dashev 2 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • Fiham
    Participant

    I have used an observable array to feed the jqxgrid. but the checkbox column datafield not syncing correctly. grid starting to flicker when I check the checkbox and rows will disappear in the grid. but data is available in the array. Please support to fix this issue

    var source =
        {
            dataType: "obserableArray",
            dataFields: [
                { name: "WarehousePartition", type: "string" },            
                { name: "TransactionSelect", type: "bool" },
                { name: "RowNum", type: "string" }
            ],
            localData: items,
            id: "RowNum"
        };
    
        var dataAdapter = new $.jqx.dataAdapter(source);
        
        $("#jqxInternalList").jqxGrid(
            {
                source: dataAdapter,
                altRows: true,
                sortable: true,
                width: '100%',
                theme: 'metro',
                columnsResize: true,
                rowsheight: 35,
                editable: true,
                columns: [
                    { text: "", align: "center", dataField: "TransactionSelect", columntype: 'checkbox', width: '3%', cellsAlign: "center", align: "center" },                
                    { text: "Warehouse Partition", align: "center", dataField: "WarehousePartition", width: '10%', cellsAlign: "center", align: "center", editable: false }                
                ]
            });
    • This topic was modified 2 years, 8 months ago by  Fiham.

    Yavor Dashev
    Participant

    Hi Fiham,

    I couldn’t reproduce the issue the same way as you have described it that is why I have created a code example which showcases a working checkbox type of a column using the latest version of jQWidgets.

    The code example:

      <script type="text/javascript">
            $(document).ready(function () {
                var initialData = [
                    { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
                    { name: "Speedy Coyote", sales: 89, price: 190.00 },
                    { name: "Furious Lizard", sales: 152, price: 25.00 },
                    { name: "Indifferent Monkey", sales: 1, price: 99.95 },
                    { name: "Brooding Dragon", sales: 0, price: 6350 },
                    { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
                    { name: "Optimistic Snail", sales: 420, price: 1.50 }
                ];
    
                var GridModel = function (items) {
                    this.items = ko.observableArray(items);
                    this.disabled = ko.observable(false);
    
                    this.addItem = function () {
                        // add a new item.
                        if (this.items().length < 20) {
                            this.items.push({ name: "New item", sales: Math.round(Math.random() * 100), price: Math.round(Math.random() * 100) });
                        }
                    };
    
                    this.removeItem = function () {
                        // remove the last item.
                        this.items.pop();
                    };
    
                    this.updateItem = function () {
                        // update the first item.
                        var item = {};
                        if (initialData.length > 0) {
                            item.name = initialData[Math.floor(Math.random() * initialData.length)].name;
                            item.sales = Math.floor(Math.random() * 500);
                            item.price = Math.floor(Math.random() * 200);
                            this.items.replace(this.items()[0], item);
                        }
                    };
                };
    
                ko.applyBindings(new GridModel(initialData));
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div style="margin-bottom: 10px;">
                <input id="addButton" type="button" data-bind="click: addItem, jqxButton: {}" value="Add Item" />
                <input id="removeButton" type="button" data-bind="click: removeItem, jqxButton: {}" value="Remove Last Item" />
                <input id="updateButton" type="button" data-bind="click: updateItem, jqxButton: {}" value="Update First Item" />
                <div data-bind="jqxCheckBox: {checked: disabled}" style='margin-top: 5px;' id="checkBox">Disabled</div>
            </div>
            <div data-bind="jqxGrid: {source: items, disabled: disabled, autoheight: true,                
                    altRows: true,
                    sortable: true,
                    width: '100%',
                    theme: 'metro',
                    columnsResize: true,
                    rowsheight: 35,
                    editable: true,
                    selectionmode: 'singlecell',
                    columns: [
                        { text: 'Name', dataField: 'name', width: 200, columntype: 'checkbox', },
                        { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
                        { text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' }
                    ]}" id="jqxgrid">
            </div>
            <table style="margin-top: 20px;">
                <tbody data-bind="foreach: items">
                    <tr>
                        <td data-bind="text: name"></td>
                        <td data-bind="text: sales"></td>
                        <td data-bind="text: price"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    

    If you can share a bit more information of how to reproduce the issue or even modify the code snippet that I have sent you then we could be a able to give you a solution for you use case.

    Please, do not hesitate to contact us if you have any additional questions.

    Best Regards,
    Yavor Dashev
    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.