Custom ComboBox column editor for ajax grid

9 posts, 0 answers
  1. Bogdan Cucosel
    Bogdan Cucosel avatar
    15 posts
    Member since:
    Oct 2012

    Posted 11 Mar 2013 Link to this post

    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
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 13 Mar 2013 Link to this post

    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
    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. John Swenson
    John Swenson avatar
    23 posts
    Member since:
    Jan 2010

    Posted 18 Nov 2014 Link to this post

    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.
  5. John Swenson
    John Swenson avatar
    23 posts
    Member since:
    Jan 2010

    Posted 18 Nov 2014 Link to this post

    I forgot the screenshots, sorry :-)
  6. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 20 Nov 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. John Swenson
    John Swenson avatar
    23 posts
    Member since:
    Jan 2010

    Posted 20 Nov 2014 Link to this post

    Setting ValuePrimitive did not help.
    Here you can find a test project to reproduce the issue.
    Best regards.
  8. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 24 Nov 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  9. John Swenson
    John Swenson avatar
    23 posts
    Member since:
    Jan 2010

    Posted 02 Dec 2014 in reply to Daniel Link to this post

    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.
  10. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 04 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

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