jQWidgets Forums

This topic contains 4 replies, has 2 voices, and was last updated by ewaldhofman 11 years, 9 months ago.

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

Author

How to add a grid row when pushing an item to the Knockout observable array Posts

October 9, 2013 at 7:11 am How to add a grid row when pushing an item to the Knockout observable array #30486

Participant

I have bound the grid to an ObservableArray, but when I update the items in the array the values are not reflected in the grid. I have to call the statement to actually see the new values.

$(‘#jqxGrid’).jqxGrid(‘updatebounddata’);

However when I add an item (via the push method) to the array, the item is never shown in the grid.

What should I do to make the grid listen to the changes in the knockout array?

October 9, 2013 at 7:38 am How to add a grid row when pushing an item to the Knockout observable array #30487

Peter Stoev

Keymaster

Hi ewaldhofman,

You can look at the demos here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxknockout/index.htm. There are already some demos with KO and Grid which illustrate how to add, remove records.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 10, 2013 at 12:12 am How to add a grid row when pushing an item to the Knockout observable array #30516

ewaldhofman

Participant

I have looked at the examples, and the difference is that I use the virtualmode. When I turn off the virtualmode it works perfectly fine, but when the virtualmode is turned on it does not work.

I have played by initially setting the totalrecords to more values then I need, so there is room to add items. Then it works. So I think the question is how to update the totalrecords on the source.

October 10, 2013 at 6:01 am How to add a grid row when pushing an item to the Knockout observable array #30524

Peter Stoev

Keymaster

Hi ewaldhofman,

If the Grid is in virtual mode(i.e when data is loaded on demand) and you want to add a new row with virtual rendering, then you will need to update the source object’s totalrecords and refresh the Grid.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to integrate jqxGrid using jqxDataAdapter 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.2.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.pager.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/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.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/demos.js"></script>
    <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.addItem = function () {
                    this.items.push({ name: "New item", sales: Math.round(Math.random() * 100), price: Math.round(Math.random() * 100) });
                    if (source) source.totalrecords = this.items().length;
                    $("#jqxGrid").jqxGrid('updatebounddata');
                };
            };
            var model = new GridModel(initialData);
            var source = {
                localdata: model.items,
                datatype: 'observablearray'
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxGrid").jqxGrid({
                source: dataAdapter,
                sortable: true,
                editable: true,
                virtualmode: true,
                pageable: true,
                autoheight: true,
                rendergridrows: function(obj)
                {
                    return obj.data;
                },
                selectionmode: 'singlecell',
                columns: [
                    { text: 'Name', dataField: 'name', width: 200 },
                    { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
                    { text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' }
                ]
            });
            ko.applyBindings(model);
        });
    </script>
</head>
<body class='default'>
        <input id="addButton" type="button" data-bind="click: addItem, jqxButton: {}" value="Add Item" />
        <div id="jqxGrid"></div>    
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 15, 2013 at 3:55 am How to add a grid row when pushing an item to the Knockout observable array #30710

ewaldhofman

Participant

Thanks for your response.

In my first attempt the totalrecords was reset when I called the updatedatasource method. And the grid was not updated with the added record.

It turned out that I was updating the totalrecords of the dataadapter. When I changed the code to update the totalrecords of the source that is passed in the constructor of the dataadapter, I have resolved the issue.

Thanks for your prompt response as always.

Ewald

Author

Posts

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

You must be logged in to reply to this topic.