Grid with EditorTemplate using ComboBox with Server Filtering - Create not populating the row

[Carrie]

Hello,

I have a form that contains several fields and also an editable Grid.   The grid is binding correctly to the ViewModel however when I Create a new row or edit an existing row the data is not populated in the row fields.   The editable fields are populated correctly like if I go back to an added row but the label view is populated with no value like so:

<td class="" role="gridcell" data-role="editable">
  <input type="hidden" value="" name="AffectedItems[0].Title">
</td>

It should be like this:

<td class="" role="gridcell" data-role="editable">
  Item 1
  <input type="hidden" value="Item 1" name="AffectedItems[0].Title">
</td>

I am not sure what is wrong with my implementation here is my code - any help is appreciated:

View:

@(Html.Kendo().Grid(Model)
 .Name("AffectedItems")
 .ToolBar(tools => tools.Create().Text("Add Affected Item"))
 .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top))
 .Columns(columns =>
     {
     columns.Bound(p => p.Title).ClientTemplate("#= Title #" +
         "<input type='hidden' name='AffectedItems[#= index(data)#].Title' value='#= Title #' />"
          ).EditorTemplateName("AffectedItemsEditor");
      columns.Bound(p => p.Id).Hidden().ClientTemplate("#= Id #" +
          "<input type='hidden' name='AffectedItems[#= index(data)#].Id' value='#= Id #' />"
           );
      columns.Command(command => command.Destroy()).Width(100);
 })
 .DataSource(dataSource => dataSource.Ajax()
    .Model(model =>
       {
         model.Id(p => p.Id);
         model.Field(p => p.Id).Editable(false);
        })
    .ServerOperation(false)
 )
)

<script>

    function index(dataItem) {
        var data = $("#AffectedItems").data("kendoGrid").dataSource.data();

        return data.indexOf(dataItem);
    }

    function filterAffectedItems() {
        return {
            itemFilter: $("#AddAffectedItem").data("kendoComboBox").input.val()
        };
    }

</script>

EditorTemplate:

@(Html.Kendo().ComboBox()
       .Name("AddAffectedItem")
       .Placeholder("Choose One...")
       .DataTextField("Text")
       .DataValueField("Value")
       .MinLength(3)
       .Filter(FilterType.Contains)
       .AutoBind(false)
       .DataSource(dataSource => dataSource
           .Read(read => read.Action("GetAffectedItemsList", "AffectedItems")
                 .Data("filterAffectedItems"))
           .ServerFiltering(true)
     ))

Controller:

public class AffectedItemsController : Controller
    {
        public JsonResult GetAffectedItemsList(string itemFilter)
        {
            var items = new List<SelectListItem>();

            for (int i = 1; i <= 60; i++)
            {
                items.Add(new SelectListItem { Value = i.ToString(), Text = "Item " + i.ToString() });
            }

            items.Add(new SelectListItem { Value = "Desktop", Text = "Desktop" });

            if (!String.IsNullOrEmpty(itemFilter))
                return Json(items.AsEnumerable().Where(i => i.Text.Contains(itemFilter)).Take(50), JsonRequestBehavior.AllowGet);

            return Json(items.AsEnumerable().Take(50), JsonRequestBehavior.AllowGet);
        }
    }

[Daniel]

Hello Carrie,

The combobox name should be the same as the property name in order for it to be bound correctly to the value:

@(Html.Kendo().ComboBox()
    .Name("Title")
    .Placeholder("Choose One...")
    .DataTextField("Text")
    .DataValueField("Value")
    .MinLength(3)
    .Filter(FilterType.Contains)
    .AutoBind(false)
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("GetAffectedItemsList", "Home")
              .Data("filterAffectedItems"))
        .ServerFiltering(true)
  ))

The ComboBox DataValueField should also be change to "Text" unless the Title should be updated with the Id value.

Regards,
Daniel
Telerik

[Carrie]

Thanks, but when I make the suggested change the ComboBox does not render properly.   It shows a text input box instead of the ComboBox.    If you can modify the project I attached into a working scenario I would greatly appreciate it.

Thanks,
Carrie

[Daniel]

Hi again Carrie,

I attached the modified project.

Regards,
Daniel
Telerik

[Carrie]

I am attaching another updated project that also populates the corresponding Id for new items.

Thanks again!

[George]

Hi Daniel / Kendo Team, 

I'm using editor control in Kendo grid and Bining Combobox Control. However, as you suggested in you post - both .DataTextField &  DataValueField should have Text only not value, then how do we get the value for selected item in combo box search? 

