Not able to change the editable state of a Kendo Grid column.

8 posts, 1 answers
  1. Galen Giebler
    Galen Giebler avatar
    13 posts
    Member since:
    Nov 2004

    Posted 23 Jun 2013 Link to this post

    I have tried numerous solutions I have found googling this, but was unable to find anything that worked for me.
    Basically, I have a grid that uses inline editing (with a few foreign key columns), and I need to set some fields as editable based on the value in another field. I have attached a screen print of the grid..
    I would like the last column to always be editable, but the other columns should only be editable when the last column is not = 'LOGGED'.

    The following is the definition of my partial view that contains the grid - using jQuery dialog to display as popup  ..
    01.<div id="editLocalEventModal" title="Edit Local Vessel" style="overflow: scroll; display: none;">
    02.    <form method="post" id="formEditLocalVessel">
    03. 
    04.        <div style='text-align: center; background: gray; color: #ffffff; font-size: 15px; height: 22px; width: 100%;'>General Event Information</div>
    05.        <div style='margin: 5px 5px 0px 5px'>
    06.            <label for='vesselNum'>Vessel #: </label>
    07.            <input id='vesselNum' style='width:60px' type='text' disabled value='@ViewBag.VesselNum' />  
    08.            <label for='vesselName'>Vessel Name: </label>
    09.            <input id='vesselName' style='width:350px' type='text' disabled value='@ViewBag.VesselName' />  
    10.            <input type='checkbox' id='AgentCalled' @ViewBag.AgentCalled/><label for='AgentCalled'>Agent Called</label>  
    11.            <input type='checkbox' id='Quarantine' @ViewBag.Quarantine/><label for='Quarantine'>Quarantine</label>  
    12.            <input type='checkbox' id='COTP' @ViewBag.COTP/><label for='COTP'>COTP</label>  
    13.            <input type='checkbox' id='Announce' @ViewBag.Announce/><label for='Announce'>Announce</label>
    14.        </div>
    15.        <br />
    16.        <div style='text-align: center; background: gray; color: #ffffff; font-size: 15px; height: 22px; width: 100%;'>Activity Details</div>
    17.        <div>
    18.            @(Html.Kendo().Grid((IEnumerable<Maris.Domain.VEGetAttrDetailForVEidLocal_Result>)ViewBag.Fields)
    19.                                                        .Name("editLocalEventDetail")
    20.                                                        .HtmlAttributes(new { style = "width:1100px; margin:0;" })
    21.                                                        .DataSource(dataSource => dataSource
    22.                                                                        .Ajax()
    23.                                                                        .Batch(true)
    24.                                                                        .ServerOperation(false)
    25.                                                                        .PageSize(200)
    26.                                                                        .Model(model => { model.Id(d => d.VEDDId);
    27.                                                                                         //model.Field(d => d.VEDADesc);
    28.                                                                                         model.Field(p => p.VEDDId).Editable(false);
    29.                                                                                         model.Field(p => p.PortID);
    30.                                                                                         model.Field(p => p.VEDDDate);
    31.                                                                                         model.Field(p => p.VEDDTime);
    32.                                                                                         model.Field(p => p.VEDDComment);
    33.                                                                                         model.Field(p => p.VEDStatusID);
    34.                                                                        })
    35.                                                                        //.Read(read => read.Action("EditingCustom_Read","EventSummary"))
    36.                                                                   )
    37.                                                        .ToolBar(toolBar =>
    38.                                                            {
    39.                                                                //toolBar.Save();
    40.                                                                toolBar.Create();
    41.                                                            })
    42.                                                        .Columns(columns =>
    43.                                                        {
    44.                                                            columns.ForeignKey(d => d.VEDAId, (System.Collections.IEnumerable)ViewData["AttrDropDown"], "VEDAId", "VEDADesc")
    45.                                                                   .Title("Attribute").Width(200);
    46.                                                            columns.ForeignKey(d => d.PortID, (System.Collections.IEnumerable)ViewData["PortsListsDropDown"], "PortId", "PortShortName").Title("Port").Width(80);
    47.                                                            columns.Bound(d => d.VEDDDate).Format("{0:MM/dd/yyyy}").Title("Date").Width(100).EditorTemplateName("Date");
    48.                                                            columns.Bound(d => d.VEDDTime).Format("{0:HH:mm}").Title("Time").Width(100).EditorTemplateName("Time");
    49.                                                            columns.Bound(d => d.VEDDComment).Title("Comments").Width(300);
    50.                                                            columns.ForeignKey(d => d.VEDStatusID, (System.Collections.IEnumerable)ViewData["StatusDropDown"], "VEDStatusID", "VEDStatusAbbr").Title("Status").Width(80);
    51.                                                        })
    52.                                                        .Scrollable(scr => scr.Height(400))//will be overriden in splitter layoutchange event.
    53.                                                        .Resizable(resize => resize.Columns(true))
    54.                                                        .Events(events => events.Edit("onEdit"))  // .Change("onChange")
    55.                                                        .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
    56.                                    )
    57.        </div>
    58.        <br />
    59.        <div style='text-align: center; background: gray; color: #ffffff; font-size: 15px; height: 22px; width: 100%;'>Comments</div>
    60.        <div>
    61.            <textarea id='txtComment' rows='3' style='width: 99.5%; border: 0'>@ViewBag.Comment</textarea>
    62.        </div>
    63.        <div style="text-align: center;">
    64.            <input type="button" id="btnUpdate" value="Save" />  <input type="button" id="btnClose" value="Close" />
    65.        </div>
    66.    </form>
    67.</div>
    68. 
    69.<script>
    70. 
    71.    function onEdit(arg) {
    72.        alert("hello");
    73.        // suggestions..
    74.    }
    75. 
    76. 
    77.</script>
  2. Answer
    Galen Giebler
    Galen Giebler avatar
    13 posts
    Member since:
    Nov 2004

    Posted 24 Jun 2013 Link to this post

    OK - I was making that way harder than I needed to - this is my initial attempt
    1.function onEdit(arg) {
    2.    var indexCell = arg.container.context.cellIndex;
    3.    if (indexCell != 6 && arg.model.VEDStatusID == 4) {
    4.        $("#editLocalEventDetail").data("kendoGrid").closeCell(arg.container)
    5.    }
    6.}
    :
  3. Daniel
    Admin
    Daniel avatar
    2219 posts

    Posted 26 Jun 2013 Link to this post

    Hello,

    Using the closeCell method should work but this way the editor will created and destroyed so I would suggest to stop the event instead:

    $(function () {
        var grid = $("#editLocalEventDetail").data("kendoGrid");
        grid.table.on("click", "tr > td", function (e) {
            if (grid.cellIndex(this) != 6 && grid.dataItem($(this).closest("tr")).VEDStatusID == 4) {           
                e.preventDefault();
                e.stopPropagation();           
            }               
        });
    });
    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Galen Giebler
    Galen Giebler avatar
    13 posts
    Member since:
    Nov 2004

    Posted 28 Jun 2013 Link to this post

    That definitely looks better.... Will give it a shot...
    Thanks!
      -- edit -- 
    Since my grid is navigable, I guess I will attempt the "focusin" event instead of "click"
    Thanks!
  5. Galen Giebler
    Galen Giebler avatar
    13 posts
    Member since:
    Nov 2004

    Posted 28 Jun 2013 Link to this post

    Shoot
    None of the focus events seem to work - the cell enters edit mode anyway.
    The click event works great, but if I hit the tab key, the next field from the one clicked goes into edit mode :(...

    Thanks for your help!
    Galen
  6. jasonxz
    jasonxz avatar
    17 posts
    Member since:
    Jul 2012

    Posted 28 Jun 2013 Link to this post

    Galen,

    Have you tried using the Grid's "edit" event instead?
    I don't know but it seems like that would cover both the click & focus.
  7. Galen Giebler
    Galen Giebler avatar
    13 posts
    Member since:
    Nov 2004

    Posted 30 Jun 2013 Link to this post

    Yup...
    See my follow-up to my OP..
    It seems to work, but may not be the most efficient.
    :^)
    Galen
  8. Daniel
    Admin
    Daniel avatar
    2219 posts

    Posted 03 Jul 2013 Link to this post

    Hello Galen,

    It is also possible to prevent the tab key although it is not sure which will be the more efficient approach in this case especially if the editor is simple. Basically you should bind to the table keydown event before the Grid(before document ready in a script tag that is after the Grid) and stop the immediate propagation when needed:

    $("#editLocalEventDetail > .k-grid-content > table").on("keydown", function (e) {
        if (e.keyCode == 9) {
            var grid = $("#editLocalEventDetail").data("kendoGrid"),
                currentCell = grid.current(),
                item = grid.dataItem(currentCell.closest("tr"));
     
            if (item.VEDStatusID == 4) {
                e.stopImmediatePropagation();
                e.preventDefault();
            }
        }
    });
    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top