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

13 posts, 1 answers
  1. Carrie
    Carrie avatar
    27 posts
    Member since:
    Aug 2013

    Posted 16 Sep 2013 Link to this post

    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);
            }
        }

  2. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 18 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Carrie
    Carrie avatar
    27 posts
    Member since:
    Aug 2013

    Posted 18 Sep 2013 Link to this post

    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
  4. Answer
    Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 19 Sep 2013 Link to this post

    Hi again Carrie,

    I attached the modified project.

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Carrie
    Carrie avatar
    27 posts
    Member since:
    Aug 2013

    Posted 20 Sep 2013 Link to this post

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

    Thanks again!
  6. George
    George avatar
    3 posts
    Member since:
    Mar 2015

    Posted 22 Sep 2017 in reply to Daniel Link to this post

    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.

     

     

  7. Stefan
    Admin
    Stefan avatar
    2894 posts

    Posted 26 Sep 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. George
    George avatar
    3 posts
    Member since:
    Mar 2015

    Posted 26 Sep 2017 in reply to Stefan Link to this post

    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

     

     

     

  9. Stefan
    Admin
    Stefan avatar
    2894 posts

    Posted 28 Sep 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  10. George
    George avatar
    3 posts
    Member since:
    Mar 2015

    Posted 28 Sep 2017 in reply to Stefan Link to this post

    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())

     

  11. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 02 Oct 2017 Link to this post

    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:
    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  12. Abid
    Abid avatar
    3 posts
    Member since:
    May 2017

    Posted 12 Oct 2017 in reply to Konstantin Dikov Link to this post

    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.

  13. Stefan
    Admin
    Stefan avatar
    2894 posts

    Posted 16 Oct 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top