Appreciate if you could help me to find the solution for getting value from embedded control(combo box) in a grid. 

 

Here is my code - 

Template - 

 @(Html.Kendo().ComboBox()
                    .Name("ag_description") //The name of the combobox is mandatory. It specifies the "id" attribute of the widget.
                    .DataTextField("text") //Specifies which property of the Product to be used by the combobox as a text.
                    .DataValueField("text") //Specifies which property of the Product to be used by the combobox as a value.
    .Filter(FilterType.Contains)
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetAccessoryGroupSearchString", "Grid"); //Set the Action and Controller name
        })
       .ServerFiltering(true); //If true the DataSource will not filter the data on the client.
    })
    .SelectedIndex(0) //Select first item.
    // .AutoBind(false)
)

Grid Code - 

 

@(Html.Kendo()
                              .Grid<CPSM.Models.CTBI_AccessoryGroupcls>()
                              .Name("AgchildGrid_#=ct_bi_id#")
                              //.Name("childGrid_#=Id#_#=ParentId#")
                              .ToolBar(toolbar => toolbar.Create().Text("Add New Access group"))
                               .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
                               .Events(events => events.Edit("editAG"))
                               .DataSource(dataSource => dataSource
                               .Ajax()
                               .ServerOperation(false)
                                   //.Read(read => read.Action("GetAccessGroup", "Grid").Data("{ Id: " + @Model.CT_ID + "}"))  //, new { Id = "#=CT_ID#" }))
                               .Read(read => read.Action("GetCTBIAccessoryGroup", "AssociatedBundles").Data("{function:" + Json.Encode(newmodel) + "}"))
                               .Model(model => model.Id(p => p.ct_bi_id))

                                )
                                .Columns(columns =>
                                {

                                    columns.Bound(p => p.ct_bi_id).Hidden(true);
                                    columns.Bound(p => p.ctbi_ag_id).Hidden(true).ClientTemplate("<input type='hidden' name='AG_ID' value='\\#=ctbi_ag_id\\#' />");
                                    columns.Bound(p => p.ag_description).EditorTemplateName("AccessoryGroup1").Title("Accessory Group Description").ClientTemplate("\\#if(ag_description == '') {\\#" +
                                       "\\#=AccessoryGroupText\\#" +
                                         "<input type='hidden' name='AccessoryGroupText' value='\\#=AccessoryGroupText\\#' />" +
                                       "\\#}else{\\#" +
                                           "\\#=ag_description\\#" +
                                           "<input type='hidden' name='AG_Description' value='\\#=ag_description\\#' />" +
                                       "\\# } \\#");
                                    //columns.Bound(p => p.AG_Comment).Title("Accessory Group Comment");
                                    columns.Command(command => { command.Destroy(); }).Width(172);

                                })
                                .ToClientTemplate())

 

Thanks,

George.

 

 

[Stefan]

Hello, George,

In general, the value of the ComboBox can be different than text and in most cases is a number.

I can suggest checking our demo demonstrating this with a DropDown which has the same implementation then the ComboBox:

http://demos.telerik.com/aspnet-mvc/grid/editing-custom

The following article can also prove helpful:

http://docs.telerik.com/aspnet-mvc/helpers/grid/templating/editor-templates

If the issue still occurs, please provide a fully runnable example and I will gladly assist.

Regards,
Stefan
Progress Telerik

[George]

Hi Stefan, 

Thanks for your reply. 

My question is different, I was asking, can we bind  text to DataTextField &  value to  DataValueField in ComboBox embedded in Kendo grid using "EditorTemplateName" in grid column.  

For example -

columns.Bound(p => p.ag_description).EditorTemplateName("AccessoryGroup1")

