DropDownList in ClientTemplate not initializing in Grid

[Jerry]

I have attached a screen shot of the view that is rendering. I want to display a dropDownList in the Service Provider column that is dependent on the value selected in the Profiled Status column. So, if Royal Expedite is selected in the Profile Status column I would display a drop down with one set of values, and if Royal Expedite was selected in Profile Status I would display a different drop down with it's own set of values, etc. The problem is when the view is rendered the DropDownList is not initializing in the Service Provider column. In its place is a blank text box. 

 

Here is the action method to render the view:

public ActionResult ScheduleRoyalLogistics(Guid trackingCode)
        {
            var transientFile = _uploadFileService.GetUploadFileByTrackingCode(trackingCode);
            var awaitingScheduleRelation = _dropShipFileRelationService.GetByDropShipTrackingCode(trackingCode);

            var dropShipRelation = awaitingScheduleRelation == null
                ? _dropShipFileRelationService.GetBySenderFileId(transientFile.FileId).ToList()
                : _dropShipFileRelationService.GetByOffsetFileId(awaitingScheduleRelation.OffsetFileId).ToList();

            var uploadFile = _uploadFileService.GetUploadFileByFileId(dropShipRelation.First().OffsetFileId) ??
                             _uploadFileService.GetUploadFileByFileId(dropShipRelation.First().SenderFileId);

            var dropShipTypes = new List<DropShipTypeDropDown>();
            foreach (var dropShipType in Enum.GetValues(typeof(DropShipTypeEnum)))
            {
                dropShipTypes.Add(new DropShipTypeDropDown()
                {
                    DropShipTypeId = (int) dropShipType,
                    DropShipTypeName = Enum.GetName(typeof(DropShipTypeEnum), (int) dropShipType)
                });
            } 
            ViewData["dropShipTypes"] = dropShipTypes;

            var consolidateProviders =
                _dropShipServiceProviderRepository.GetDropShipServiceProviderByDropShipType(
                    (int) (DropShipTypeEnum.RoyalConsolidate));

            var expediteProviders = _dropShipServiceProviderRepository.GetDropShipServiceProviderByDropShipType(
                    (int) (DropShipTypeEnum.RoyalExpedite));


            var consolidateProviderModel = new List<ScheduleProviderDropShipModel>();
            foreach (var provider in consolidateProviders)
            {
                consolidateProviderModel.Add(new ScheduleProviderDropShipModel()
                {
                    ScheduleProviderId = provider.DropShipServiceProviderId,
                    ScheduleProviderName = provider.DropShipServiceProviderName
                });
            } 
            ViewData["consolidateProviderModel"] = consolidateProviderModel;

            var expediteProviderModel = new List<ScheduleProviderDropShipModel>();
            foreach (var provider in expediteProviders)
            {
                consolidateProviderModel.Add(new ScheduleProviderDropShipModel()
                {
                    ScheduleProviderId = provider.DropShipServiceProviderId,
                    ScheduleProviderName = provider.DropShipServiceProviderName
                });
            } 
            ViewData["expediteProviderModel"] = expediteProviderModel;  

            var model = new ScheduleRoyalLogisticsModel
            {
                TrackingCode = trackingCode,
                JobId = _headerRepository.GetFileHeader(uploadFile.FileId).JobId,
                MailClass = uploadFile.MailClassName,
                MailType = uploadFile.ParcelTypeName
            };  


            return View("ScheduleRoyalLogistics", model);
        }

 

Here is the grid in the view:

