Kendo Grid tabbing and drop down column issue

[Sentil]

Hi,

I were trying the following things in the kendo grid and facing some issues,

1. Grid Tabbing

       Tabbing is working when there is no calculations are done on text changes. For example, if there are two fixed rows and first row is editable. If we change the data in the first row that should do a calculation and get updated in the second row. So for that purpose I use onCellChange event and i do the following in that

var grid = $('#gridtest').data("kendoGrid");
            var Row0 = grid.dataSource.data()[0];
            var Row1 = grid.dataSource.data()[1];

Row1.set("Total",Math.round(Row0.get("Total")*100)); 

These statement works and sets the value to the cell, but it is not visible until I focus  to the cell. To rectify this problem i used

grid.refresh();

This solves the issue, but it raises an another problem that i am unable to navigate to the next cell when i press tab. Due to this refresh the focus goes to first column. I need a solution for either to navigate to next cell when using grid.refresh() in oncellchange event or to display the cell when the value is set using model.


2. Dropdown Column

I have a dropdown column in the same grid where the model for that column has integer and i am unable to show the name in the cell instead of value.


I have attached a sample project with this and i have removed the packages folder in the attached project due to huge size, so please help me in this issue.

Thanks
Senthil

[Daniel]

Hello,

The cell will not be updated because the Grid will not redraw all rows while it is in edit mode. You could either find the cell and set its new content or set the focus after refreshing the Grid to the needed cell with the Grid current method.
The name is not displayed in the cell because a ClientTemplate is used for the column. You should match the value with the text in the template when a custom template is used e.g.

columns.ForeignKey(f => f.CardID, (System.Collections.IEnumerable)ViewData["CardType"], "CardID", "CardName").ClientTemplate("#:foreignValues[CardID] ? foreignValues[CardID] : ''#<input type='hidden' name='SampleModel[#= Create(data)#].CardID' value='#= CardID #' />")

var foreignValues = {};
$(function () {
    var grid = $("#SampleModel").data("kendoGrid");
    var values;
    for (var i = 0; i < grid.columns.length; i++) {
        if (grid.columns[i].field == "CardID") {
            values = grid.columns[i].values;
            break;
        }
    }
    for (var i = 0; i < values.length; i++) {
        foreignValues[values[i].value] = values[i].text;
    }
});

Regards,
Daniel
Telerik

[Sentil]

Hi Daniel,

Thanks for you reply. 

Drop down column issue has be solved. But grid tabbing issue still exists. Like if you see in my eg., i have set the value to the particular cell using
set statement like this 

             Row1.set("Total",Math.round(Row0.get("Total")*100)); 

But even then, only if i refreshed the gird or i manually focus to the cell  i am able to see the value which i set to the cell.

Actually there is a different scenario which works without grid refresh. That is if we set a value to the cell which is in same row, then it is visible without grid refresh.
But here the value is set to the cell which is in another row.

So please provide a solution to this issue.

Thanks
Senthil

[Daniel]

Hello again Senthi,

This is expected. As I mentioned in my previous reply only the row that is being edited will be redrawn. You should use one of the approaches described in my previous reply(update the cell content via JavaScript or set the focus after refreshing the Grid) in order to immediately update the cell. For the case that you previously described it should be possible to use the code in the snippet below to update the cell:

var grid = $('#gridtest').data("kendoGrid");
            var Row0 = grid.dataSource.data()[0];
            var Row1 = grid.dataSource.data()[1];

Row1.set("Total",Math.round(Row0.get("Total")*100));
grid.tbody.find(">tr[data-uid='" + Row1.uid + "'] td:eq(" + TotalColumnIndex + ")").text(Row1.Total);

Regards,
Daniel
Telerik

[Tiago]

grid.tbody.find(">tr[data-uid='" + Row1.uid + "'] td:eq(" + TotalColumnIndex + ")").text(Row1.Total);


Based on the example above, how do I change the totalizer value footer of my column ?

[Daniel]

Hello,

You can use code similar to the one in the snippet below to find the footer cell for the column:

grid.footer.find(".k-footer-template").children().eq(index);

Regards,
Daniel
Telerik

 

 

[Tiago]

Ok, Thanks.