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

DropDownList in Grid custom popup editor doesn't open

3 Answers 223 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 03 Aug 2017, 01:05 PM

Hi, I'm trying to create a custom popup editor for my grid, however, the drop downs are not being populated or at least won't open at all.  I'm stumped.  The controller method does get hit and I see 3 values but the drop downs down open.  When I first click on them I see a quick activity indicator appear but that's it.

 

Popup editor code

@(Html.Kendo().DropDownList()
          .Name("PressureGroupNm")
          .DataTextField("PressureGroupNm")
          .DataValueField("PressureGroupNm")
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("GetPressureTypeGroups_ForDropDown", "Group");
              });
          })
          .HtmlAttributes(new { style = "width: 60%" })
        )
        @Html.ValidationMessageFor(model => model.PressureGroupNm)

 

Controller code

public ActionResult GetPressureTypeGroups_ForDropDown()
      {
 
           
          return Json(GetGroups(), JsonRequestBehavior.AllowGet);
           
      }
 
      private IEnumerable<PressureTypeGroup> GetGroups()
      {
           
          return db.PressureTypeGroups.Select(pg => new PressureTypeGroup
          {
              PressureGroupNm = pg.PressureGroupNm,
              PressureTypeGroupTblId = pg.PressureTypeGroupTblId
          });
      }

3 Answers, 1 is accepted

Sort by
0
Michael
Top achievements
Rank 1
answered on 03 Aug 2017, 01:28 PM

I had to change my controller code a bit because I wasn't actually getting data back.  Now I am, but still the dropdownlist won't open.  I inspected the element, and I noticed the unselectable attribute is set to on?  No idea why that would be.

 

Here's updated controller code.

public ActionResult GetPressureTypeGroups_ForDropDown()
        {
            IEnumerable<PressureTypeGroup> groups = GetGroups();
             
            return Json(groups, JsonRequestBehavior.AllowGet);
             
        }
 
        private IEnumerable<PressureTypeGroup> GetGroups()
        {
            return db.PressureTypeGroups.Where(pg => pg.EffThruDa == null);
        }
0
Michael
Top achievements
Rank 1
answered on 03 Aug 2017, 01:30 PM

Had to change controller code since I wasn't actually getting data.  Still the dropdownlist won't open.  I inspected element and noticed the unselectable attribute was set to on.  I have no idea why that is. 

Here's new controller code

public ActionResult GetPressureTypeGroups_ForDropDown()
        {
            IEnumerable<PressureTypeGroup> groups = GetGroups();
             
            return Json(groups, JsonRequestBehavior.AllowGet);
             
        }
 
        private IEnumerable<PressureTypeGroup> GetGroups()
        {
            return db.PressureTypeGroups.Where(pg => pg.EffThruDa == null);
        }
0
Stefan
Telerik team
answered on 07 Aug 2017, 06:23 AM
Hello Michael,

Thank you for the provided code.

The attribute unselectable on is expected, and should not affect the behaviour of the widget.

After inspecting the code the DropDown should be opened as expected.

When the Popedior is opened, please execute the following code in the console in order to check if the DropDown is correctly bound to the data:

$('PressureGroupNm').data("kendoDropDownList").dataSource.data()
//This will retrieve the current options of the DropDown
$('PressureGroupNm').data("kendoDropDownList").options

If the data is bound, but the issue still occurs, please check the following forum as it may contain helpful information for the scenario:

http://www.telerik.com/forums/grid-editing-popup-with-dropdownlist

If additional assistance is needed, please provide a runnable example and I will gladly assist.

Regards,
Stefan
Progress Telerik
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
Michael
Top achievements
Rank 1
Answers by
Michael
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or