Working with kendo widget in Grid Edit event

[Christopher]

Hello. I am trying to work with a ForeignKey DropDownList in the Edit event and at the time the Edit event fires, the kendoDropDownList has not been created yet. Is there an event that I can work with after Edit to modify Kendo widgets that are created at that time?

Background - I want to disable the dropdownlist if another property is false. This works fine responding to that field change because the dropdownlist is already created.

Relevant simplified snippets:

C#

events.Edit("onEdit");

 columns.ForeignKey(b => b.MyProperty, (System.Collections.IEnumerable) ViewData["MyData"], "Option", "Option")

 

JS

function onEdit() {
  dropDownElement = $("#MyProperty"); //good
  var dropDown = dropDownElement.data("kendoDropDownList"); //undefined
  dropDown.enable(false);
}

[Dimiter Topalov]

Hello Christopher,

If the Grid is configured for the default "Incell" editing mode, the DropDownList that will be used for editing the Foreign Key column is not initialized when other cells are being edited.

To achieve the desired behavior, you can handle the Edit event (like you have done), and conditionally disable the DropDownList only when the respective cell, containing the DropDownList is being edited, and some other custom condition is met, e.g. (based on the Foreign Key column demo):

<script type="text/javascript">
    function onEdit(e) {
        if (e.container.find('#CategoryID').length && e.model.UnitPrice < 20) {
            var ddl = $('#CategoryID').data('kendoDropDownList');
            // or
            // var ddl = e.container.find('[data-role="dropdownlist"]').data('kendoDropDownList');
            ddl.enable(false);
        }

    }
</script>

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

[Christopher]

Thanks for the reply and apologies for posting this topic in the Kendo forum instead of the MVC forum.

Is there a comparable workaround for InLine edit mode?

[Dimiter Topalov]

Hello Christopher,

In this case the solution is even more straightforward - the e.container element in the edit event handler is now the whole row, so checking whether it contains the DropDownList is unnecessary:

<script type="text/javascript">
    function onEdit(e) {
        if (e.model.UnitPrice < 20) {
            var ddl = $('#CategoryID').data('kendoDropDownList');
            // or
            // var ddl = e.container.find('[data-role="dropdownlist"]').data('kendoDropDownList');
            ddl.enable(false);
        }

    }
</script>

Here is a short video demonstrating the described approach in action:

https://www.screencast.com/t/6ikSOqMwhe4z

Regards,
Dimiter Topalov
Telerik by Progress

[Christopher]

I would think it's that straightforward - but the problem lies in the .data('kendoDropDownList') resulting in undefined at the onEdit event. Afterward (in response to another element's event), it is defined.  Is onEdit before binding? Has this behavior been changed?

The EditorTemplate definition is 

@using Kendo.Mvc.UI
@model object
@(
 Html.Kendo().DropDownListFor(m => m)
 .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
 .OptionLabel("Select")
 .ValuePrimitive(true)
)

 

Thanks again Dimiter.

[Christopher]

I confirmed by subscribing to the template dropdownlist ondatabound event that it's happening after the grid onEdit event. I can do what I want there, but it's a bit hacky.

[Boyan Dimitrov]

Hello,

In order to avoid any misunderstanding I attached a sample project to show that the edit event event of the grid should be fired after the DataBound event of the DropDownList. Also the console.log function indicates that the Kendo UI DropDownList widget exists in the edit event handler.  

Regards,
Boyan Dimitrov
Telerik by Progress