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

DropDownList in ClientTemplate not initializing in Grid

1 Answer 469 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jerry
Top achievements
Rank 1
Jerry asked on 17 Oct 2016, 06:48 PM

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!

1 Answer, 1 is accepted

Sort by
0
Kostadin
Telerik team
answered on 19 Oct 2016, 08:51 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Jerry
Top achievements
Rank 1
Answers by
Kostadin
Telerik team
Share this question
or