<div id="view" class="k-content">

                @(Html.Kendo().Grid<DropShipDestinationSummaryModel>()
                      .Name("ScheduleRoyalLogisticsGrid")
                      .Columns(columns =>
                      {
                          columns.Bound(c => c.DropShipDestinationSummaryId).Hidden(true);
                          //columns.Bound(c => c.DropShipType)
                          //    .ClientTemplate("#= getScheduleStatusIcon(data) #")
                          //    .Title("Status")
                          //    .Filterable(false);
                          columns.Bound(c => c.DropShipType)
                              .EditorTemplateName("_DropShipType")
                              .ClientTemplate("#=DropShipType.DropShipTypeName#")
                              .Title("Profiled Status").Sortable(false).HtmlAttributes(new {@class = "purple-background"});
                          columns.Bound(c => c.EntryLevel)
                              .Title("Destination");
                          columns.Bound(c => c.ServiceProvider).ClientTemplate(
                              "#if(#=DropShipType.DropShipTypeId# == 1){#" +
                              (Html.Kendo().DropDownList()
                                .Name("ServiceProvider_#=DropShipDestinationSummaryId#")
                                .DataValueField("ScheduleProviderId")
                                .DataTextField("ScheduleProviderName")
                                .BindTo((IEnumerable) ViewData["consolidateProviderModel"]).ToClientTemplate()).ToHtmlString() +
                              "#} else if(#=DropShipType.DropShipTypeId# == 2)  {#" +
                              (Html.Kendo().DropDownList()
                                .Name("ServiceProvider_#=DropShipDestinationSummaryId#")
                                .DataValueField("ScheduleProviderId")
                                .DataTextField("ScheduleProviderName")
                                .BindTo((IEnumerable) ViewData["expediteProviderModel"]).ToClientTemplate()).ToHtmlString() +
                              "#} else {#" +
                              "<p>TEST</p>" +
                              "#}#");
                          columns.Bound(c => c.PostalFacility)
                              .Title("Destination Entry");
                          columns.Bound(c => c.PieceCount)
                              .Title("Piece Count");
                          columns.Bound(c => c.Weight)
                              .Title("Weight");
                          columns.Bound(c => c.Cost).Format("{0:c2}")
                              .Title("Cost");
                          columns.Bound(c => c.PalletCount)
                              .Title("Pallet Count").HtmlAttributes(new {@class = "purple-background"});
                          columns.Bound(c => c.ScheduledPickup)
                              .Format("{0:M/d/yyyy h:mm tt}")
                              .EditorTemplateName("_ScheduleDateAndTime")
                              .Title("P/U Pickup").HtmlAttributes(new {@class = "purple-background"});
                          columns.Bound(c => c.DropDate)
                              .Format("{0:M/d/yyyy h:mm tt}")
                              .EditorTemplateName("_ScheduleDateAndTime")
                              .Title("Drop Date").HtmlAttributes(new {@class = "purple-background"});
                      })
                      .ToolBar(toolbar =>
                      {
                      toolbar.Save();

                      toolbar.Template(
                              @<text>

                                  @(Html.Kendo().DropDownList()
                                        .Name("dropShipTypeDropDownList")
                                        .DataTextField("DropShipType")
                                        .DataValueField("DropShipTypeId")
                                        .DataSource(source =>
                                        {
                                            source.Read(read =>
                                            {
                                                read.Action("GetDropShipTypes", "DropShip");
                                            })
                                                .ServerFiltering(true);
                                        })
                                        .SelectedIndex(0)
                                        )

                                  <button id="schedule" name="schedule" class="pull-right">Schedule</button>

                               </text>);


                      }).Events(x => x.DataBound("onGridDataBound"))
                      .HtmlAttributes(new {style = "margin:auto;"})
                      .Sortable()
                      .Pageable(pageable => pageable
                          .Refresh(true)
                          .PageSizes(new[] {25, 50, 75, 100})
                          .ButtonCount(5))
                      .Editable(editable => editable.Mode(GridEditMode.InCell))
                      .DataSource(datasource => datasource
                          .Ajax()
                          .Batch(true)
                          .Model(model =>
                          {
                              model.Id(d => d.PostalFacility);
                              model.Field(d => d.DropShipType).Editable(true);
                              model.Field(d => d.EntryLevel).Editable(false);
                              model.Field(d => d.MailType).Editable(false);
                              model.Field(d => d.PieceCount).Editable(false);
                              model.Field(d => d.PostalFacility).Editable(false);
                              model.Field(d => d.ScheduledPickup).Editable(true);
                              model.Field(d => d.ServiceProvider).Editable(true);
                              model.Field(d => d.DropDate).Editable(true);
                              model.Field(d => d.ScheduledBy).Editable(false);
                              model.Field(d => d.Cost).Editable(false);
                          }) 
                          .Read(read => read
                              .Action("GetScheduleRoyalLogistics", "DropShip", new {trackingCode = @Model.TrackingCode}))
                          .Update(update => update.Action("UpdateScheduleRoyalLogistics", "DropShip"))
                          .PageSize(25))
                      )
            </div>

 

Here is the action method for the Read action on the grid:

public ActionResult GetScheduleRoyalLogistics([DataSourceRequest] DataSourceRequest request, Guid trackingCode)
        {
            var uploadFile = _uploadFileService.GetUploadFileByTrackingCode(trackingCode);
            var awaitingScheduleRelation = _dropShipFileRelationService.GetByDropShipTrackingCode(trackingCode);  

            var dropShipRelation = awaitingScheduleRelation == null
                ? _dropShipFileRelationService.GetBySenderFileId(uploadFile.FileId).ToList()
                : _dropShipFileRelationService.GetByOffsetFileId(awaitingScheduleRelation.OffsetFileId).ToList();

            var allProviders = _dropShipServiceProviderRepository.GetAll();

            var parcelTypes = _parcelTypeRepository.GetParcelTypes();
            List<DropShipDestinationSummaryModel> result = new List<DropShipDestinationSummaryModel>();

            foreach (var relation in dropShipRelation)
            {
                result.AddRange(_dropShipDestinationSummaryService.GetByDropShipFileRelationId(relation.DropShipFileRelationId).Select(x =>
                    new DropShipDestinationSummaryModel()
                    {
                        DropShipDestinationSummaryId = x.DropShipDestinationSummaryId,
                        Cost = x.Cost,
                        Weight = x.Weight,
                        EntryLevel = Utility.GetDescriptionFromEnumValue((UspsFacilityTypeEnum)x.UspsFacilityType),
                        MailType = parcelTypes.Where(a => a.ParcelTypeId == x.ParcelTypeId).Select(y => y.ParcelTypeName).First(),
                        PieceCount = x.PieceCount,
                        PostalFacility = x.DestinationEntry ?? "",
                        ScheduledBy = x.ScheduledBy ?? "",
                        ScheduledPickup = x.PickupDate,
                        DropDate = x.DropDate,
                        PalletCount = x.PalletCount,
                        DropShipType = new DropShipTypeDropDown()
                        {
                            DropShipTypeId = (int)x.DropShipType,
                            DropShipTypeName = Enum.GetName(typeof(DropShipTypeEnum), x.DropShipType)
                        },
                        ServiceProvider = new ScheduleProviderDropShipModel()
                        { 
                            ScheduleProviderId = (int) x.DropShipServiceProviderId,
                            ScheduleProviderName = allProviders.Where(a => a.DropShipServiceProviderId == x.DropShipServiceProviderId).Select(z => z.DropShipServiceProviderName).First()
                        }
                    }));
            }

            return Json(result.ToDataSourceResult(request));
        }

 

any help would be greatly appreciated!

[Kostadin]

Hello Stan,

I already answered the support ticket you have opened with the same requirement and I would appreciate if we continue our conversation there. Nevertheless, the proper way of adding a widget in a Client Template is described in the following help article.

Regards,
Kostadin
Telerik by Progress