dynamic,jqgrid,options , How to make jqGrid dynamically populate options list based on row data

How to make jqGrid dynamically populate options list based on row data


Tag: dynamic,jqgrid,options

I am using jQrid version 3.8.1 with inline editing and each row in the grid has several dropdown lists to populate. When the user edits the row, I need to do an AJAX query to get the values for each of these lists. I've seen this post regarding how to do that. It appears that the dataUrl and buildSelect features are the standard answer here. There are a few issues I can't figure out though:

  1. The row the user is editing has a value that must be passed into the dataUrl value. For example, say each row contains a field called "SpecialValue" and that for row 1, SpecialValue = 100. The dataUrl field for row 1 would be "http://my.services.com?SpecialValue=100". How do I do that?

  2. Each row in the grid has about 10 select boxes that need to be populated. For efficiency reasons, I don't want to make 10 separate AJAX calls. It would be much better to make one call to get all the data, split it up, and fill each select box accordingly. Is that possible? I tried doing this inside onSelectRow but the grid ended up ignoring the values I put in there (I'm guessing do the ordering of the events that fire when you edit a row).


After reading Oleg's answers and working on it more, it's clear to me that using dataUrl and buildSelect are not going to work well for me. The version of jqGrid I'm using doesn't support using dataUrl the way I would need. And even if it did I don't want to send multiple separate requests for each dropdown list.

I've decided to do one request when gridComplete fires to pull all the data needed for all dropdown lists into a single JSON structure. Then when the user selects a row to do inline editing, I will populate each list in the row from that JSON structure (the code below uses the getSelectValuesFromJSON() function for that--I don't give its definition but you can imaging it looks through the structure and gets an appropriate list of values to but in the list box).

I have a few candidate solutions but I'm not 100% happy with either one.

Solution 1:

Inside onSelectRow, I call editRow overriding the on oneditfunc to get the data out of the grid that I need. Assume that the value in Field1 is required to get the values to be put into the list in Field2.

