how to use combobox in a grid cell

8 posts, 0 answers
  1. Dan
    Dan avatar
    9 posts
    Member since:
    Sep 2012

    Posted 17 Sep 2012 Link to this post

    I'm having trouble figuring out how to use a Kendo Comobox in an editor template for a Grid cell (both ajax).  Is there an example of this anywhere? I have a typical scenario where the Combobox has an id for the value and but text for the display.  The text needs to appear in the grid cell and combobox, but the id needs to be posted when the grid is submitted.  Below is a code snippet for what I have at the moment.

    The column binding for the grid of employees:

    columns.Bound(c => c.Employee).EditorTemplateName("EmployeeId");

    The editor template:

    @(Html.Kendo().ComboBox()
              .Name("EmployeeId")
              .DataTextField("value")
              .DataValueField("key")
              .Filter("startswith")
              .DataSource(source => {
                  source.Read(read =>
                  {
                    read.Action("GetEmployees", "Employee");
                  })
                  .ServerFiltering(false);
              })
        )

    This loads the combobox values and the startswith filtering is working fine, but when I make a selection, the grid doesn't take the selected value.  It works if I switch to a column bound to the EmployeeId, but then the column displays the id rather than the text.

    What is the right way to handle this?  I would think this is a really common scenario, so assume there is a straight forward way to deal with it.

    Thanks, DanO
  2. Gibi
    Gibi avatar
    3 posts
    Member since:
    Oct 2008

    Posted 17 Sep 2012 Link to this post

    I have the same Issue. 
    Help us out here.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Dan
    Dan avatar
    9 posts
    Member since:
    Sep 2012

    Posted 17 Sep 2012 Link to this post

    Gibi -

    I discovered this example of a DropDownList in a Grid which is a very similar scenario
    http://demos.kendoui.com/web/grid/editing-custom.html

    However, you need to download the MVC Examples project to see all the code (the editor template, controller and view model are not included in the online demo).  Also - I was only able to get this to work when the ComboBox was bound to a complex type like in the example (Employee property that has two child properties - EmployeeId and EmployeeName).  Generally my view models are flattened (EmployeeId and EmployeeName would be properties of the view model itself), but I wasn't able to find a way to make it work with that structure.  I would like to know if there is a way to accomplish the same thing without adding the complex type parent container, as I will have to refactor a bunch of code if I want to use the control.
  5. Dan
    Dan avatar
    9 posts
    Member since:
    Sep 2012

    Posted 18 Sep 2012 Link to this post

    I discovered an additional issue with using a ComboBox in a grid.  You can reproduce the issue on the following page of the MVC Examples project:

    /razor/web/grid/editing-custom

    Simply change the DropDownList to a ComboBox in this file:

    \Areas\razor\Views\web\grid\EditorTemplates\ClientEmployee.cshtml

    Then try entering some random text in the ComboBox, and move away from the field.  The value in the field gets set to undefined, and you can't reset it correctly again without refreshing the page.

    I have not been able to come up with a way to get this working.  I tried tying into the ComboBox events as a possible solution, but for some reason when the ComboBox is in a Grid cell (at least one in batch mode), all of its events fire at the point that you click into the Grid cell, before the ComboBox has even been rendered...  Frustrating.   Not sure where to go from here.
  6. Gibi
    Gibi avatar
    3 posts
    Member since:
    Oct 2008

    Posted 18 Sep 2012 Link to this post

    Thanx Dan.

    I also figured it out about the combo. But to it make bind you must give the combo box name property the same name as the property you need to bind to.I also set the property [UIHint("TemplateName")] on field in the view model. Added the template in the shared/EditorTemplates folder. Now it binds and works fine with the refresh.

    -------------------Grid-------------------------------
    @(Html.Kendo().Grid<MVC.ViewModels.ResultsViewModel>(Model)    
                                .Name("Grid")    
                                .Columns(columns => {                         
                                    columns.Bound(o => o.Waarneming).Width(550).Title("Waarneming");                                         columns.Bound(p => p.Result).Width(110).Title("Resultaat");                                                                            
                                })                                      
    -------------------Combo Box----------------------
    @(Html.Kendo().ComboBox()
        .Name("Result") 
        .DataValueField("Text")
        .DataTextField("Text") 
        .HighlightFirst(true)    
        .BindTo((IEnumerable<SelectListItem>) ViewBag.NormeringList) 
    )
  7. Robert
    Robert avatar
    6 posts
    Member since:
    Jan 2013

    Posted 27 Mar 2013 Link to this post

    Hello all,
    It appears that Dan's question was never answered. What Dan is describing is also discussed in this datasource forum thread(see below). If the option is not selected from the combobox, then the combobox text is sent as the selected value which isn't bound to an object and doesn't conform to the datasource schema. The malformed data is what causes the datasource to stop responding. In the forum thread, a custom data schema function is the solution. Love to see an example of this if anyone got it working, since a combobox in a grid seems fairly common.

    thanks,
    Rob

    the thread is referenced here (the link editor's not working):
     http://www.kendoui.com/forums/framework/data-source/datasource-bug---if-read-fails-it-is-not-possible-to-call-read-again.aspx
  8. Robert
    Robert avatar
    6 posts
    Member since:
    Jan 2013

    Posted 02 Apr 2013 Link to this post

    This question on how to handle undefined text in a grid combobox is now answered in stackoverflow for both inline and batch editing:

    http://stackoverflow.com/questions/15691774/kendo-grid-combobox-sends-undefined-data-to-datasource/
  9. lucerias
    lucerias avatar
    16 posts
    Member since:
    Nov 2011

    Posted 08 Jun in reply to Dan Link to this post

    I have used workaround to set the model value with the drop down selected value under gridview onSave event.

            function onSave(e) {
                e.model.CustomerCategoryId= $("#CustomerCategoryId").kendoDropDownList().val();
            }

     

Back to Top
UI for ASP.NET MVC is VS 2017 Ready