This is a migrated thread and some comments may be shown as answers.
Cascading DropDownList In InCell Editable Grid Not Displaying Selected Value
1 Answer 26 Views
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 14 Aug 2018, 04:40 PM

I have an InCell editable (updating in BATCH) grid with several columns and 2 columns showing as dropdown lists.  the 2nd dropdown list is cascading from the first dropdown list.  I finally have the 2nd dropdown list working properly except that once I select the value and move to the next row in the grid, the selected value is disappearing.  I found an example from Telerik where this is working but for some reason, it's not working in my solution.  Here's my code:

 

ViewModel(s):

<p>public class ForeignKeyViewModel     {
        public IEnumerable<DefectGroupDropdownViewModel> DefectGroups { getset; }
        public IEnumerable<ScrapReasonDropdownViewModel> ScrapReasons { getset; }
    }</p><p></p><br><p>public class SingleScrapJobViewModel     {
        public string CoilId { getset; }
        [Display(Name="Activity Date")]
        [DisplayFormat(DataFormatString = "g")]
        public DateTime ActivityDate { getset; }
  
        [Display(Name = "Date Scrapped", Description = "Date coil was actually scrapped.")]
        [DisplayFormat(DataFormatString = "g")]
        public DateTime DateScrapped { getset; }
        public string LineTypeCode { getset; }
        public int LineTypeId { getset; }
         
        public int QuantityTypeId { getset; }
        [Required]
        public int TeamId { getset; }
        public decimal EntryWeight { getset; }
        public decimal EntryWidth { getset; }
  
        [UIHint("DefectGroupId")]
        [Required(ErrorMessage = "DefectGroupId is required")]
        public int DefectGroupId { getset; }
  
         
  
        [UIHint("ScrapReasonId")]
        [Required(ErrorMessage = "ScrapReasonId is required")]
        public int ScrapReasonId { getset; }
        public decimal AmountScrapped { getset; }
  
         
    }</p>

 

View:

@model ForeignKeyViewModel@{     ViewBag.Title = "Scrapped Coils";
     }<h2>Assign Scrap Reasons to Coils Scrapped on a Single Job</h2><br/><div class="container"><div class="row">         @(Html.Kendo().Grid<SingleScrapJobViewModel>()
              .Name("ScrappedCoilsGrid")
              .Columns(col =>               {
                  col.Bound(m => m.CoilId).Title("Coil Id");
                  col.Bound(m => m.LineTypeCode).Title("Process Code");
                  col.Bound(m => m.LineTypeId).Hidden(true);
                  col.Bound(m => m.EntryWeight).Title("Entry Weight");
                  col.Bound(m => m.AmountScrapped).Title("Amount Scrapped (Lbs)");
                  col.ForeignKey(k => k.DefectGroupId, Model.DefectGroups, "DefectGroupId", "DefectGroupName").Width(200).EditorTemplateName("DefectGroupId").Title("Category");
                  col.ForeignKey(k => k.ScrapReasonId, Model.ScrapReasons, "ScrapReasonId", "ScrapReasonName").Width(200).EditorTemplateName("ScrapReasonId").Title("Scrap Reason");
                   
              })
              .Editable(e=>e.Mode(GridEditMode.InCell))
  
              .ToolBar(toolbar =>               {
                  toolbar.Save();
              })
              .Sortable()
              .NoRecords("There are no records to show.")
              .Scrollable(scr => scr.Height(500))
              .DataSource(ds => ds
                  .Ajax()
                  .Batch(true)
                  .PageSize(30)
                  .Events(e => e.Change("onChange"))
                  .ServerOperation(true)
                  .Model(m =>                   {
                      m.Id(p => p.CoilId);
                      m.Field(f => f.CoilId).Editable(false);
                      m.Field(f => f.LineTypeCode).Editable(false);
                      //m.Field(f => f.DefectGroupId).DefaultValue(1);                       //m.Field(f => f.DefectGroup).DefaultValue(ViewData["DefaultDefectGroup"] as DropDownViewModel);                       //m.Field(f => f.ScrapReasonId);                       m.Field(f => f.EntryWeight).Editable(false);
                      //m.Field(f => f.AmountScrapped);                       m.Field(f => f.ActivityDate).Editable(false);
  
                      //m.Field(f => f.ScrapReason).DefaultValue(ViewData["DefaultScrapReason"] as DropDownViewModel);                   })
  
                  .Update(u=>u.Action("SaveSingleJobScrappedCoils", "ScrapAssignment"))
  
              ))     </div></div>

 

DefectGroupId EditorTemplate:

@model int@(Html.Kendo().DropDownListFor(m => m)
      .AutoBind(false)
      .OptionLabel("Select Category...")
      .DataTextField("DefectGroupName")
      .DataValueField("DefectGroupId")
      .DataSource(dataSource =>       {
          dataSource.Read(read => read.Action("GetDefectGroupsDropdownViewModelForGrid", "ScrapAssignment"))
              .ServerFiltering(true);
      })
      )@Html.ValidationMessageFor(m => m)

 

 

ScrapReasonId EditorTemplate:

@model int@(Html.Kendo().DropDownListFor(m => m)
      .AutoBind(false)
      .OptionLabel("Select Scrap Reason...")
      .DataTextField("ScrapReasonName")
      .DataValueField("ScrapReasonId")
      .DataSource(dataSource =>       {
          dataSource.Read(read => read.Action("GetScrapReasonsDropdownViewModelForGrid", "ScrapAssignment").Data("filterScrapReasons"))
              .ServerFiltering(true);
      })
      .CascadeFrom("DefectGroupId")
      )@Html.ValidationMessageFor(m => m)

 

 

Javascript in View:

function onChange(e) {
        if (e.action == "itemchange") {
            if (e.field == "DefectGroupId") {
                debugger;
                var model = e.items[0];
                model.set("ScrapReasonId", 0);
            }
  
        }
    }
  
    function filterScrapReasons() {
        var model = getCurrentEditedModel();
        return { defectGroupId: model.DefectGroupId };
    }
  
    function getCurrentEditedModel() {
        var grid = $("#ScrappedCoilsGrid").data("kendoGrid");
        var editRow = grid.tbody.find("tr:has(.k-edit-cell)");
        var selectedItem = grid.dataItem(editRow);
        debugger;
        return grid.dataItem(editRow);
    }

 

 

Been working on this for several days trying to get it to work.  Any ideas on how to get that 2nd dropdownlist to behave properly?

1 Answer, 1 is accepted

Sort by
0
Jason
Top achievements
Rank 1
answered on 14 Aug 2018, 07:58 PM
Found the issue.  The Model that was being passed into the View did not contain all values.  Once all values were passed in, the 2nd dropdown began behaving as expected.
Tags
Grid
Asked by
Jason
Top achievements
Rank 1
Answers by
Jason
Top achievements
Rank 1
Share this question
or