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

Working with kendo widget in Grid Edit event

6 Answers 1022 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Christopher
Top achievements
Rank 1
Christopher asked on 26 Apr 2017, 10:13 PM

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);
}

 

Thanks for reading!

6 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 27 Apr 2017, 10:15 AM
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
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.
0
Christopher
Top achievements
Rank 1
answered on 01 May 2017, 10:11 PM

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?

0
Dimiter Topalov
Telerik team
answered on 03 May 2017, 12:36 PM
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
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.
0
Christopher
Top achievements
Rank 1
answered on 03 May 2017, 08:38 PM

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.

0
Christopher
Top achievements
Rank 1
answered on 03 May 2017, 09:01 PM
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.
0
Boyan Dimitrov
Telerik team
answered on 05 May 2017, 03:23 PM

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
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.
Tags
Grid
Asked by
Christopher
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Christopher
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or