combobox behavior in grid edit popup

4 posts, 1 answers
  1. Adam
    Adam avatar
    24 posts
    Member since:
    Nov 2011

    Posted 12 Jun 2013 Link to this post

    Hi, I'm wondering about a particular behavior with the Combobox.

    I have a generic combobox (for people) in an editor template (basic code):
    @model long?
    @(Html.Kendo().ComboBoxFor(m => m)
     .DataTextField("DisplayName")
     .DataValueField("PersonId")
     .Filter(FilterType.Contains)
     .DataSource(
     source =>
     source.Read(read => read.Action("Search", "PersonController")
     .Data("getData")).ServerFiltering(true))
    )


    A little backstory about what I'm trying to do: I want to be able to use the combobox to load only partial data from the datasource (since all data can be too much). This is not a big deal if you just want to use the combo to search, but I also want to use it to show a single selected person (for example when editing a row in a grid, I want the combobox to load only the single person by id).

    I thought I had a somewhat functional solution where I would use the combobox._initial field to see if the combobox should initially pull in the person by id. The "getData" function was similar to this:
    var combo = $(selector).data('kendoComboBox');
     if (combo._initial != '' && !combo.hasLoadedInitial) {
      combo.hasLoadedInitial = true;
      return { id: combo._initial };
     }
      else
     return { text: combo.input.val() };

    On the backend I would either load a single person by id, or search by text depending on what is passed.

    When I use this in a MVC view (using HtmlHelper.EditorFor) it works fine, but when I use it in a grid (popup edit window) I am getting a different behavior. The _initial field value is not set to that of the grid dataItem; it is set to either 0 or blank depending on whether my property is nullable or not. It appears that the grid tries to setup the window editor form before binding the dataItem to it. So initially when the combobox tries to load data from the datasource, it can't know the id to pass.

    How can I determine the PersonId in this case?
  2. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 14 Jun 2013 Link to this post

    Hi Adam,

     
    Basically current behavior is expected as the ComboBox initialized before the current value from the model is bound to it. I would suggest to include the following function in the PopUp template which will return the current record model ID in order to send it to the controller:

    function getCurrentParentId() {
        //Remember to remove the all comments from the PopUp as they will break the template!
        //during initialization of the PopUp the current dataItem is saved
        //to the variable below, which can be used to get the model ID at any point
        var currentItem = ${JSON.stringify(data)} ; 
        return {id: currentItem.EmployeeID};
    }

    Kind Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Adam
    Adam avatar
    24 posts
    Member since:
    Nov 2011

    Posted 14 Jun 2013 Link to this post

    Vladimir,

    Which template are you talking about? Grid edit template?
    Kendo().Grid().Editable(edit => edit.Mode(GridEditMode.PopUp).TemplateName("Template"))

    Currently, I don't have a custom template for the entire model. I am using the default behavior, which will use EditorForModel I believe.
  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 17 Jun 2013 Link to this post

    Hi Adam,


    I'm was referring to the PopUp editor template and if you are using the build-in one, than you should include the provided JavaScript in the custom editor template that contains the ComboBox widget (before it's initialization code).

    Kind Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready