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

[Galen Giebler]

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>

[Galen Giebler]

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.}

:

[Daniel]

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

[Galen Giebler]

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!

[Galen Giebler]

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

[jasonxz]

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.

[Galen Giebler]

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

[Daniel]

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