This is a migrated thread and some comments may be shown as answers.

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

7 Answers 482 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Galen Giebler
Top achievements
Rank 1
Galen Giebler asked on 23 Jun 2013, 11:41 PM
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>

7 Answers, 1 is accepted

Sort by
0
Accepted
Galen Giebler
Top achievements
Rank 1
answered on 25 Jun 2013, 12:38 AM
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.}
:
0
Daniel
Telerik team
answered on 26 Jun 2013, 08:24 AM
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!
0
Galen Giebler
Top achievements
Rank 1
answered on 28 Jun 2013, 06:09 PM
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!
0
Galen Giebler
Top achievements
Rank 1
answered on 28 Jun 2013, 07:58 PM
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
0
jasonxz
Top achievements
Rank 1
answered on 28 Jun 2013, 08:31 PM
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.
0
Galen Giebler
Top achievements
Rank 1
answered on 30 Jun 2013, 11:40 PM
Yup...
See my follow-up to my OP..
It seems to work, but may not be the most efficient.
:^)
Galen
0
Daniel
Telerik team
answered on 03 Jul 2013, 05:13 PM
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!
Tags
Grid
Asked by
Galen Giebler
Top achievements
Rank 1
Answers by
Galen Giebler
Top achievements
Rank 1
Daniel
Telerik team
jasonxz
Top achievements
Rank 1
Share this question
or