JqxGrid, Knockout, Dropdownlist column and default empty rows

[kkochharParticipant]

Hello jqwidgest Team,

Firstly a big thank you on building such controls. They are just impressive, innovative and good to use.

I m trying to layout a Grid (source is REST Call) with a Dropdownlist column (source is local). Also if the REST call returns no data then trying to create few Empty rows by default. Not sure If I have understood the event execution and binding order correctly. Please direct me to any documentation if it exists but I am having an error when I click on the drop down column Error : Cannot read property ‘visibleItems’ of null . Below is my code–please help:

$(document).ready(function () {           
            
            //Set Billable options
            var billable = {
                "fields": [
                     { value: "Yes", label: "Yes" },
                     { value: "No", label: "No" }
                ],
                "total": 2
            };
            
            var GridModel = function () {
                this.items = ko.observableArray();
                var me = this;

                $.ajax({
                    url: url,
                    type: "GET",
                    headers: { "accept": "application/json;odata=verbose", },
                    success: function (data) {
                        if (data.d.results) {                       

                            var timesheetEntryAdapter = new $.jqx.dataAdapter(data.d.results, {
                                autoBind: true,
                                loadComplete: function () {
                                    var records = dataAdapter.records;
                                    // get the length of the records array.
                                    var length = records.length;
                                    alert(length);
                                }

                            });
                            me.items(data.d.results);

                        }
                        else {
                        }
                    },
                    error: function (xhr) {
                        alert(xhr.status + ': ' + xhr.statusText);
                        console.log(xhr.status + ': ' + xhr.statusText);
                    }
                });

                if (this.items().length <= 0) {
                    for (var i = 0; i < 5; i++) {
                        this.items.push({ TimeIn: "00:00", TimeOut: "00:00", Hours: "0", Project: "", Billable: "", Comments: "" });
                    }
                }
                this.addItem = function () {
                    // add a new item.
                    if (this.items().length < 20) {
                        this.items.push({ TimeIn: "00:00", TimeOut: "00:00", Hours: "0", Project: "", Billable: "", Comments: "" });
                    }
                };
                this.removeItem = function () {
                    // remove the last item.
                    //this.items.pop();
                    var element = "#jqxgrid";
                    var cell = $(element).jqxGrid('getselectedcell');
                    if (cell != null && cell != "") {
                        var selectedrowindex = cell.rowindex;
                        var rowscount = $(element).jqxGrid('getdatainformation').rowscount;
                        if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                            var id = $(element).jqxGrid('getrowid', selectedrowindex);
                            try {
                                this.items.splice(selectedrowindex, 1);
                            }
                            catch (e) {
                            }
                        }
                    }
                };
                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);
                    }
                };
            };

            var model = new GridModel();
           
            //ko.applyBindings(model);
            // prepare the data
            var source =
            {
                datatype: "observablearray",
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful
                    // and with parameter false if the synchronization failder.

                    commit(true);
                },
                datafields: [
                    { name: 'TimeIn' },
                    { name: 'TimeOut' },
                    { name: 'Hours' },
                    { name: 'Title' },
                    { name: 'Billable' },
                    { name: 'Comments' },
                ],
                id: 'id',
                localdata: model.items
            };
            var cellbeginedit = function (row, datafield, columntype, value) {
                return false;
            }
            var cellsrenderer = function (row, column, value, defaultHtml) {
                var element = $(defaultHtml);
                element.css('color', '#999');
                return element[0].outerHTML;

            }

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

            $("#jqxgrid").jqxGrid(
            {
                width: '100%',
                source: dataAdapter,
                pageable: true,
                editable: true,
                autoheight: true,
                theme: 'metrodark',
                sortable: true,
                columnsresize: true,
                altrows: true,
                editmode: 'click',
                columns: [
                  {
                      text: 'In', datafield: 'TimeIn', width: '14%', columntype: 'datetimeinput', cellsformat: "t",
                      createeditor: function (row, value, editor) {
                          editor.jqxDateTimeInput({ formatString: 't', showCalendarButton: false });
                      },
                      validation: function (cell, value) {
                          if (value == "")
                              return true;                          
                          return true;
                      }
                  },
                  {
                      text: 'Out', datafield: 'TimeOut', width: '14%', columntype: 'datetimeinput', cellsformat: "t",
                      createeditor: function (row, value, editor) {
                          editor.jqxDateTimeInput({ formatString: 't', showCalendarButton: false });
                      }
                  },
                  { text: 'Hours', datafield: 'Hours', width: '12%', cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer },
                  { text: 'Project', datafield: 'Title', width: '24%' },
                  {
                      text: 'Billable', datafield: 'Billable', width: '10%', columntype: 'dropdownlist',
                      createeditor: function (row, column, editor) {
                          // assign a new data source to the dropdownlist.
                          var list = ['Yes', 'No'];
                          editor.jqxDropDownList({ displayMember: 'label', valueMember: 'value', source: billable.fields });
                      }
                  },
                  { text: 'Comments', datafield: 'Comments', width: '26%' }
                ]
            });
            ko.applyBindings(model);
        });