onSelectRow: function (index, status, e) {
    jQuery('#my_grid').jqGrid('editRow', index, true, function(rowId) {
        var f1Val = $('#my_grid').jqGrid('getCell', index, 'Field1');
        var selectVals = getSelectValuesFromJSON(f1Val); //gets data out of previously loaded JSON structure
        var select = $('#my_grid').find('tr[id="' + index + '"] td[aria-describedby="my_grid_Field2"] select');
        _.each(selectVals, function(selectVal) {
            $(select).append($("<option></option>").attr("value", selectVal).text(selectVal));

This works but I'm hesitant about the line

var select = $('#my_grid').find('tr[id="' + index + '"] td[aria-describedby="my_grid_Field2"] select');

which relies on this aria-describedby attribute that I don't know much about. Seems hacky and brittle.

Solution 2:

Make use of beforeSelectRow to dynamically change the model of the Field2 column when the user selects a row.

beforeSelectRow: function(index, e) {
    var f1Val = getGridCellValue('#my_grid', index, 'Field1');
    var values = getSelectValuesFromJSON(f1Val); //gets data out of previously loaded JSON structure
    var valStr = "";
    _.each(values, function(value) {
        valStr += value + ":" + value + ";"
    jQuery('#grid_pipes').setColProp('Field2', { editoptions: { value: valStr } });
    return true;

This also works but I'm not sure about whether or not this is really a good idea. Is it valid to dynamically change the model of a column like that? What if the user has several rows selected at the same time? Isn't there only one model for a column? What would that mean?

To answer some of Oleg's questions, the dataType has been set to a function that uses $.ajax to post data to the server. I think I read that's not the recommended approach anymore. I inherited this code so I'm not sure why it was done that way but it probably won't change unless there is a really compelling reason.

The loadonce boolean is not specified so I guess that means it defaults to false.

Here is an abbreviated version of the column model (nothing terribly out of the ordinary):

colModel: [
    { name: 'PK', index: 'PK', hidden: true, editable: true, sortable: true, search: true },
    { name: 'Field1', index: 'Field1', hidden: true, editable: true, sortable: true, search: true },
    { name: 'Field2', index: 'Field2', sortable: false, editable: true, search: false, edittype: "select", editoptions: {} },
    { name: 'Field3', index: 'Field3', sortable: false, editable: true, search: false, edittype: "select", editoptions: {} },


You don't wrote which version of jqGrid you use currently, but dataUrl can be defined as callback function with (rowid, value, name) parameters, which have to return the URL which you can build dynamically based on the information. The feature exist starting with v4.5.3 (see the line). You can use getCell, getRowData or getLocalRow inside of the callback to get the data from another columns of the row. Thus you can solve your first problem relatively easy.

You second question seems to me absolutely independent from the first one. It's better to separate such questions in different posts to allow the searching engine better to index the information and so to help other people to find it.

There are no simple way how to solve the second problem, but one can sure suggest a solution, but one have to know much more details what you do and how you do. How you start inline editing (do you use inlineNav, formatter: "actions" or you call editRow directly)? Which version of jqGrid (till version 4.7), free jqGrid or Guriddo jqGrid JS you use? How the columns with selects are defined in colModel? Which datatype you use and whether loadonce: true you use? I recommend you to post separate question with the information.

UPDATE: If you have to use old version of jqGrid then you can't generate dataUrl full dynamically, but because you need to add only SpecialValue=100" part to the URL you can follow the trick which I described in many my old answers (the first one was probably here, but the choice on property names which asked the user could be misunderstood). You can use ajaxSelectOptions.data which will define the data parameters of jQuery.ajax request. The problem only that you can define only one ajaxSelectOptions.data property. So you can add the following jqGrid option:

ajaxSelectOptions: {
    data: {
        SpecialValue: function () {
            var rowid = $myGrid.jqGrid("getGridParam", "selrow");
            return $myGrid.jqGrid("getCell", rowid, "SpecialValue");

($myGrid is something like $("#grid"))

UPDATED: You used unknown functions getSelectValuesFromJSON, getLookupValuesFromJSON in the updated part of your question. Both of there seems to use synchronous Ajax request which is not good. Moreover you set editoptions.value for only one Field2 instead of setting all selects.

onSelectRow: function (rowid) {
    var $myGrid = $(this);
        url: "someUrl",
        dataType: "json";
        data: {
            specialValue: $myGrid.jqGrid("getCell", rowid, "Field1")
        success: function (data) {
            // for example response data have format:
            // { "Field2": ["v1", "v2", ...], "Field3": ["v3", "v4", ...] }
            var filed, str;
            for (filed in data) {
                if (data.hasOwnProperty(filed)) {
                    str = $.map(data[filed], function (item) {
                                return item + ":" + item
                    $myGrid.jqGrid("setColProp", filed, {
                        editoptions: {
                            value: str
            $myGrid.jqGrid("editRow", rowid, true);

Nevertheless the "Solution 2" is more close to what I would recommend you. It's not really important whether to use onSelectRow or beforeSelectRow. You can make asynchronous Ajax request to the server which returns information for all select which you need. After you get the response from the server (inside of success callback) you can set editoptions.value for all selects and only then you can start editRow. In the way you will be sure that editing of the line will use row specific options in all select.

Some additional remarks. I recommend you to verify gridview: true option in the grid. Additionally I suspect that you fill the grid in not full correct way because you have hidden PK column and you use index instead of rowid as the first parameter of beforeSelectRow and onSelectRow. It's very important to understand that the current implementation of jqGrid always assign id attribute on every row (<tr> element) of the grid. So you have to provide id information in every item of input data. If you want to display the id information to the user (and so to have column in colModel with the primary key) then you should just include key: true property in the column definition. For example you can add key: true to the definition of PK column and so you will have rowid (or index in your case) with the same value like PK. It simplify many parts of code. For example jqGrid send id parameter in the editing request to the server. It's practical to have PK in the request. Moreover if you use repeatitems: false format of jsonReader the you can include id: "PK" in the jsonReader instead of having hidden PK column. It informs jqGrid to get rowid from PK. jqGrid will save PK in id attribute of <tr> and you will don't need to have additional <td style="display:none"> with the same information in the grid.

The last remark. I would strictly recommend you to update the retro version jqGrid 3.8.1 to some more recent version, for example to free jqGrid. Even if you would use no features (like Font Awesome for example) you will have performance advantages, and the look of modern web browsers will looks much better. You should understand the jqGrid 3.8.1 was tested with old (and slow jQuery 1.4.2). The version used with Internet Explorer 8 as the latest IE version (IE9 was published later in March 2011) and it's more oriented on IE6/IE7. The look in modern Chrome/Firefox/Safari can be bad. Is it what you want?


AngularJS : How to make dynamic field button only for last button?

In the dynamic input field is there any option to implement plusSign = true only for the last item ? (function() { var app = angular.module('managementApp', []); // var app = angular.module('managementApp', ['ngRoute']); app.controller('phonebookController', function($scope, $http) { $scope.dynamicField = function(buttonStatus, inputIndex) { if (!buttonStatus) { $scope.currentContact.contacts.push({ "phone": "" }); }...

Struts2 Jquery jqGrid beforeShowForm Example

I'm looking for a way to use the beforeShowForm event when opening the edit dialog on a struts2-jquery grid. I want to be able to add custom fields to the edit dialog. <sjg:grid altRows="false" id="gridtable" dataType="json" editurl="%{editurl}" filter="true" filterOptions="{stringResult:true}" gridModel="gridModel" height="600" href="%{remoteurl}" loadonce="true" navigator="true" navigatorAdd="%{editPermission}" navigatorAddOptions="{reloadAfterSubmit:true,addCaption:'Add Record'}" navigatorDelete="false" navigatorEdit="%{editPermission}"...

jqgrid paging on server side

I'm trying to add server side paging to my grid. In adittion, I have a filter by 'license', 'number' and 'group'. When I press the next page button the controller is called and I obtain the data but my grid is reload on page 1 and I cant view the...

Can I dynamically set the recipient of mailto: using only HTML and JavaScript depending on URL used to access the site?

I have 5 different websites that all use the same privacy html page but depending on which site they accessed it from I want the email to change dynamically. For example, lets say I access the privacy page from Site A and click the [email protected] to send an email I...

Extjs building form on metadata

I will build a FormPanel with ExtJs 4 configured by metadata received from server. The meta data (json array) looks like this: { "metaData": { [ { "allowBlank:": false, "fieldLabel:": "labelText1", "name:": "labelName1", "emptyText:": "null" }, { "allowBlank:": false, "fieldLabel:": "labelText1", "name:": "labelName1", "emptyText:": "null" } ] }, "success": true,...

Dynamic lambda wrapped with try catch

I want to filter an IEnumerable<ModuleItem> by an Where calls defined by the user (so the expression is given by a String object) So far I am able to create my filters with DynamicLinq with this code Expression<Func<ModuleItem, bool>> expr = System.Linq.Dynamic.DynamicExpression.ParseLambda<ModuleItem, bool>(value, null); The problem is that the overall...

Align an icon vertically in jqGrid pager

I have place a 24x24 png into the left pager of the jqgrid using the jquery code below. Also I'm applying vertical-align middle. $("#pager_left").append ( '<td><div><img alt="" id="imgprint" src="images/word24x24.png"/></div></td>'); $("#imgprint").css('vertical-align', 'middle'); The resulting html code captured from chrome developer tools is The computed pager_left size is 214x28 + 1px padding...

How can I rewrite this LINQ query with reflection

So I had written this LINQ query using reflection, and later found out it isn't supported. What would be the best way to get the same functionality from this code? List<Profile> profilesFromUUID = await MobileService.GetTable<Profile>().Where(p => typeof(Profile) .GetProperty(handler.Name + "UUID").GetValue(p) == obj.uuid).ToListAsync(); ...

Struts2 jqGrid Remove x On Individual Column Filters

I have a struts2-jquery jqGrid page that has a grid with column filters. Some of the columns are date formats, which I do not want to be visible, so I removed the input fields for that column filter using .hide(). $("#gs_fraudEndDt").hide(); However, I still have the small "x" next to...

How can I set a Button's type to “Button” (as opposed to the default “Submit”) in C#?

According to an answer here, I can prevent a button from submitting the form by setting its type value to "Button", like so in HTML: <button type="button">Cancel changes</button> ...but how can I do this in C#? I am creating my controls dynamically, something like this (pseudocode, as I'm away from...

Delete item “Object required” excel VBA

I understand what the problem is, but i don't have a clue on how to solve it... So what I am doing is that I click on a button (addSceneButton) in my worksheet("costing") and it is going to insert a copy of another sheet("Scene Template") just above of the...

Android : Creating GUI programmatically at run time in java

I have to create number of buttons and textbox, etc. depending upon a certain number. For ex: if the number = 5, I need to create 5 buttons, and if its value is 10, I need to create 10 buttons. To achieve such a functionality, the conventional xml GUI won't...

jqGrid not loading data.The grid is shown but data is not displayed in it

I wrote a code for jqGrid but I cant get the data into my jqGrid. $(document).ready(function () { jQuery("#jqgrid").jqGrid({ url:"/VendorDetailList.ashx", dataType: "json", data: "{}", height: 'auto', postData: { Entity: function () { return 'vendor'; } }, colNames: ['vendorrep_id','vendor_id','Name', 'Phone Number', 'Job Title', 'Email','Entity'], colModel: [{ name: 'vendorrep_id', index: 'vendorrep_id', key:...

How to alter dynamic/live element attributes - (replaceWith()) used

I am having a hard time wrapping my head around how to access and alter attributes of HTML content added in place of a placeholder element using replaceWith. Here is the scenario: Here is the HTML (kept in a php file) that replaces the '#null_item' element in the subsequent HTML...

Call WebMethod from jqGrid

I am learning jqGrid and following this link. However demo is build in Asp.Net MVC and I am trying it using Asp.Net WebForms. My debugger is not stepping in into WebMethod Here is my code $("#tblDemo").jqGrid( { url: 'Default.aspx/GetGridData', datatype: "json", mtype: 'GET', colNames: ['Id', 'First Name', 'Last Name'], colModel:...

Android : Unable to change width of dynamic button

I am trying to make dynamic buttons of fixed dimensions. I am able to alter the height but unable to change the width. The width of the button seems to MATCH_PARENT (it takes up whole screen width. If there are two buttons, each button width is half screen width and...

jqGrid - Add ms access like row navigation buttons

Are there any built in row navigation buttons in jqGrid which I can use? I tried looking on jqGrid Documentation and here on SO. Nothing seems to give me any solution even close. Example of what I want. EDIT The behaviour of these buttons would be like this. On pressing...

I am getting error in this code as “invalid indirection”

I am trying to dynamically allocate a contiguous block of memory, store some integer value and display it. #include<stdio.h> #include<conio.h> void main() { int i; int *ptr; ptr=(void *)malloc(sizeof(int)*5); //allocation of memory for(i=0;i<5;i++) { scanf("%d",&ptr[i]); } for(i=0;i<5;i++) { printf("%d",*ptr[i]); //error is found here`` } } } ...

jqGrid Add/Edit from navGrid not working

I've implemented a basic jqGrid table using jqGrid 4.5.2, I added 'add', 'edit', 'delete' buttons on navGrid. Using either 'add' or 'edit' buttons generates a modal where I add/edit values for a row. After clicking submit my controller is called successfully but no new row is added/edited inside the table....

Struts2 jqGrid DatePicker in Column Filter

I have a jsp running Struts2 jqGrid plugin. I have enabled the filter row at the top of the grid, one of the columns is a date column and I want to be able to change the textbox at the top of the column into a DatePicker. The id of...

How to deal with value of text input created dynamically?

Here's a link <form onsubmit="return false"></form> <label for="quantity">qantity</label> <select name="quantity"> <script> for (var i = 1; i < 81; i++) { document.write("<option value='"+i+"'>"+i+"</option>"); }; </script> </select> <button id="next">next</button> <form id="itemform" onsubmit="return false"></form> <script> $('#next').click(function(){ var quantity = ($('select[name=quantity]').val()); $('#itemform').html(""); for (var i = 0; i...

Method declared with dynamic input parameter and object as return type in fact returns dynamic

namespace ConsoleApplication1 { class Program { static void Main(string[] args) { var objectGetter = new ObjectGetter(); var obj = objectGetter.GetItem(); //Visual Studio shows that obj type is System.Object } } public class ObjectGetter { public object GetItem() { dynamic dObj = "123"; var obj = this.Convert(dObj);//Visual Studio shows that obj...

Set value for Spinner with custom Adapter in Android

I am developing a android application with spinner in a form. The spinner items and spinner values are different. I want to collect all the value from the from including spinner and set a rest api service to web back end. here is the response array. {"Status":true,"errorType":null,"countryList":[{"Code":"US","Name":"United States"},{"Code":"CA","Name":"Canada"},{"Code":"AU","Name":"Australia"},{"Code":"GB","Name":"United Kingdom"}]} I...

Oracle Apex dynamically enable/disable text field depending on LOV selected value

I am trying to enable/disable text field depending on LOV selected value but it works just on page load, and I want to do it dynamically on client side when the LOV selected value change. I tried with a dynamic action but it only fire on page load. Any help?...

jqGrid dynamically change search operator type on button click

This is my jqgrid Grid related code var lastsel2; var containsOrNot = 'contains'; jQuery(document).ready(function(){ jQuery("#list").jqGrid({ url: "{{ asset('/app_dev.php/_thrace-datagrid/data/item_lookup_management') }}", postData: { masterGridRowId: {{ VPK }} }, datatype: "json", mtype: 'POST', colNames: ['Item No', 'Description 1', 'Vendor Item No','Report Dec','Location','On Hand','Exp balance','Available now','Lead Time','Type', 'Vendor #', 'Status', 'Stocked', 'Product Line', 'Creator'],...

saving matlab file (.mat) with dynamic name

for m = 1:length(lst_region) out=cellfun(@(x) str2double(x(1:strfind(x,'_')-1)),lst_region(m)); str=[num2str(out(1)) '.mat']; save ( str ,distance); end Error using save Argument must contain a string. Line 3 I want to save files like '1.mat' '2.mat' etc.. but i have error can you please help me to fix it...

Dynamically access methods from scala object

In Scala, what's the best way to dynamically call an object and invoke a method using reflection? The method corresponding to the object is to be called but the object name is known dynamically. I was able to instantiate a scala class dynamically from this SO question however I need...

Trying to dynamically create divs that can also be closed

I'm trying to create a simple note taking application. Right now I am trying figure out how to dynamically create and delete DIV elements. I can create DIVs, but each time I add a new div it adds a "Close" "X" to each previous div. So my question is how...

At most k adjacent 1s (Maximum Value limited neighbors)

In my algorithms course, there's a question in the book that goes as follows: "You are given an array a[1..n] of positive numbers and an integer k. You have to produce an array b[1..n], such that: for each j, b[j] is either 1 or 0. Array b has adjacent 1s...

Angular range input value changing with seconds

I have an input that looks like this and it's hooked up to a controller that's increasing the value every second. If I set value to a number the page will reflect that when it loads but it won't reflect changes that are made dynamically. Do I have to use...

Validation of website on Jqgrid column

I am new with JqGrid and this is my JqGrid code. Now I want to make a website validation on column name "website". If any of you know the answer, kindly reply as soon as possible { name: 'website', index: 'website', search: false, editable: true } ...

Make dynamic links (with ?) return error 404 not found

Using .htaccess (are there any other solutions?) is there a way to make all dynamic links (links containing the sign ?) of a site return a 404 not found response header? For example: http://www.example.com/?bla_bla - will return 404 http://www.example.com/test/index.html?no_redirect=true - will return 404...

How to handle different event handlers with same parent?

The following program is actually not my project, but it makes it easier to understand what I want later in my real program. Here a .gif to see the current functionality: What I want? I want add a label total points. Which includes the points of the checkboxes and textboxes,...

AS3 Dynamic variable naming

Is dynamic variable naming like this possible in ActionScript 3? for (var xz=0;xz<10;xz++){ var this['name' + xz]:Number = xz; } ...

JQGrid - td title change on ok of popup box

I have editable row in jqgrid. On double click of textbox, it will open a popup box having textarea. On clicking OK of popup, i need textarea value back to jqgrid row cell, from where double click is called. Value of cell is inside title attribute of td. I tried...

JqPivot and data load by ajax

Can someone post a demo or a piece of code, to exemplify how to use jqpivot and loading data using ajax. Thank you. ...

Team Page With Dynamic Content - Need Help Using JQuery to Pull Image Content

I'm using the following HTML / CSS and JQuery in this example (http://codepen.io/jakestuts/pen/qIdkF/) to create a team page that when you click on the head shot of the team member, it displays the details about that person which includes a larger version of the headshot, title and bio. Right now,...

C# Delete Row with Dynamic Textbox/Button/Grid

I've tested some thinks with Dynamic Textboxes and Buttons, Adding Items to my Grid works very well, but if I want to Delete it there are some Bugs, sometimes 1 Row is empty and my Add Button disappears or my Program crashs. What did I wrong or what did I...

Responsive jqGrid with bootstrap classes to the column headers

I have the below simple jQGrid. All I need is responsive table with some columns hidden in mobile view using bootstrap helper classes such as hidden-xs var gridInfoJSON = JSON.parse($('#hdn-categorysummary').val()); var catGrid= jQuery("#categorysummary").jqGrid({ url: '/Category/GetCategories/', datatype: 'json', mtype: 'POST', colNames: ["Id", "Active", "Name", "Duration"], colModel: [ { name: 'Id', index:...

loading local data in jqgrid

I am trying to load local data in jqgrid , but its not getting loaded. Here is the fiddle $("#list").jqGrid({ datatype: "local", colNames: ["OrderID", "CustomerID"], colModel: [ { label: 'Order ID', name: 'OrderID', key: true, width: 75 }, { label: 'Customer ID', name: 'CustomerID', width: 150 }, ], viewrecords: true,...

Convert Apache VirtualHost to nginx Server Block for Dynamic Subdomains

I have a web app running on Apache where the virtual hosts file is configured to route requests to subdomains to specific folders. Rather than having to modify the host file every time a subdomain is created, this allows me to dynamically route URLs to the relevant folder (with a...

How to use Dynamic Variables?

Alright what did I do wrong? Found this on the web, tried it and got a type mismatch. Just trying to make my code more concise by having the variables define themselves, for e.g. Y(10), Y(11), Y(12), Y(13), or Y10 ... Y13, so I'll have 4 variables at the end...

get value from the dynamic create textbox

I am quite new in asp.net. I am wonder how can I get the value of the textbox that create dynamically from C#. this code is the way i create the textbox from page load event... for( int i =0; i<30; i++){ TextBox txt = new TextBox(); txt.Text = "ASDASDASD";...

javascript dynamic structure with array or object

Im trying to create a structure with Javascript as follows: var users = { user.id: { session.id1: session.id1, session.id2: session.id2, session.id3: session.id3 }, user.id2: { session.id1: session.id1, session.id2: session.id2, session.id3: session.id3 }, }; What i need: add new sessions and remove them, removing okay, but how should i define object...

Jqgrid inline edit for selectList hits server for each row

i have set , editoptions: { aysnc: true, dataUrl: 'ControllerName/MethodName?__SessionKey=' + sessionkey + "&Id=" + Id, buildSelect: buildSelectFromJson, style: "width: calc(100% - 65px);", dataEvents: [ { type: 'change', fn: function (e) {} } ] } in which buildSelectFromJson returns select list in html. Now dataurl hits server for each row...

Struts2 jqGrid Bind afterclickPgButtons to Edit Dialog

I have a struts2-jquery jqGrid page with a grid that uses the event dialog boxes. I'm trying to bind the event afterclickPgButtons to the edit dialog. I can bind events to the entire grid (gridTable), but I'm having issues binding the event to the dialog box. I want to modify...

Line: 5571 Error: Not enough storage is available to complete this operation

I am getting "Not enough storage is available to complete this operation." error while trying to add data (20K records) in jqGrid. This issue is occurring in IE 9. Code: //This line adds 20k records to the jqgrid $.when(GetDataBySelectedCode()) .done(function (ResultData) { if (ResultData!= null) {//able to get result here...

Uncaught TypeError: Cannot read property 'errcap' of undefined

I encountered the error "Uncaught TypeError: Cannot read property 'errcap' of undefined" in my chrome. On the firefox, i encountered this one: I'm using jqgrid 4.8.2. And here is my code: $("#Grid").jqGrid({ url: "/Templates/Dometic/Services/DometicGenral.svc/GetVehiclesByOemId", datatype: 'json', mtype: 'POST', height: 'auto', colNames: [ 'Edit', 'ID', 'Vehicle brand', 'Model Information', 'Created by',...

IDynamicMetaObjectProvider set property using literal name

I need to set DynamicObject property using string propertyName. I found the way to get property value using this answer, but when it comes to setValue I'm not quite sure how to rewrite the code in order to set the property. I receive runtime errors and not quite sure about...

jqgrid: Sorting not working after dynamically adding records

I have a jqgrid which initially gets populated with some records. User has the option to add more rows to the grid. But, after adding new rows, if user tries to sort the records, the result is inconsistent and some of the records are lost in the grid. Fiddler: https://jsfiddle.net/99x50s2s/68/...