This is a migrated thread and some comments may be shown as answers.

Kendo Grid tabbing and drop down column issue

6 Answers 141 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Sentil
Top achievements
Rank 1
Sentil asked on 20 Aug 2013, 02:01 PM
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

6 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 22 Aug 2013, 03:12 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sentil
Top achievements
Rank 1
answered on 04 Sep 2013, 05:14 AM
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
0
Daniel
Telerik team
answered on 05 Sep 2013, 03:25 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tiago
Top achievements
Rank 2
answered on 16 Oct 2014, 01:02 PM
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 ?
0
Daniel
Telerik team
answered on 20 Oct 2014, 11:24 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Tiago
Top achievements
Rank 2
answered on 20 Oct 2014, 04:20 PM
Ok, Thanks.
Tags
AutoComplete
Asked by
Sentil
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Sentil
Top achievements
Rank 1
Tiago
Top achievements
Rank 2
Share this question
or