@(Html.Kendo().ComboBox()
                    .Name("ag_description") //The name of the combobox is mandatory. It specifies the "id" attribute of the widget.
                    .DataTextField("text") //Specifies which property of the Product to be used by the combobox as a text.
                    .DataValueField("") //Specifies which property of the Product to be used by the combobox as a value.

 

From Daniel previous reply  it suggested - 

The ComboBox DataValueField should also be change to "Text" unless the Title should be updated with the Id value. 

Regards,
Daniel 
Telerik

Above copied from Daniel response in the same post if you scroll up in the post dated 18 Sep 2013. 

I hope you would able to understand my question this time and able to help me out. 

Thanks!

George

 

 

 

[Stefan]

Hello, George,

The suggestion provided by my colleague was a specific scenario where the display value and the value which is updating the model should be only text.

Please advise if the scenario is the same and for what and when the ID value has to be used?

In general, the approach may require mapping the text value with the id value, as this will allow finding the correct id based on the selected text value.

Regards,
Stefan
Progress Telerik

[George]

Hi Stefan,

Thank you for your reply!

I have the same scenario like you mentioned "In general, the approach may require mapping the text value with the id value, as this will allow finding the correct id based on the selected text value." 

However, when I assigned text to DataTextField and value(ID) to DataValueField in a combo box control which is embedded in a kendo grid column and  when I select text and after selection do mouse out, the text converted into value (ID).

Combo box control behave correctly when I used in a form.  But it behave different when used inside a grid column.

I hope, I'm able to explained you, if not please let me know. Attaching screens of how combo is behaving when used inside Kendo grid column. 

 

copying my code below - 

 

Here is my code - 
Template - 
 @(Html.Kendo().ComboBox()
                    .Name("ag_description") //The name of the combobox is mandatory. It specifies the "id" attribute of the widget.
                    .DataTextField("text") //Specifies which property of the Product to be used by the combobox as a text.
                    .DataValueField("text") //Specifies which property of the Product to be used by the combobox as a value.
    .Filter(FilterType.Contains)
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetAccessoryGroupSearchString", "Grid"); //Set the Action and Controller name
        })
       .ServerFiltering(true); //If true the DataSource will not filter the data on the client.
    })
    .SelectedIndex(0) //Select first item.
    // .AutoBind(false)
)
Grid Code - 

@(Html.Kendo()
                              .Grid<CPSM.Models.CTBI_AccessoryGroupcls>()
                              .Name("AgchildGrid_#=ct_bi_id#")
                              //.Name("childGrid_#=Id#_#=ParentId#")
                              .ToolBar(toolbar => toolbar.Create().Text("Add New Access group"))
                               .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
                               .Events(events => events.Edit("editAG"))
                               .DataSource(dataSource => dataSource
                               .Ajax()
                               .ServerOperation(false)
                                   //.Read(read => read.Action("GetAccessGroup", "Grid").Data("{ Id: " + @Model.CT_ID + "}"))  //, new { Id = "#=CT_ID#" }))
                               .Read(read => read.Action("GetCTBIAccessoryGroup", "AssociatedBundles").Data("{function:" + Json.Encode(newmodel) + "}"))
                               .Model(model => model.Id(p => p.ct_bi_id))

                                )
                                .Columns(columns =>
                                {

                                    columns.Bound(p => p.ct_bi_id).Hidden(true);
                                    columns.Bound(p => p.ctbi_ag_id).Hidden(true).ClientTemplate("<input type='hidden' name='AG_ID' value='\\#=ctbi_ag_id\\#' />");
                                    columns.Bound(p => p.ag_description).EditorTemplateName("AccessoryGroup1").Title("Accessory Group Description").ClientTemplate("\\#if(ag_description == '') {\\#" +
                                       "\\#=AccessoryGroupText\\#" +
                                         "<input type='hidden' name='AccessoryGroupText' value='\\#=AccessoryGroupText\\#' />" +
                                       "\\#}else{\\#" +
                                           "\\#=ag_description\\#" +
                                           "<input type='hidden' name='AG_Description' value='\\#=ag_description\\#' />" +
                                       "\\# } \\#");
                                    //columns.Bound(p => p.AG_Comment).Title("Accessory Group Comment");
                                    columns.Command(command => { command.Destroy(); }).Width(172);

                                })
                                .ToClientTemplate())

 

[Konstantin Dikov]

Hi George,

If both, the value and text fields of the ComboBox are set to the text it is rather unexpected to see an ID value in the Grid after selecting it. Could you please ensure that the ag_description field bound to the column is of type "string", because the ComboBox will return string as a selected value with that configuration. Generally, if you need to have foreign key scenario you need to use the built-in ForeignKey column:

• http://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn

For any other scenario you could either use a complex object as in this demo or call a JavaScript function within the ClientTemplate of the column and find the corresponding text field value from the value field available in the dataItem. This approach will require to have access of the text/value data on client-side.


Regards,
Konstantin Dikov
Progress Telerik

[Abid]

This Id shown instead of Text inside a child grid column is a problem. I am quite surprised i am facing same problem even after 2 years of this post. Telerik did not bother to fix this issue even in 2 years. bit shocked.

[Stefan]

Hello,

The Grid will show the value which is bound to the column.

If the Id field of the model is bound to the Grid column, showing the id is expected.

This scenario was not changed as it is expected, and not classified as an issue.

Could you please provide more details about the scenario, and I will gladly assist.

Regards,
Stefan
Progress Telerik