Prevent Keyboard Navigation to cell in Batch-Edit Grid

8 posts, 1 answers
  1. Blake
    Blake avatar
    18 posts
    Member since:
    Sep 2015

    Posted 16 Oct 2015 Link to this post

    I have a batch edit grid in which my client would like to have keyboard navigation to tab between cells. The .Navigatable() method works great. Although, for certain cells given a certain condition, I need to have them be read-only. I am able to block the cell from being selected with the mouse onClick, but with Navigatable set to true, they are still able to tab into that cell. Based on my code below, is there a way to set the cell as Read-Only? Either with a Grid method or JavaScript?

    Grid Code

    @(Html.Kendo().Grid<Project.Models.MetricData>()
        .Name("grid") // template expression, to be evaluated in the master context
        .Columns(columns =>
        {
            columns.Bound(m => m.MetricLabel);
            columns.Bound(m => m.Numerator);
            columns.Bound(m => m.Denominator);
            columns.Bound(m => m.Rate);
        }).ToolBar(toolbar =>
        {
            toolbar.Save();
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Navigatable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .Model(model =>
                {
                    model.Id(m => m.MetricKey);
                    model.Field(m => m.MetricLabel).Editable(false);
                })
            .Read(read => read.Action("Binding_Metrics", "Controller"))
            .Update("UpdateMetric", "Controller")
        )
        .Events(events => { events.DataBound("DataBound"); })
    )

    JavaScript

    <script>
        function DataBound() {
            var grid = $("#grid").data("kendoGrid");
            var gridData = grid.dataSource.view();
     
            for (var i = 0; i < gridData.length; i++) {
                //get the item uid
                var currentUid = gridData[i].uid;
                //if the record fits the custom condition find the row based on the uid and add the custom class
                var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");
     
                var disableCell = $(currentRow).find(':nth-child(4)');
                $(disableCell).addClass("disabled"); //Greys out cell background
     
                $(disableCell).click(function (e) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    return false;
                });
            }
        }
    </script>

    I have tried to do something like this

    model.Field(m => m.Rate).Editable(@<text>function(){
                                    if(#=numFormat# == 1){return false;}
                                    else{return true;}
                              }</text>);

    But the method is unable to accept a lambda expression.

    Also I have tried using JavaScript to prevent this as well

    $(disableCell).focus(function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
    });

  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 20 Oct 2015 Link to this post

    Hello Blake,

    The simplest way of making a cell read-only is by setting the Model field's Editable option to false. Another approach you might try is using a Template column instead of a Bound one.
    None of the above however, will prevent the keyboard navigation from "focusing" the cell (although it won't put it in edit mode). Skipping over non-editable cells is not supported out of the box, but it could be achieved using a custom solution, as discussed here.

    Regards,
    Alexander Popov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Blake
    Blake avatar
    18 posts
    Member since:
    Sep 2015

    Posted 20 Oct 2015 in reply to Alexander Popov Link to this post

    Hi Alexander,

     Thank you for your response. I am completely fine with the cell being focused on, I am just unable to prevent it from getting put in edit mode. I will give converting the Bound column to a Template one a shot.

     Thanks,

    Blake

  5. Blake
    Blake avatar
    18 posts
    Member since:
    Sep 2015

    Posted 20 Oct 2015 in reply to Alexander Popov Link to this post

    Hi Alexander,

    I tried converting the data bound column to a template column, but I am still unable to get the keyboard navigation from going into edit mode on the cell. Is this possible to do dynamically on a row by row basis?

     Thanks,

    Blake

  6. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 22 Oct 2015 Link to this post

    Hi Blake,

    I assume that a Bound column was used, hence it was again put in edit mode. Also, I am not sure why setting the Editable option to false did not work for you. Here is a screencast illustrating both of the approaches I suggested.

    Regards,
    Alexander Popov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Blake
    Blake avatar
    18 posts
    Member since:
    Sep 2015

    Posted 22 Oct 2015 Link to this post

    Hi Alexander,

     Thank you for your response and patience. My problem is less that I can't get the column to be completely un-Editable and more that I am not able to do it on a row by row basis. For instance, if the row meets a certain criteria, I would like for that column to be editable, otherwise editable should be false. I am able to achieve this functionality on-Click, but not through keyboard navigation as this seems to be handled by the Telerik tools.

     Thanks for your help,

    Blake

  8. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 22 Oct 2015 Link to this post

    Hello,

    In that case I would suggest subscribing to the Grid's edit event . Once the event is triggered you can check if the e.model argument meets the conditions and if it does not - call the Grid's closeCell method.

    Regards,
    Alexander Popov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Blake
    Blake avatar
    18 posts
    Member since:
    Sep 2015

    Posted 26 Oct 2015 Link to this post

    Hi Alexander,

     Thank you for your suggestion, I combined your answer with the answer from the following forum answer to solve my problem.

    http://www.telerik.com/forums/skip-read-only-fields-when-using-keyboard-navigation-on-navigatable-grid-in-batch-edit-mode

    Thanks,

    Blake

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