combobox behavior in grid edit popup

[Adam]

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?

[Vladimir Iliev]

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

[Adam]

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.

[Vladimir Iliev]

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

[Ramez]

Hi, 

Here is how i fixed my issue - please let me know is there a best approach

--- template_shared_view.cshtml --

....

@(Html.Kendo().DropDownList()
                .AutoBind(false)
                .ValuePrimitive(true)  //to hundle null value on editing (grid) when field is set as required
                .Name("RelatedRowField"
                .DataTextField("Text")
                .DataValueField("Value")               
                .DataSource(source =>
                {
                    source.Read(read => { read.Action("GetMyList", "myCTR", new {  Id = IdElm, Context = Context ).Data("GetRelatedRowId");  });
                })
                .Filter(FilterType.Contains)
                .OptionLabel(" ")
                .NoDataTemplateId("my-noDataTemplate")
                .HtmlAttributes(new { style = "width: 75%" })
            )

....

---- 

--- Javascript on main page ---

function GetRelatedRowId() {       
        var grid = $("#MyGrid").data("kendoGrid");
        var uid = $('#DropDownList_ElemId').closest(".k-popup-edit-form").data("uid");
        var item = grid.dataSource.getByUid(uid);
        return { Id: item.RelatedRowField };
    }

--------------- 

Thanks,