DropDownList FK column requires 2 clicks

6 posts, 1 answers
  1. Austen
    Austen avatar
    9 posts
    Member since:
    Aug 2018

    Posted 28 Nov 2018 Link to this post

    Hello all,

    I have a dynamic Kendo grid that can perform CRUD operations. Foreign Keys are retrieved and mapped to their value and placed in the grid as a drop down list, seen in this example here:uhhh https://demos.telerik.com/kendo-ui/grid/foreignkeycolumn My grid is in Multiple selection mode with the Cell selection type.

    The issue I am running into is that modifying that column requires 2 clicks to open the dropdown. All other fields require only one click and the user can start typing new values. You can see this behavior in the example I linked earlier. I believe the issue mainly comes from the dropdown being contained within the grid's cell.

    Another issue caused by this behavior is when selecting and attempting to edit multiple cells. The double-click of the dropdown causes all other cells to lose their selection. 

     

    Is there a way for a dropdownlist to be opened with one click when it is contained inside a grid? 

  2. Answer
    Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1209 posts

    Posted 30 Nov 2018 Link to this post

    Hello Austen,

    Yes, you could force the DropDownList editor to instantly open upon cell click. To do that you should handle the edit event of the Grid widget:
    edit: function(e) {
      var container = e.container;
      var categoryIdElement = container.find('[data-for="CategoryID"]');
     
      if (categoryIdElement.length > 0) {
        var dropDownList = container.find('.k-dropdown select').getKendoDropDownList();
     
        dropDownList.open();
      }
    }

    Here you will find a small sample implementing such scenario.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Austen
    Austen avatar
    9 posts
    Member since:
    Aug 2018

    Posted 30 Nov 2018 Link to this post

    Hello Veselin,

    Thank you for the reply! With a slight modification I was able to get that working. For others using a dynamic grid and can't identify a specific field this is what I used.

    function onEdit(e) {
        var container = e.container;
        var dropDownList = container.find("[data-role=dropdownlist]").data("kendoDropDownList");
        if (dropDownList) dropDownList.open();
    }
  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1209 posts

    Posted 03 Dec 2018 Link to this post

    Hi Austen,

    Thank you for the shared approach, which allows much greater flexibility. The suggested will definitely be of use to other developers too.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Adam
    Adam avatar
    1 posts
    Member since:
    Feb 2020

    Posted 07 Feb Link to this post

    Hello,

    Is this possible to add event for edit on Mvc Grid ?
    Im trying to enable one click activation for dropdown list on the grid, but I'm stuck on adding event for editing

  6. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1209 posts

    Posted 11 Feb Link to this post

    Hi Adam,

    Here is how you could attached and handle the MVC Grid edit event:

    https://docs.telerik.com/aspnet-mvc/api//Kendo.Mvc.UI.Fluent/GridEventBuilder#editsystemstring

    and:

    function gridEdit(e) {
        // Implement your logic here
      }

    In case you have any further questions that are not directly related to the topic of the current thread (DropDownList foreign key column), I would recommend you to open a separate thread for each of them.

    Regards,
    Veselin Tsvetanov
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top