Custom ComboBox column editor for ajax grid

[Bogdan Cucosel]

Hello,

I'm trying to accomplish the following: I need an ajax enabled grid (declared with wrappers); the entities of the grid (let's say of type DocumentData) have a reference to another entity (that would be Country) .

Now, when in view mode, the grid should display the Description of the Country: this I accomplish by using the ClientTemplate of the BoundColumn.

When in edit mode, the grid should display a combobox; this combobox must be bound to the action of a controller: this gives us also filtering.

Filtering Country and saving DocumentData with the new selected data works perfect. 

The problem appears when we try to edit again: when switching the row to edit mode, the combox does not display the text (the Description property of the Country), but the Id; even so, if we delete the number in the combox, the filtering works again, and also the updating.

Below the code :

@{

    Html.Kendo()

        .Grid<Teamnet.eViza.Model.Entities.App.DocumentData>()

        .Name("gridDocumentData")

        .Columns(columns =>

        {

            columns.Bound(c => c.Id);

            columns.Bound(c => c.IssuedByAuthority);

            columns.Bound(c => c.IssuedCountry)

                       .ClientTemplate("#=(IssuedCountry == null) ? '' : IssuedCountry.roDescription #")

                       .EditorTemplateName("NomLookup");

            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);

        })

        .DataSource(dataSource =>

        {

            dataSource.Ajax()

               .CrudWithQueryAndDefaultCommands(

                   new Teamnet.eViza.Business.Queries.AllEntitiesOfTypeName(typeof(Teamnet.eViza.Model.Entities.App.DocumentData)),

                  "DocumentData")

               .AutomaticRefreshed();

             

            dataSource.Ajax()

                .Model(model => model.Id(a => a.Id));

            dataSource.Ajax().PageSize(10);

        })

        .ToolBar(toolbar => toolbar.Create())

        .Editable(editable => editable.Mode(GridEditMode.InLine))

        .AutoBind(true)

        .Pageable()

        .Filterable()

        .Sortable()

        .Render();

}

And, the editor template:

@model Teamnet.eViza.Model.Entities.BaseNom

 

@(Html.Kendo().ComboBoxFor(a => a)

                .DataTextField("roDescription")

                .DataValueField("Id")

                .Filter(FilterType.StartsWith)

                .HighlightFirst(true)

                .MinLength(1)

                .DataSource(dataSource =>

                            dataSource.Read(read =>

                                read.Action("Read", "NomComboBox", new { nomType = Teamnet.eViza.WebCommon.Utils.TypeUtils.FullNameWithAssembly(ViewData.ModelMetadata.ModelType) })

                            ).ServerFiltering(true))

                .SelectedIndex(0)

)

Attached you can find some pictures of the grid in view mode and edit mode.

Do you have any idea why this might happen ?

Thank you,
Bogdan

[Petur Subev]

Hello Bogdan,

If everything else is working as expected (most important the ComboBox lists the description of items when it is expanded) then could you check if there is actually a match between the values of the ComboBox and the value of the ID field that you edit with the ComboBox.

If this is not the case please share a live URL or sample project so we can check what exactly is the issue for this.

Kind regards,
Petur Subev
the Telerik team

[John Swenson]

I have the same problem: the scenario is "Grid / Editing custom editor" but instead of a DropDown editor I need a ComboBox with ServerFiltering (i.e. "autocomplete") because the records could be hundreds or thousands.
Everything works fine (server filtering, adding, deleting) except when I switch a row to edit mode: then the combox does not display the text field but the Id (I use Guid Ids)

My code is (relevant snippets only):

The entity classes:

public class EmployerViewModel
{
    [ScaffoldColumn(false)]
    public int Id { get; set; }

    [DataType(DataType.Currency)]
    [Required(ErrorMessage = "Salary is required")]
    public decimal Salary { get; set; }

    [Required(ErrorMessage = "Employer name is required")]
    [UIHint("EmployerDataTemplate")]
    public EmployerListViewModel EmployerData { get; set; }
}


public class EmployerListViewModel
{
    public Guid? Id { get; set; }
    public String FullName { get; set; }
}

The grid:

