jQWidgets Forums

Tagged: Access, data, grid, jqxgrid, Knockout, model, observable, observableArray, row

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 10 years, 1 month ago.

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

Author

Reference Knockout Observable via API Posts

March 18, 2015 at 11:56 pm Reference Knockout Observable via API #68830

Scott

Participant

I am using knockout and jqxGrid and want to be able to access the knockout observable so I can perform some action on it.

I can use the jqx API but it gives me the data read from the observable, but not the observable itself. How can I do this?

        <div id="Me" data-bind="jqxGrid: {
                source: items, // My observable array.
                autoheight: true,
                editable: true,
                selectionmode: 'singlerow',
                pageable: true,
                width: '100%',
                sortable: true,
                pagermode: 'simple',
                columns: [
                    { text: 'User Name', dataField: 'UserName' },
                    { text: 'Full Name', dataField: 'FullName' },
                    { text: 'Email Address', dataField: 'Email' },
                    { text: 'Domain', dataField: 'Domain' },
                    {
                        text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () { return 'Edit'; },
                        buttonclick: function (row) {
                            var data = $('#Me').jqxGrid('getrowdata', row);
                            // data is a plain old JavaScript object, not the observable from whence the data came.
                        }

                    }
                ]
            }">
        </div>

Thanks for any help.

March 19, 2015 at 7:38 am Reference Knockout Observable via API #68837

Dimitar

Participant

Hello Scott,

Please check out the following example, based on the Knockout demo Grid and JSON data. In it, the observable array items is accessed in the buttonclick callback.

<!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.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/json2.js"></script>
    <script type="text/javascript" src="../../scripts/knockout-3.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.selection.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 url = "../sampledata/beverages.txt";

            var GridModel = function () {
                this.items = ko.observableArray();
                var me = this;
                $.ajax({
                    datatype: 'json',
                    url: "../sampledata/beverages.txt"
                }).done(function (data) {
                    var jsonData = $.parseJSON(data);
                    me.items(jsonData);
                });
            };

            var model = new GridModel();

            // prepare the data
            var source =
            {
                datatype: "observablearray",
                datafields: [
                    { name: 'name' },
                    { name: 'type' },
                    { name: 'calories', type: 'int' },
                    { name: 'totalfat' },
                    { name: 'protein' },
                ],
                id: 'id',
                localdata: model.items
            };

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

            $("#grid").jqxGrid(
            {
                width: 800,
                source: dataAdapter,
                columns: [
                  { text: 'Name', datafield: 'name', width: 150 },
                  { text: 'Beverage Type', datafield: 'type', width: 150 },
                  { text: 'Calories', datafield: 'calories', width: 150 },
                  { text: 'Total Fat', datafield: 'totalfat', width: 150 },
                  { text: 'Protein', datafield: 'protein', width: 150 },
                  {
                      text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () { return 'Edit'; },
                      buttonclick: function (row) {
                          alert(model.items().length);
                      }

                  }
                ]
            });

            ko.applyBindings(model);
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="grid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

March 19, 2015 at 5:37 pm Reference Knockout Observable via API #68863

Scott

Participant

Thanks, but how do I get a reference to the element in the array that corresponds to the row. I don’t presume it’s model.items(row).

March 20, 2015 at 6:30 am Reference Knockout Observable via API #68875

Dimitar

Participant

Hi Scott,

You can get the current row’s data like so: model.items()[row].

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.