KendoUI Grid - dataItem.set() method is not working

[dipak]

Hi,

I have used kendo grid for display of data, but I am getting an issue in databound event of the grid in dataItem.set() method, here property is not getting set for each row of the grid.

function ondataBound(e){
    var items = grid.items();
    items.each(function (index) {
        var dataItem = grid.dataItem(this);
        if (dataItem) {
            if (dataItem["ActionTaken"] == "Add"){
                if (rowChanges[dataItem.id]) {
                    for (key in rowChanges[dataItem.id]) {
                        dataItem.set(key, rowChanges[dataItem.id][key]);
                    }
                }
            }
        }   
    }
}

Thanks in advance.
Dipak

 

[Stefan]

Hello, Dipak,

Thank you for the code.

I made an example using a similar approach and the set method is working as expected:

https://dojo.telerik.com/eWEruGuB

Could you please set a debugger just before the set method is called to ensure that all of the checks are successful and the values for "key" and "rowChanges[dataItem.id][key]" are as expected.

If the issue continues, please share an example with us, as the issue could be caused by part of the code which we are overlooking at this point.

Regards,
Stefan
Progress Telerik

[dipak]

Hi Stefan,

Thanks for you reply, I would like include with my posted question, when gridcopyrow() event is called to copy entire row, and insert the same copied row as a new row in the grid. Here databound() event is getting called and dataItem.set() method is getting executed, but property is not getting set for the copied row. Please suggest, how to resolve this issue.

function gridCopyRow(grid, row) {
var gridId = getGridId(grid);
var dataItem = grid.dataItem($(row));
grid.dataSource.insert(0, dataItem.toJSON());
var newrow = grid.tbody.find('tr:first');
grid.select(newrow);
var newDataItem = grid.dataItem(grid.select());
newDataItem.ActionTaken = "Add";
grid.editRow(newrow);
}

function ondataBound(e){
var items = grid.items();
items.each(function (index) {
var dataItem = grid.dataItem(this);
if (dataItem) {
if (dataItem["ActionTaken"] == "Add"){
if (rowChanges[dataItem.id]) {
for (key in rowChanges[dataItem.id]) {
dataItem.set(key, rowChanges[dataItem.id][key]);
}}}}}

@(Html.Kendo().Grid<Test.Model.School>()
.Name("grid_Test")
.Columns(columns =>
{
    foreach (System.Data.DataColumn column in Model.Columns)
    {
        switch (column.ColumnName)
        {
            case "Marks":
            var c = columns.Bound(column.ColumnName)
           .Title(column.Caption);
             break;

           default:
           c = columns.Bound(column.ColumnName)
           .Title(column.Caption);
            break;
       }
    }
})
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events
.Model(model =>
{
  model.Id(p => p.PRIMARY_KEY);
  foreach (System.Data.DataColumn column in Model.Columns)
   {
     var field = model.Field(column.ColumnName, column.DataType);
    }
})
.Events(events => events
.DataBound("onDataBound")
.BeforeEdit("onBeforeEdit")
.CellClose("onCellClose")
.Edit("onEdit")
)

 

Thanks,

Dipak

[Dmitry]

Hi,

I have an issue with dataItem.Set too.

The same code, what has worked on 2018.1.221 doesn't work with 2018.3.1017 anymore:

It looks like this:

            var cnt=0;
            grid.table.find(".chkSelect").each(function () {
                var dataItem = grid.dataItem($(this).closest('tr'));
                if (dataItem && dataItem.StudySiteId == dataRow.StudySiteId) {
                    ++cnt;
                    var checkedSelected = $(this).is(':checked');
                    if (checkedSelected != bulkCheck) {
                        dataItem.set(this.name, bulkCheck);
                        //dataItem.IsSelected=bulkCheck;
                        $(this).prop("checked", bulkCheck);
                    }
                }
            })

After the first call of dataItem.set(this.name, bulkCheck) in the loop
function grid.dataItem($(this).closest('tr')) returns null value.

I suppose, dataItem.set has a bug now and destroys something in the  dataSource model.

Now it's a question wheather I'll open support ticket (need more time for the simple test project) or there is a some workaround.

[BigzampanoXXl]

Hi,

I have exactly the same problem. dataItem.set() doesn't work with 2018.3.1017 anymore. I hope there will be a fix soon.

Best regards!

[Stefan]

Hello, Dipak,

Thank you for the additional code.

I added it to the example to utilize the row copy function, but the expected value is still set.

https://dojo.telerik.com/eWEruGuB/2

Please use the debugger to observe if there is the difference in the values of the real application and the Dojo example.

I do understand that sharing an example is not an easy task, but it can prove helpful in resolving complex issues like this one.

Regards,
Stefan
Progress Telerik

[Konstantin Dikov]

Hello Dmitry,

Could you please share a dojo example demonstrating the scenario that was working with the older version? The "set" method of the data items triggers the "change" event of the dataSource, which in most cases forces the Grid to render its data content again, but with different uid`s and respectfully, different TR elements. To update multiple records you will have to set the value directly, without using the "set" method and set its "dirty" property to true:

if (checkedSelected != bulkCheck) {
                       dataItem.IsSelected=bulkCheck;
                       dataItem.dirty = true;
                       $(this).prop("checked", bulkCheck);
}

Looking forward to your reply with the example that was working with the old version.


Regards,
Konstantin Dikov
Progress Telerik

[Dmitry]

Hello Konstantin,

I've alread opened a Ticket (Id 1348144) and got the answer, what in the 18'Q3 Version was corrected the old mistake: "change event doesn't fire in the grouped grid after dataItem.set()"

Angel Petrov has recomended to detache _refreshHandler temporary and attach after set() operation again.
I've tried your idea two years ago, but it didn't work (Update methode of the controller didn't get any datarow).

I'll try it again.