[kkochharParticipant]

Hello,

Wondering if anyone can help me on this? Please ignore some of the code regarding additem, removeitem, updateitem.

I need to evaluate this grid quickly before we can go ahead and promote it with our clients.

Quick response will be appreciated.

Thanks
Kunal

[Peter StoevKeymaster]

Hi Kunal,

According to me:

` var billable = {
“fields”: [
{ value: “Yes”, label: “Yes” },
{ value: “No”, label: “No” }
],
“total”: 2
};`

should be:

          var billable = {
                fields: [
                     { value: "Yes", label: "Yes" },
                     { value: "No", label: "No" }
                ],
                total: 2
            };

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kkochharParticipant]

Thanks Peter! My dumbness. Have corrected it but now I am getting following error when I click on drop down: Object [object Number] has no method ‘replace’

[kkochharParticipant]

And on clicking again it throws: Cannot set property ‘0’ of undefined

[kkochharParticipant]

Just to mention that there is no data returned from AJAX call yet so the grid is empty with 5 empty rows without any binding to any datasource objects.

[Peter StoevKeymaster]

Hi Kunal,

Here’s a working sample with jQWidgets 3.2.1, based on your code.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Click on a cell from the "Employee Name" column to begin an edit operation through a DropDownList editor.
    </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-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.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.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/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 () {
            
            $(document).ready(function () {

                //Set Billable options
                var billable = {
                    fields: [
                         { value: "Yes", label: "Yes" },
                         { value: "No", label: "No" }
                    ],
                    total: 2
                };

                var GridModel = function () {
                    this.items = ko.observableArray();
                    var me = this;

                    $.ajax({
                        url: "",
                        type: "GET",
                        headers: { "accept": "application/json;odata=verbose", },
                        success: function (data) {
                       
                        },
                        error: function (xhr) {
                            alert(xhr.status + ': ' + xhr.statusText);
                            console.log(xhr.status + ': ' + xhr.statusText);
                        }
                    });

                    if (this.items().length <= 0) {
                        for (var i = 0; i < 5; i++) {
                            this.items.push({ TimeIn: "00:00", TimeOut: "00:00", Hours: "0", Project: "", Billable: "", Comments: "" });
                        }
                    }
                    this.addItem = function () {
                        // add a new item.
                        if (this.items().length < 20) {
                            this.items.push({ TimeIn: "00:00", TimeOut: "00:00", Hours: "0", Project: "", Billable: "", Comments: "" });
                        }
                    };
                    this.removeItem = function () {
                        // remove the last item.
                        //this.items.pop();
                        var element = "#jqxgrid";
                        var cell = $(element).jqxGrid('getselectedcell');
                        if (cell != null && cell != "") {
                            var selectedrowindex = cell.rowindex;
                            var rowscount = $(element).jqxGrid('getdatainformation').rowscount;
                            if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                                var id = $(element).jqxGrid('getrowid', selectedrowindex);
                                try {
                                    this.items.splice(selectedrowindex, 1);
                                }
                                catch (e) {
                                }
                            }
                        }
                    };
                    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);
                        }
                    };
                };

                var model = new GridModel();

                //ko.applyBindings(model);
                // prepare the data
                var source =
                {
                    datatype: "observablearray",
                    updaterow: function (rowid, rowdata, commit) {
                        // synchronize with the server - send update command
                        // call commit with parameter true if the synchronization with the server is successful
                        // and with parameter false if the synchronization failder.

                        commit(true);
                    },
                    datafields: [
                        { name: 'TimeIn' },
                        { name: 'TimeOut' },
                        { name: 'Hours' },
                        { name: 'Title' },
                        { name: 'Billable' },
                        { name: 'Comments' },
                    ],
                    id: 'id',
                    localdata: model.items
                };
                var cellbeginedit = function (row, datafield, columntype, value) {
                    return false;
                }
                var cellsrenderer = function (row, column, value, defaultHtml) {
                    var element = $(defaultHtml);
                    element.css('color', '#999');
                    return element[0].outerHTML;

                }

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

                $("#jqxgrid").jqxGrid(
                {
                    width: '100%',
                    source: dataAdapter,
                    pageable: true,
                    editable: true,
                    autoheight: true,
                    theme: 'metrodark',
                    sortable: true,
                    altrows: true,
                    editmode: 'click',
                    columns: [
                
                      { text: 'Hours', datafield: 'Hours', width: '12%', cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer },
                      { text: 'Project', datafield: 'Title', width: '24%' },
                      {
                          text: 'Billable', datafield: 'Billable', width: '10%', columntype: 'dropdownlist',
                          createeditor: function (row, column, editor) {
                              // assign a new data source to the dropdownlist.
                              var list = ['Yes', 'No'];
                              editor.jqxDropDownList({ displayMember: 'label', valueMember: 'value', source: billable.fields });
                          }
                      },
                      { text: 'Comments', datafield: 'Comments', width: '26%' }
                    ]
                });
                ko.applyBindings(model);
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid"></div>
   
</body>
</html>

[kkochharParticipant]

Hello Peter,

Thanks for sending this I m still getting this error: Object [object Number] has no method ‘replace’

Just trying to understand from your supplied code what difference it has?
1) document.ready called twice? Reason for this?
2) in the success function of ajax call not setting the the data.d.results to me.items? How will me know about items then?

Please clarify and see if it makes sense on why I am still getting above error.

Thanks a lot for helping me out on this.

Kunal

[Peter StoevKeymaster]

Hi Kunal,

1. One of the document.ready calls could be removed. It does not matter.
2. I don’t set items due to the reason that I don’t know your URL. So actually, there is no Ajax call in this code. I do not know why you get an error with that code. I suggest you to check whether you use jQWidgets 3.2.1 and I also suggest you to try the sample which I posted.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kkochharParticipant]

Thanks Peter,

I copied your code and still the same error. My suspicion is MicrosoftAjax.js is intervening with knocout or jqwidget.

On a side note, I am running this code withing a SharePoint environment, not sure if SharePoint is playing up with requests.

As soon as I click on the drop down it throws that error. Below is the whole stack of that error:

Uncaught TypeError: Object [object Number] has no method 'replace' MicrosoftAjax.js:5
String.trim MicrosoftAjax.js:5
(anonymous function) jquery-1.10.2.min.js:4
c VM638:7
a.extend.databind VM638:7
a.extend.refresh VM638:7
a.extend.propertyChangedHandler VM638:7
a.jqx.setvalueraiseevent VM633:7
(anonymous function) VM633:7
x.extend.each jquery-1.10.2.min.js:4
a.jqx.set VM633:7
a.jqx.jqxWidgetProxy VM633:7
(anonymous function) VM633:7
x.extend.each jquery-1.10.2.min.js:4
x.fn.x.each jquery-1.10.2.min.js:4
a.fn.(anonymous function) VM633:7
a.extend.propertyChangedHandler VM639:7
a.jqx.setvalueraiseevent VM633:7
(anonymous function) VM633:7
x.extend.each jquery-1.10.2.min.js:4
a.jqx.set VM633:7
a.jqx.jqxWidgetProxy VM633:7
(anonymous function) VM633:7
x.extend.each jquery-1.10.2.min.js:4
x.fn.x.each jquery-1.10.2.min.js:4
a.fn.(anonymous function) VM633:7
$.jqxGrid.columns.createeditor VM651:130
a.extend._showcelleditor VM647:7
b.extend._rendercell VM640:7
b.extend._rendervisualcell VM640:7
b.extend._rendervisualrows VM640:7
q VM640:7
b.extend._renderrows VM640:7
a.extend.begincelledit VM647:7
b.extend._handlemousedown VM640:7
(anonymous function) VM640:7
x.event.dispatch jquery-1.10.2.min.js:5
v.handle

[Peter StoevKeymaster]

Hi Kunal,

Do you use the same DOCType as in my sample? Yes, it is possible to be coming from your environment. I don’t know how this file MicrosoftAjax.js is related.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts