Dropdownlist problem in Grid

[Kevork]

I am using a dropdownlist in grid. The value is showing correctly in the column but when I click on the the column, the dropdownlist comes without the selected value. I have attached 3 images.

 

I need the value to be selected when I will click on the column and the dropdownlist will appear with that value. In my case when I will click on the column, the dropdownlist will appear with "DB" selected. And then I can change another value if I want. How can I do that?

 

 

Thanks

[Kevork]

Here is my code

@(Html.Kendo().Grid<ServicePROWeb.ServiceProWCFService.GrJscMstr>()
        .Name("gridJobAllocation")
        .Columns(columns =>
        {
            columns.Bound(p => p.gr_sch_date).Title("Date").Format("{0:dd/MMM/yyyy}").Width(120).Locked(true);
            columns.Bound(p => p.gr_sch_time).Title("Time").Width(100).Locked(true);
            columns.Bound(p => p.gr_sch_assto).Title("Tech").Width(150).Locked(true);
            columns.Bound(p => p.gr_ass_time).Title("PL").Width(40).Locked(true).EditorTemplateName("");

            columns.Bound(p => p.gr_status)
            .EditorTemplateName("_statusDropDownList")
            .ClientTemplate("#=gr_status#")
            .Title("ST")
            .Width(70);

            columns.ForeignKey(p => p.gr_status, (System.Collections.IEnumerable)ViewData["TreatmentCheckBoxes"], "Id", "Status")
            .EditorTemplateName("_statusDropDownList")
            .ClientTemplate("#=gr_status#")
            .Title("ST2")
            .Width(120);

            columns.Bound(p => p.gr_runno).Title("Run").Width(100);
            columns.Bound(p => p.gr_freq).Title("SC").Width(80);
            columns.Bound(p => p.gr_prcode).Title("Item").Width(150);
        })
        .Events(e =>
        {
            e.DataBound("gridJobAllocation_dataBound");
            e.DataBinding("gridJobAllocation_dataBinding");
        })
        .Editable(e => e.Mode(GridEditMode.InCell))
        .Sortable()
        .Selectable()
        .Scrollable()
        .Resizable(r => r.Columns(true))
        .Reorderable(reorder => reorder.Columns(true))
        .HtmlAttributes(new { @style = "cursor: pointer; height: 550px;" })
        .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Sort
        (
            s =>
            {
                s.Add("gr_sch_date").Descending();
                s.Add("gr_sch_time").Ascending();
            }
        )
        .Model(model =>
        {
            model.Id(o => o.gr_jobno);
            model.Field(o => o.gr_status).DefaultValue("DB");
        })
        .Read(read => read.Action("GetJobs", "Grid").Data("passFilter"))
        .Create(create => create.Action("JobAllocation_Create", "JOBS"))
        .Update(create => create.Action("JobAllocation_Update", "JOBS"))
        .Destroy(create => create.Action("JobAllocation_Destroy", "JOBS"))
    )
)

 

 Dropdownlist template

@using ServicePROWeb.Models;

@{
    DropDownListItem ddp;
    List<DropDownListItem> list = new List<DropDownListItem>();

    foreach(var scheduleCheckBox in (List<ScheduleCheckBox>)Session["TreatmentCheckBoxes"])
    {
        ddp = new DropDownListItem();
        ddp.Text = scheduleCheckBox.Status;
        ddp.Value = scheduleCheckBox.Status;
        list.Add(ddp);
    }
}

@(Html.Kendo().DropDownList()
    .Name("statusDropDownList")
    .DataTextField("Text")
    .DataValueField("Value")
    .SelectedIndex(4)
    .BindTo(list)
    .Events(e => e.Select("statusDropDownList_onSelect").DataBound("statusDropDownList_onDataBound").Open("statusDropDownList_onOpen"))
)

 

[Kevork]

I have already tried to follow the demo sample code but it didn't help me.

[Boyan Dimitrov]

Hello Kevork,

 

Please refer to the Editor Templates article that shows how to define a custom editor for a specific column. 
 
What I can notice in the provided example is that the Name of the DropDownList widget is not the same as the model field name. As explained in the third point "Set the Name of the DropDownList to the name of the property which will be edited". 
 
Also an option is to avoid defining a Name and use the DropDownListFor view helper. It takes automatically the model field name and configure the id value of the element and bindings. Actually I would suggest this approach. 

 

 

Regards,
Boyan Dimitrov
Telerik

[Kevork]

Thanks for the reply.

I changed the name of the dropdownlist as the model field name. It  worked but not fully. I have still some issues. When I click on the "ST" column, it shows the dropdownlist with value but wrong value. It should show "DC" but showing the first value of the dropdownlist, "DB". And another problem is when I click for the second time on the "ST" column of another row, it shows textbox instead of dropdownlist.

@using ServicePROWeb.Models;

@(Html.Kendo().DropDownList()
    .Name("gr_status")
    .DataTextField("Status")
    .DataValueField("Id")
    .BindTo((List<ScheduleCheckBox>)Session["TreatmentCheckBoxes"])
    .Events(e => e.Select("statusDropDownList_onSelect").DataBound("statusDropDownList_onDataBound").Open("statusDropDownList_onOpen"))
)

 

I have attached the images to clarify.

 

 Thanks

[Boyan Dimitrov]

Hello Kevork,

 

Could you please send us an isolated runnable example in order to investigate this problem? Since I am aware of such problem I would need to review and test the specific case. 

 

Regards,
Boyan Dimitrov
Telerik

[Kevork]

Here is the runnable project. I have used VS 2015.

When I click on the ST column of the grid, the dropdown becomes visible but item doesn't show. I have to click again to select value from dropdownlist. The selected item should be shown when I click first time.

 

 Thanks.

[Kevork]

Here is the runnable project. I have used VS 2015. I couldn't attach runnable project because of file size restriction. You need to attach all Kendo scripts, dll and css.

When I click on the "ST" column of the grid, the dropdownlist appears but shows no value selected. The dropdownlist needs to be clicked again and then the item can be selected. But I need the dropdownlist to be appeared with the selected value and in expanded mode.

In the project, when I click on the ST column, the dropdownlist should appear with value "DC" and expanded with other values.

 Thanks

[Kevork]

Please ignore the previous attached project. Use this one.

 

Thanks

[Boyan Dimitrov]

Hello Kevork,

By default the value binding for the select widgets(AutoComplete, DropDownList, ComboBox, MultiSelect) uses the value of the selected item to update the View-Model field. So in this case the value of the "Status" field is "DC" and it looks for an item with value "DC", but the values are numbers and there is no item with value "DC". 

A possible solution is either to have same text and value for the DropDownList widget: 

@using ServicePROWeb.Models;

@(Html.Kendo().DropDownList()
    .Name("Status")
    .DataTextField("Text")
    .DataValueField("Value")
    .SelectedIndex(1)
    .BindTo(new List<SelectListItem>() {
            new SelectListItem() {
                Text = "DB",
                Value = "DB"
            },
            new SelectListItem() {
                Text = "DC",
                Value = "DC"
            },
            new SelectListItem() {
                Text = "DA",
                Value = "DA"
            }
        }
    )
)

or use the ForeignKey column approach. Please refer to the Grid / ForeignKey column demo. 

 

Regards,
Boyan Dimitrov
Telerik

[Kevork]

Thanks for the suggestion. I'll try and let you know.

[Kevork]

Hi,

This thread (ForeignKey) solved my problem. The attached project helped me to solve my issue.

 

Thanks