Dropdownlist not working properly with kendo grid

[Mayuri]

Hi,

I am facing problem while using kendo dropdownlist with kendo grid. I have a kendo grid with all the fields as dropdown (around 12 fields) except one column(employeename) as a simple display column. For dropdown fields, I have created partial views as EditorTemplates and attached them to the grid column. But when I run my application, initially it does not display the dropdowns. When click the cell turns into a dropdown field and when I select any value and change focus, the grid cell gets populated with dropdown value property and not the text property. For some of the columns, it even does not set the selected value in cell. No idea what is the issue. below is my code:

@(Html.Kendo().Grid(Model)
            .Name("EmployeeHarborGrid")
            .EnableCustomBinding(false)
            .Columns(columns =>
              {
                    columns.Bound(d => d.EmployeeName).Title("Employee");
                    columns.Bound(d => d.AcaJobClassification).Title("ACA Job Classification")
                               .EditorTemplateName("_AcaJobClassification").Width(120).ClientTemplate("#:AcaJobClassification#");
                    columns.Bound(d => d.TwelveMonthsOffer).Title("12 Months Offer")

              }

 

my editor template code:

@using Kendo.Mvc.UI
@(Html.Kendo().DropDownListFor(m => m)
.Name("AcaJobClassification").HtmlAttributes(new { @style = "font-size:12px" })
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>()
{
new SelectListItem() {Text="--Please Select--", Value="0"},
new SelectListItem() {Text="Contract", Value="1"},
new SelectListItem() {Text="Educator", Value="2"},
new SelectListItem() {Text="Fulltime", Value="3"},
new SelectListItem() {Text="Parttime", Value="4"},
})
.SelectedIndex(3)
)

 

If employee record exists, then I want the dropdowns to pick the record value and set the dropdown index accordingly.

Can I achieve this with ClientTemplate attribute on the column. I would prefer using ClientTemplate instead of creating EditorTemplate. Please suggest. Also, I want to bind this dropdown with an Enum list but facing problem with that as well. Can you help me out with that as well?

Appreciate your quick reply. 

Thanks.

 

[Alexander Popov]

Hi Mayuri,

The recommended approach is using ForeignKey column builders, as they populate the columns.values array. This guarantees that the Grid will display the text representation of the selected values when not in edit mode. It will also automatically populate the DropDownList widgets, so you don't have to create custom EditorTemplate for each column. Additionally, it will take care of the Grid's filtering options. Using ClientTemplates to render the DropDownList widgets can be achieved, however you would need to attach change event handlers that find the dataItem that corresponds to the DropDownList and set its new value (see proof of concept example). This approach however, might significantly impact the performance and interfere with other built-in features, such as keyboard navigation and selection.

Regards,
Alexander Popov
Telerik

[Mayuri]

Hi Alexander,

Thanks for your suggestions but I am still struggling with this issue. I will elaborate my requirement here:

I have a Grid bound to following ViewModel. this model is defined in a Web API application which is referenced in my MVC application.

public class EmployeeHarbor
{
    public string CompanyCode { get; set; }
    public int EmployeeID { get; set; }
    public string EmployeeName { get; set; }
    public int? AcaJobClassification { get; set; }
    public int? TwelveMonthsOffer { get; set; }
    public int? TwelveMonthsHarbor { get; set; }
    public int? JanCoverageOffer { get; set; }
    public int? JanHarbor { get; set; }
    public int? FebCoverageOffer { get; set; }
    public int? FebHarbor { get; set; }
    public int? MarCoverageOffer { get; set; }
    public int? MarHarbor { get; set; }

}

There are more 'Coverage' and 'Harbor' columns for rest of the months till December. I want all the nullable int columns from ACAJobClassification further to be dropdown columns in grid (14 columns). dropdown values for these columns are coming from an enum. Coverage and Offer column have same values so there are only 3 enums defined and 3 editor templates created.

Below is the grid definition

@model IEnumerable<WebApi.Proxies.Models.EmployeeHarbor>

@(Html.Kendo().Grid(Model)
.Name("EmployeeHarborGrid")
.EnableCustomBinding(false)
.Columns(columns =>
{
columns.Bound(d => d.EmployeeID).Hidden(true);

columns.Bound(d => d.EmployeeName).Title("Employee");
columns.Bound(d => d.AcaJobClassification).Title("ACA Job Classification").EditorTemplateName("_AcaJobClassification").Width(120);    
columns.Bound(d => d.TwelveMonthsOffer).Title("12 Months Offer").EditorTemplateName("_EmployeeOffer").ClientTemplate("#:TwelveMonthsOffer#");
columns.Bound(d => d.TwelveMonthsHarbor).Title("12 Months Harbor").EditorTemplateName("_EmployeeHarbor").ClientTemplate("#=TwelveMonthsHarbor#");
/*columns.Bound(d => d.JanCoverageOffer).Title("Jan Offer")
.EditorTemplateName("_EmployeeOffer");
columns.Bound(d => d.JanHarbor).Title("Jan Harbor")
.EditorTemplateName("_EmployeeHarbor");

}

Initially the dropdown does not appear in column. When I click on column it appears properly but as I said earlier the issue is after selecting any value from dropdown, it does not show it in the grid cell nor it gets bind to model property.

Could you please suggest proper way of achieving this with some code?

 

Thanks.

[Mayuri]

Also my Editor template looks like:

 

@model CyberPayMVC.Areas.ACA.Helper.EnumConstants.EmployeeCoverageOffer
@(Html.Kendo().DropDownListFor(m => m)
.Name("EmployeeOffer").HtmlAttributes(new { @style = "font-size:12px" })
.DataTextField("Text")
.DataValueField("Value")
.BindTo(EnumHelper.GetSelectList(typeof(CyberPayMVC.Areas.ACA.Helper.EnumConstants.EmployeeCoverageOffer)))
)

[Alexander Popov]

Hi,

Not showing the DropDownList initially is expected, as the Grid is designed to work in modes. Entering edit mode initializes the DropDownList and allows the value to be modified. I reviewed the attached snippets and noticed that the name of the DropDownList widget and the field it is bound to are different. Keep in mind that this will generate wrong value bindings, hence the inability to change the Grid's values through the DropDownList. I would suggest removing the Name method, as the *For builder already assigns a name based on the field's metadata.

Regards,
Alexander Popov
Telerik