Working with kendo widget in Grid Edit event

7 posts, 0 answers
  1. Christopher
    Christopher avatar
    8 posts
    Member since:
    Apr 2011

    Posted 26 Apr 2017 Link to this post

    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!

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1266 posts

    Posted 27 Apr 2017 Link to this post

    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.
  3. Christopher
    Christopher avatar
    8 posts
    Member since:
    Apr 2011

    Posted 01 May 2017 in reply to Dimiter Topalov Link to this post

    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?

  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1266 posts

    Posted 03 May 2017 Link to this post

    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.
  5. Christopher
    Christopher avatar
    8 posts
    Member since:
    Apr 2011

    Posted 03 May 2017 Link to this post

    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.

  6. Christopher
    Christopher avatar
    8 posts
    Member since:
    Apr 2011

    Posted 03 May 2017 in reply to Christopher Link to this post

    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.
  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 05 May 2017 Link to this post

    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.
Back to Top