Kendo Grid tabbing and drop down column issue

7 posts, 0 answers
  1. Sentil
    Sentil avatar
    23 posts
    Member since:
    Jul 2011

    Posted 20 Aug 2013 Link to this post

    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

  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 22 Aug 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Sentil
    Sentil avatar
    23 posts
    Member since:
    Jul 2011

    Posted 04 Sep 2013 Link to this post

    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
  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 05 Sep 2013 Link to this post

    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!
  6. Tiago
    Tiago avatar
    7 posts
    Member since:
    Oct 2012

    Posted 16 Oct 2014 in reply to Daniel Link to this post

    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 ?
  7. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 20 Oct 2014 Link to this post

    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.

     
  8. Tiago
    Tiago avatar
    7 posts
    Member since:
    Oct 2012

    Posted 20 Oct 2014 in reply to Daniel Link to this post

    Ok, Thanks.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready