How to Persist Custom Editor Data into Grid?

[David]

I'm using a custom editor to select a value in a grid column and that's working fine. I've tried both a ComboBox and an Autocomplete and with both I'm able to get my list of values from the server and can select one in the custom editor. But when I tab to another grid cell the value disappears. If I click back to that cell the editor takes over again and the selected value reappears. But how can I make the value visible when the cell doesn't have focus?

Custom Editor:

@Html.Kendo().AutoComplete().Name("SOCAutocomplete").Events(events => events.Select("onOpCodeSelect")).DataTextField("opCode").DataSource(d => d.Read(r => r.Action("GetServiceOpCodes", "Onboarding")))

(I've tried a few things in JS in the onOpCodeSelect handler but nothing that I've tried succeeds in retaining the selected value after leaving the cell.)

Grid:
 @(Html.Kendo().Grid<Service>()
                    .Name("ServicesGrid")
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.Description).Title(@Resource.ServiceData_ServiceDescription).Width(150).HtmlAttributes(new { tabindex = 999999 });
                        columns.Bound(o => o.OpCode).Title(@Resource.ServiceData_OpCode).Width(120); // because of UIHint on Service.OpCode it automatically uses OpCodeEditor.cshtml...

 

[Vladimir Iliev]

Hi David,

From the provided information it's not clear for us what us the exact setup that you have - could you please provide runable example where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.

Kind Regards,
Vladimir Iliev
Telerik

[David]

I've continued to work this on my own and I found an example here:
http://docs.kendoui.com/api/web/grid#configuration-columns.command.text
that works the way I need it to. In this example, a value selected from the autocomplete control continues to be visible in the grid after the grid cell loses focus. That's what's not happening in my code--after losing focus the cell containing the autocomplete goes blank.

What I'd like to do is apply the technique shown on this page to my case. However, I'm using the ASP.NET MVC wrapper functions to generate the grid (see my original message). Is there a way to combine these two techniques?

I'll see if I can put together an example of my code on jsfiddle but, in the meantime, please let me know if this clarifies things sufficiently for you to show me how to implement the technique illustrated on your grid docs page.
Thanks,
David Salahi

[David]

It's not possible to work with the ASP.NET MVC wrapper classes on JSFiddle so here is a copy of my test project. This project is a customized version of the sample project aspnetmvc-episode4 that is used in your video tutorial. When you run the Products page you'll see two grids. The one labeled Web UI Grid uses the code from this doc page:

http://docs.kendoui.com/api/web/grid#configuration-columns.command.text

This one works correctly. The other grid, labeled MVC Helper Grid, uses the wrapper class to build the grid. This one does not work correctly. See the Autocomplete in the second column called Test Name. Note that the value in that cell disappears after clicking Update. Also, note that if you re-edit the row the value from the Autocomplete is displayed again.

Is there some way to apply the properties created on the grid that does work to the one generated by the wrapper class?
David

[Vladimir Iliev]

Hi David,

After reviewing the provided project it seems that the AutoComplete is not working correctly as the test column contains null values initially - in such case you should set the "ValuePrimitive" option. Also you are using AutoCompleteFor helper and defined the "Name" option at the same time - please note that when editorFor is used the "Name" option is generated automatically from the property name. Please check the updated editor below:

@{
    var Categories = new List<Category>();
    Categories.Add(new Category { Id = 1, Name = "Product 1" });
    Categories.Add(new Category { Id = 2, Name = "Product 2" });
    Categories.Add(new Category { Id = 3, Name = "Apples" });
    Categories.Add(new Category { Id = 4, Name = "Oranges" });
    Categories.Add(new Category { Id = 5, Name = "Fix horn" });
}

@(Html.Kendo().AutoCompleteFor(m => m)
    //change event handler is removed as it's  not needed
    .BindTo(Categories)
    .ValuePrimitive(true)
    .DataTextField("Name")
    .Filter(FilterType.StartsWith)
    )

Regards,
Vladimir Iliev
Telerik