Place a drop down in a grid column?

0 Answers 51 Views
DropDownList Grid
jonathan
Top achievements
Rank 1
Iron
jonathan asked on 28 Jun 2023, 01:45 PM

I have a C# ASP.NET MVC application where I populate a Kendo grid with data from an Ajax call.  I need to have one of the grid columns displayed with a dropdown list.  I also need to set the selected value of the dropdown list.

This is the code for the grid:


    @(Html.Kendo().Grid<TaxCertApp.ViewModels.ParcelViewModel>()

      .Name("DetailedParcelGrid")
      .AutoBind(true)
      .Columns(columns =>
      {
          columns.Bound(parcel => parcel.ParcelKey)
               .ClientTemplate("<button type='button' class='btn btn-taxapp btn-primary assesment-taxyear-add' id='btnAddTaxYear'><b>Add Tax Year</b></button>")
               .Title("")
               .Width(200);
          columns.Bound(parcel => parcel.ParcelKey)
                .ClientTemplate("<span class=\"assesment-parcel-edit glyphicon glyphicon-edit\" style=\"color: rgb(40, 96, 144)\"></span></a>")
                .Title("")
                .Width(30);
          columns.Bound(parcel => parcel.LotNo).Title("Lot #").Width(50);
          columns.Bound(parcel => parcel.AssembledTaxDescription).Title("Tax Description").Width(140);
          columns.Bound(parcel => parcel.SchoolDistrict).Title("School District").Width(120);
          columns.Bound(parcel => parcel.ParcelStreetNo).Title("Street Number").Width(110);
          columns.Bound(parcel => parcel.ItemNo).Title("Item").Width(50);
          columns.Bound(parcel => parcel.Class).Width(50);
          columns.Bound(parcel => parcel.ParcelStatusList)
              .Title("Parcel Status")
              .Width(150)
           //   .ClientTemplate("#=SeeList(ParcelStatusList)#");
              .EditorTemplateName("DropDownEditor");

          columns.Bound(parcel => parcel.ParcelNotes).Title("Parcel Notes");

      })
        .Scrollable()
        .HtmlAttributes(new { style = "height:550px;" })
        .ClientDetailTemplateId("template")
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(n => n.CaseKey))
            .Read(read => { read.Action("GetDetailedParcelDetails", "Parcel").Data("{ CaseKey: " + @Model.CaseKey + "}"); }))
            .Events(events => events.DataBound("dataBound"))
        )

This is the code in the DropDownEditor.cshtml:


@using System.Collections
@model System.String

@(Html.Kendo().DropDownListFor(m => m)
    .BindTo((IEnumerable)ViewData["ParcelStatusList"])
    .OptionLabel("- Select Parcel Status -")
)

I included an image of the grid that gets generated. I also included an image of the console.log when the code executed the .ClientTemplate code which looks like this:


    function SeeList(parcelStatusList) {

        console.log(parcelStatusList);

        var obj = JSON.stringify(parcelStatusList);

        console.log(obj);

        return parcelStatusList;
    }

Any suggestions on what is preventing the dropdown from displaying properly?

 

Thank you.

 

 

No answers yet. Maybe you can help?

Tags
DropDownList Grid
Asked by
jonathan
Top achievements
Rank 1
Iron
Share this question
or