@(Html.Kendo().Grid<EmployerViewModel>()
    .Name("EmployersGrid")
    .HtmlAttributes(new { @class = "grid-list" })
    .BindTo(ViewData["EmployersGridList"] as IEnumerable<EmployerViewModel>)
    .PrefixUrlParameters(false)
    .Columns(columns =>
    {
        columns.Command(command => command
            .Destroy()
            .Text(" "))
            .Width(50);
        columns.Bound(p => p.EmployerData)
            .Title("Employer")
            .Width(600)
            .ClientTemplate("#= EmployerData.FullName #");
        columns.Bound(p => p.Salary)
            .Title("Salary")
            .Width(120);
    })
    .ToolBar(toolBar => toolBar.Create().Text("Add employer"))
    .Editable(editable => editable
        .Mode(GridEditMode.InCell)
        .CreateAt(GridInsertRowPosition.Top)
        .DisplayDeleteConfirmation("Delete current employer?")
    )
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.Id).Editable(false).DefaultValue(0);
            model.Field(p => p.EmployerData).DefaultValue(
                ViewData["EmployerDataDefault"] as EmployerListViewModel);
        })
        .Events(events =>
        {
            events.Error("commonGridErrorHandler");
            events.Change("onEmployersGridChange");
        })
    )
    .Events(e => e.Save("onEmployersGridSave"))
    .Sortable(s => s.AllowUnsort(true))
    .Scrollable()
    .Navigatable()
    .Resizable(resize => resize.Columns(true))
    .Deferred()
)

The ComboBox edit template (EmployerDataTemplate):

@model EmployerListViewModel

@(Html.Kendo().ComboBoxFor(m => m)
      .Placeholder("Select one...")
      .DataValueField("Id")
      .DataTextField("FullName")
      .MinLength(3)
      .Filter(FilterType.StartsWith)
      .HighlightFirst(true)
      .DataSource(source => source
          .Read(read => read.Action("GetEmployers", "Common")
                .Data("onEmployerAdditionalData"))
          .ServerFiltering())
)

The read action for the grid ComboBox:

public JsonResult GetEmployers(string text)
{
    if (String.IsNullOrEmpty(text))
    {
        var list = new List<EmployerListViewModel>();
        return Json(list, JsonRequestBehavior.AllowGet);
    }

    var repository = new EmployersRepository();
    IEnumerable<EmployerListViewModel> employers = repository.GetByAutocomplete(0, 20, text);
    return Json(employers, JsonRequestBehavior.AllowGet);
}

How the grid is initialized:

ViewBag.EmployerDataDefault = new EmployerListViewModel();
ViewBag.EmployersGridList = new List<EmployerViewModel>();

Attached please find two screenshots that immediately highlight the problem.

A few words about the grid configuration: I use the method described here to post the grid content with the other form fields (and it works very well, so maybe you can add it to the Kendo docs ;-) )

Any help will be really appreciated.
Best regards.

[John Swenson]

I forgot the screenshots, sorry :-)

[Petur Subev]

Hello John,

When the Grid switches to edit mode and the ComboBox does not show the corresponding text then either the ComboBox has not bound or the value of the combobox does not match any value from the items on the combobox.

Also try to enable the ValuePrimitive option of the ComboBox it controls what the value of the ComboBox is.

http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#configuration-valuePrimitive

If still struggling please demonstrate your case so we can see if anything goes wrong.

Kind Regards,
Petur Subev
Telerik

 

 

[John Swenson]

Setting ValuePrimitive did not help.
Here you can find a test project to reproduce the issue.
Best regards.

[Daniel]

Hello,

The Id will be shown because no data is returned from the server when no text is sent which will be the case with the initial request. If no data should be returned then I can suggest to use the approach demonstrated in this code-library project to populate the item from the grid as data of the combobox.

Regards,
Daniel
Telerik

 

 

[John Swenson]

Thank you, it solved my problem.

Anyway, the solution is rather complex and I think it would be much better if the combobox (and the other widgets) would have supported this scenario natively.

Regards.

[Daniel]

Hello,

Adding the differed binding as built-in is not planned at this time. You may consider submitting a feature request in our user voice forum.

Regards,
Daniel
Telerik