Prevent Keyboard Navigation to cell in Batch-Edit Grid

10 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
    1436 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. 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

  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,

    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

  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1436 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
  6. 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

  7. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1436 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
  8. 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

  9. Duke
    Duke avatar
    21 posts
    Member since:
    Dec 2016

    Posted 06 Mar in reply to Alexander Popov Link to this post

    Hi Alexander and Team Telerik,

    This line by Alexander was tremendously helpful, and it ended an multi-hour search to an answer to my challenge: "The simplest way of making a cell read-only is by setting the Model field's Editable option to false."

     

    My question is: where is this documented?  I keep thinking I'm missing something because I can't seem to locate on single site that details all the APIs, Events, etc for the Grid.

    I think I'm not searching correctly, but I need to know how I would have found something like this.

    Thanks.

  10. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1788 posts

    Posted 08 Mar Link to this post

    Hi Duke,

    The editable option can be specified for the schema.model. Please check out the sample below that illustrates the approach. In the article you can also find information regarding the Grid events, methods, etc.


    For the MVC wrapper the code would look similar to the following:


    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(p => p.ProductID);
            model.Field(p => p.UnitPrice).Editable(false);
        })
        ...
    )


    Furthermore, there is a new feature in the Grid that enables you to set a field as conditionally editable. Thus, whether a field can be edited would depend on a value from another field. This feature is documented below:



    Regards,
    Viktor Tachev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top