jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Error on 'addrow' method of jqGrid
Tagged: gridview add new row
This topic contains 6 replies, has 2 voices, and was last updated by filipe.miranda 11 years, 11 months ago.
-
Author
-
I’m facing an error on add a new row on a jqGrid.
In fact, it works on first time. Then, I save every new edition the user makes on this new row.
But if after that I try to add a new row, I get the following error:
Uncaught TypeError: Cannot read property 'value' of undefined jqx-all.jsb.jqx.dataview.loadflatrecords jqx-all.jsb.jqx.dataview.updateview jqx-all.jsb.jqx.dataview.reload jqx-all.jsb.jqx.dataview.refresh jqx-all.jsb.jqx.dataview.addrow jqx-all.jsb.extend.addrow.g jqx-all.jsb.extend.addrow jqx-all.jsa.jqx.invoke jqx-all.jsa.jqx.jqxWidgetProxy jqx-all.jsa.jqx.jqxWidget.a.fn.(anonymous function) jqx-all.jsjQuery.extend.each jquery-1.9.1.jsjQuery.fn.jQuery.each jquery-1.9.1.jsa.jqx.jqxWidget.a.fn.(anonymous function) jqx-all.js$.jqxGrid.rendertoolbar resources.jsjQuery.event.dispatch jquery-1.9.1.jsjQuery.event.add.elemData.handle
Someone have a clue on how to solve this?
Thank you,
FilipeHi,
The provided information is not sufficient for testing your scenario. I also suggest you to use the latest 2.9.3 version unless you already use it. If you still reproduce the issue after upgrading to the latest version, then please provide a sample which demonstrates such behavior.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/I saw that the error occurs when the sort option is on. Turning off sorting, it works fine. Is there some problem relating the add of new rows and sort operation?
Hi,
We cannot reproduce such behavior with the current version with or without sorting. In case you experience an issue and want to report it, then please provide a sample which demonstrates it.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comOk, so I will try to explain my environment.
I have this source configuration. Here I have my updaterow function declared:
var sourceConfiguration = { datatype: "json", datafields: datafields, url: '/api/Resources/', root: 'Records', beforeprocessing: function (data) { // Used by the pagination to know the total number fo records. sourceConfiguration.totalrecords = data.TotalRecords }, sort: function () { // update the grid and send a request to the server. $("#resources-grid").jqxGrid('updatebounddata', 'sort'); }, updaterow: function (rowid, rowdata, commit) { if (fieldBeenEdited && fieldBeenEdited !== 'ResourceType' && fieldBeenEdited !== 'ResourceKey') { var data = { resourceType: rowdata['ResourceType'], resourceKey: rowdata['ResourceKey'], cultureCode: fieldBeenEdited, resourceValue: rowdata[fieldBeenEdited], id: rowdata[fieldBeenEdited + '_id'] || '' }; $.ajax({ dataType: 'json', url: '/api/Resources', data: data, type: 'PUT', success: function (data) { commit(true); var fieldID = fieldBeenEdited + '_id'; fieldBeenEdited = ''; $("#resources-grid").jqxGrid('setcellvaluebyid', rowdata['uid'], fieldID, data); }, error: function () { // cancel changes. commit(false); } }); } else { commit(true); } } };
As you can see, there is a fieldBeenEdited variable that stores the field been edited, so I don’t need to send all the row to the server, but only the value changed. I get this value on cellendedit event:
$('#resources-grid').on('cellendedit', function (event) { fieldBeenEdited = args.datafield; });
And here is the jqGrid initialization code:
$('#resources-grid').jqxGrid({ source: dataAdapterConfiguration, width: '100%', columnsresize: true, columnsreorder: true, editable: true, pageable: true, //sortable: true, showsortcolumnbackground: true, columns: columns, autoheight: true, // Those two options are needed to make server side pagination. virtualmode: true, rendergridrows: function (obj) { return obj.data; }, showtoolbar: true, rendertoolbar: function (toolbar) { var addButton = $('<button class="btn"><i class="icon-plus"></i> ' + Globalize.localize('[Resources.Admin.AddNewResource.Value]') + '</button>'); toolbar.append(addButton); addButton.click(function () { if ($("#cultures-listbox").jqxListBox('getCheckedItems').length !== 0) { $('#resources-grid').jqxGrid('addrow', null, {}); } else { alert('[ChooseOneLanguage]'); } }); }, ready: function () { _(availableCultures).each(function (culture) { $('#resources-grid').jqxGrid('hidecolumn', culture); $('#resources-grid').jqxGrid('hidecolumn', culture + '_id'); }); } });
I also have two checkboxes list that controls wich columns are displayed each time. So, this is the basic scenario. Cutting off the sorting function, that works. One thing that I noticed is that when I add a new row when sort is on, it is pushed at the end of the grid, but after the first edit, the row moves to the top of the grid. I don’t know if this is causing the unexpected behavior, but when the sort is off, the new row stays at the bottom.
Hope this can give some clue of the problem I’m facing.
Thank you for the help.
Hi,
The problem is that you try to add a non-virtual row to a Grid that is with “virtualmode” = true which means that the rendering should be handled by the developer – the Grid will display the information returned by the “rendergridrows” callback function. According to me, when you want to add a new row in virtual mode, you should make request to your server and return an increased value of the “TotalRecords” variable. That is the same as you do for “sorting” in virtual mode, make a server request when the sort order is changed.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHello,
what I had made is just implement the addrow callback and then increase by one the totalrecords value on the datasource, but it still doesn’t work. Is there something different that I need to make to add an empty row in virtual mode?
Thanks again,
Filipe -
AuthorPosts
You must be logged in to reply to this topic.