jQWidgets Forums

Tagged: datagrid, gridview, KnockoutJS jqxgrid

This topic contains 7 replies, has 3 voices, and was last updated by vdo 13 years, 2 months ago.

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

Author

Grid knockoutjs integration Posts
April 9, 2012 at 9:22 am Grid knockoutjs integration #3268

asafp
Member

I would like to bind the grid to adapter and also applay the ko bindings while fetching the data with ajax call

var source = {
datatype: “json”,
url: ‘/test/getData’
};

var dataAdapter = new $.jqx.dataAdapter(source);

var grd = $(“#jqxgrid”).jqxGrid({
source: dataAdapter,
theme: ‘classic’,
editable: true,
selectionmode: ‘singlecell’,
columns: [{ text: ‘a1’, datafield: ‘a1’,
width: 250
}, { text: ‘a2’, datafield: ‘a2’, width: 150 },
{ text: ‘a3’, datafield: ‘a3’, width: 180 },
{ text: ‘a4’, datafield: ‘a4’, width: 200 },
{ text: ‘a5’, datafield: ‘a5’, width: 120}]
});

my datatype is json and im fetching the data from the server
where is the right place to applay the bindings >

the data is populated only when server request is finished.

Thanks

April 9, 2012 at 10:33 am Grid knockoutjs integration #3269
Peter Stoev
Keymaster
Hi asafp,

If you want to use the Grid with Knockout, you should set the localdata property of the Grid’s source object to point to the Knockout’s observable collection. The Grid will then auto-update its UI when the bound object is updated. All data bindings and data handling operations should be defined in the model i.e adding, removing or updating records or synchronization with the server. For more details about integration with Knockout, check this help topic: knockoutjs.htm.

Here’s a sample using Knockout, jqxGrid and JSON data:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/knockout-2.0.0.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.columnsresize.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // get data.
            var url = "../sampledata/beverages.txt";
            var dataSource =
            {
                datatype: "json",
                datafields: [
                    { name: 'name' },
                    { name: 'type' },
                    { name: 'calories', type: 'int' },
                    { name: 'totalfat' },
                    { name: 'protein' },
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(dataSource, { autoBind: true, async: false });
            // create model.
            var GridModel = function (items) {
                this.items = ko.observableArray(items);
                this.addItem = function () {
                    // add a new item.
                    this.items.push({ name: "New item", calories: Math.round(Math.random() * 100), totalfat: Math.round(Math.random() * 100) });
                };
                this.removeItem = function () {
                    // remove the last item.
                    this.items.pop();
                };
            };
            // activate knockout.
            var model = new GridModel(dataAdapter.records);
            ko.applyBindings(model);
            // bind grid to the knockout's observable array.
            var source = {
                localdata: model.items,
                datatype: 'local'
            }
            $('#addButton').jqxButton({ theme: theme });
            $('#removeButton').jqxButton({ theme: theme });
    
            // create jqxGrid.
            $("#jqxgrid").jqxGrid(
            {
                source: source,
                autoheight: true,
                pageable: true,
                columns: [
                  { text: 'Name', datafield: 'name', width: 250 },
                  { text: 'Beverage Type', datafield: 'type', width: 250 },
                  { text: 'Calories', datafield: 'calories', width: 180 },
                  { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                  { text: 'Protein', datafield: 'protein', minwidth: 120 }
               ]
            });
        });
    </script>
</head>
<body class='default'>
    <div style="margin-bottom: 10px;">
        <input id="addButton" type="button" data-bind="click: addItem" value="Add Item"/>
        <input id="removeButton" type="button" data-bind="click: removeItem" value="Remove Item"/>
    </div>
    <div id="jqxgrid">
    </div>
</body>
</html>
```
The contents of the json file are:
```
[{
 "id": "1",
 "name": "Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "370",
 "totalfat": "16g",
 "protein": "14g"
 }, {
 "id": 2,
 "name": "Peppermint Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "440",
 "totalfat": "16g",
 "protein": "13g"
}, {
 "id": "3",
 "name": "Salted Caramel Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "450",
 "totalfat": "16g",
 "protein": "13g"
}, {
 "id": "4",
 "name": "White Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "420",
 "totalfat": "16g",
 "protein": "12g"
}, {
 "id": "5",
 "name": "Caffe Americano",
 "type": "Espresso Beverage",
 "calories": "15",
 "totalfat": "0g",
 "protein": "1g"
}, {
 "id": "6",
 "name": "Caffe Latte",
 "type": "Espresso Beverage",
 "calories": "190",
 "totalfat": "7g",
 "protein": "12g"
}, {
 "id": "7",
 "name": "Caffe Mocha",
 "type": "Espresso Beverage",
 "calories": "330",
 "totalfat": "15g",
 "protein": "13g"
}, {
 "id": "8",
 "name": "Cappuccino",
 "type": "Espresso Beverage",
 "calories": "120",
 "totalfat": "4g",
 "protein": "8g"
}, {
 "id": "9",
 "name": "Caramel Brulee Latte",
 "type": "Espresso Beverage",
 "calories": "420",
 "totalfat": "9g",
 "protein": "8g"
}, {
 "id": "10",
 "name": "Caramel Macchiato",
 "type": "Espresso Beverage",
 "calories": "240",
 "totalfat": "11g",
 "protein": "10g"
}, {
 "id": "11",
 "name": "Peppermint Hot Chocolate",
 "type": "Espresso Beverage",
 "calories": "440",
 "totalfat": "10g",
 "protein": "13g"
}, {
 "id": "12",
 "name": "Cinnamon Dolce Latte",
 "type": "Espresso Beverage",
 "calories": "260",
 "totalfat": "6g",
 "protein": "10g"
}, {
 "id": "13",
 "name": "Eggnog Latte",
 "type": "Espresso Beverage",
 "calories": "460",
 "totalfat": "16g",
 "protein": "13g"
}, {
 "id": "14",
 "name": "Espresso",
 "type": "Espresso Beverage",
 "calories": "5",
 "totalfat": "1g",
 "protein": "1g"
}, {
 "id": "15",
 "name": "Espresso Con Panna",
 "type": "Espresso Beverage",
 "calories": "30",
 "totalfat": "1g",
 "protein": "0g"
}, {
 "id": "16",
 "name": "Espresso Macchiato",
 "type": "Espresso Beverage",
 "calories": "100",
 "totalfat": "1g",
 "protein": "0g"
}, {
 "id": "17",
 "name": "Flavored Latte",
 "type": "Espresso Beverage",
 "calories": "250",
 "totalfat": "6g",
 "protein": "12g"
}, {
 "id": "18",
 "name": "Gingerbread Latte",
 "type": "Espresso Beverage",
 "calories": "320",
 "totalfat": "13g",
 "protein": "12g"
}, {
 "id": "19",
 "name": "White Chocolate Mocha",
 "type": "Espresso Beverage",
 "calories": "470",
 "totalfat": "18g",
 "protein": "15g"
}, {
 "id": 20,
 "name": "Skinny Peppermint Mocha",
 "type": "Espresso Beverage",
 "calories": 130,
 "totalfat": "15g",
 "protein": "13g"
}, {
 "id": "21",
 "name": "Skinny Flavored Latte",
 "type": "Espresso Beverage",
 "calories": "120",
 "totalfat": "0g",
 "protein": "12g"
}, {
 "id": "22",
 "name": "Pumpkin Spice Latte",
 "type": "Espresso Beverage",
 "calories": "380",
 "totalfat": "13g",
 "protein": "14g"
}, {
 "id": "23",
 "name": "Caffe Vanilla Frappuccino",
 "type": "Frappuccino Blended Beverage",
 "calories": "310",
 "totalfat": "3g",
 "protein": "3g"
}, {
 "id": "24",
 "name": "Caffe Vanilla Frappuccino Light",
 "type": "Frappuccino Blended Beverage",
 "calories": "180",
 "totalfat": "0g",
 "protein": "3g"
}, {
 "id": "25",
 "name": "Caramel Brulee Frappuccino",
 "type": "Frappuccino Blended Beverage",
 "calories": "410",
 "totalfat": "13g",
 "protein": "4g"
}, {
 "id": "26",
 "name": "Caramel Brulee Frappuccino Light",
 "type": "Frappuccino Blended Beverage",
 "calories": "190",
 "totalfat": "0g",
 "protein": "3g"
}, {
 "id": "27",
 "name": "Eggnog Frappuccino",
 "type": "Frappuccino Blended Beverage",
 "calories": "420",
 "totalfat": "18g",
 "protein": "7g"
}, {
 "id": "28",
 "name": "Mocha Frappuccino",
 "type": "Frappuccino Blended Beverage",
 "calories": "400",
 "totalfat": "15g",
 "protein": "5g"
}, {
 "id": "29",
 "name": "Tazo Green Tea Creme Frappuccino",
 "type": "Frappuccino Blended Beverage",
 "calories": "430",
 "totalfat": "16g",
 "protein": "6g"
}]
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
April 10, 2012 at 5:05 pm Grid knockoutjs integration #3314

vdo
Participant

Hi,

I copy and paste the sample code above and have the link to point to the right script files and url for beverages.txt but I’m seeing an empty grid. Did I miss anything? I was able to checkout other example just fine except for knockout. Below’s the error I’m seeing in my console tab using WebStorm IDE. Thanks for your help.

Unknown property ‘user-select’. Declaration dropped. (http://localhost/Knockout/jqwidgets/styles/jqx.base.css:100)
Error in parsing value for ‘padding’. Declaration dropped. (http://localhost/Knockout/jqwidgets/styles/jqx.base.css:1748)
Error in parsing value for ‘padding’. Declaration dropped. (http://localhost/Knockout/jqwidgets/styles/jqx.base.css:1760)
Error in parsing value for ‘padding’. Declaration dropped. (http://localhost/Knockout/jqwidgets/styles/jqx.base.css:1917)
Expected color but found ‘#FFC5C5C5’. Error in parsing value for ‘background’. Declaration dropped. (http://localhost/Knockout/jqwidgets/styles/jqx.base.css:2276)
Error in parsing value for ‘filter’. Declaration dropped. (http://localhost/Knockout/jqwidgets/styles/jqx.base.css:2277)
Error in parsing value for ‘background’. Declaration dropped. (http://localhost/Knockout/jqwidgets/styles/jqx.base.css:2279)
Error in parsing value for ‘cursor’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Error in parsing value for ‘cursor’. Declaration dropped.
Expected ‘:’ but found ‘=’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Expected ‘:’ but found ‘=’. Declaration dropped.
Unknown property ‘align’. Declaration dropped.
Unknown property ‘valign’. Declaration dropped.
Error in parsing value for ‘top’. Declaration dropped.
Error in parsing value for ‘height’. Declaration dropped.

April 10, 2012 at 5:50 pm Grid knockoutjs integration #3315
Peter Stoev
Keymaster
Hi vdo,

1. I guess that the if the grid is empty, then the path to the beverages.txt flle is not correct. In the sample, the beverages.txt is in a parent folder called sampledata.
```
var url = "../sampledata/beverages.txt";
```
If your beverages.txt file is at the same folder, change the url to “beverages.txt”.

2. Another thing that you can do is to open the knockoutjs.htm in the installation package and copy-paste the code from this post.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
April 10, 2012 at 6:07 pm Grid knockoutjs integration #3316

vdo
Participant

Hi Peter,

That’s correct. I already changed the url to reflect the correct path but still don’t see any items on the grid. I was able to debug it and see that the data get in correctly using WebStorm. Bottom line, doesn’t seem like the knockout binding is working for me. As stated earlier, I tried the same example w/o using knockout and it’s working fine for me. Not sure what else I can try to make it work with knockout and jqxGrid.

Thanks,

Vincent

April 10, 2012 at 6:14 pm Grid knockoutjs integration #3317

Peter Stoev
Keymaster

Hi Vincent,

Can you see this example in your environment: Knockoutjs.htm

jQWidgets Team
http://www.jqwidgets.com

April 10, 2012 at 6:53 pm Grid knockoutjs integration #3318

Peter Stoev
Keymaster

Hi Vincent,

I uploaded the sample from this post. You can see it online here: Knockout
You can also download the project from here: knockoutjs.rar

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 11, 2012 at 12:47 am Grid knockoutjs integration #3328

vdo
Participant

Hi Peter,

Thanks for all the help. I can run your sample code just fine. I have been scratching my head with this issue for quite sometimes this morning. When the grid is empty, I made a foreach loop and can display data from the knockout binding just fine. It turned out to be some configuration related issue with WebStorm and knockout.

Thanks,

Vincent
Author

Posts

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

You must be logged in to reply to this topic.