Multiple Grids Editors duplicate ID's

6 posts, 0 answers
  1. Waz
    Waz avatar
    16 posts
    Member since:
    Aug 2007

    Posted 26 Apr 2016 Link to this post

    Hi,

    I have two grids on one page in MVC Razor and one DateTime Editor is failing because of a duplicate ID on the page.  

    Each grid uses Ajax for its datasource to Bind.   Each grid uses a different model.   However the models both use the same property (eg. Date).   For this particular example I want both grids to be on the page visible in edit mode at the same time (easier editing for the user).  However when I inspect the HTML there are duplicate element ID's.   Both grid editors create input of id="date".   Which causes one of the DateTimePickers to fail /not appear (or bind to).  

    Question is:  without having to change the property name of the model, is there a way to tell the grid/editor template to use a different ID or use the ParentsID in combination with the childs?   eg.   Model1_Date   

     

    eg

    public class Model1

    {

      DateTime Date;

      string Surname;

    }

     

    public class Model2

      DateTime Date;

      string Country;

    }

     

     

     

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 28 Apr 2016 Link to this post

    Hello WHuis,

    Indeed by default id, name and data-bind attributes are set to the name of the model property. In order to bind the model to the editor in order two-way binding to work correctly the data-bind attribute is the most important. In this case you should be able to change the id value of the editor and the binding to work properly and avoid the problem with editors duplicate ID's. 

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Waz
    Waz avatar
    16 posts
    Member since:
    Aug 2007

    Posted 04 May 2016 in reply to Boyan Dimitrov Link to this post

    Hi Boyan,

     

    That is great.  However I looked into it, changing the InLine Editor on the Edit event.  However for some columns there seems to be many references to the ID, so just changing one may not work.  This method seems messy.

    Is there a more elegant way of modifying the ID?  Say the example the column I want to change has a DatePicker that is being generated from a MVC editor template for the InPlace Editor of the Grid?

     

    Ideally if the columns list or DataSource had a Name property or similar would be a sensible feature... as listed below...

      .Model(model =>
                    {
                        model.Id(p => p.ID);
                        model.Field(p => p.ID).Editable(false);
                        model.Field(p => p.Date).Name("EnquiryDate")

                 }

    Where the Name property exists the Grid would generate a different ID to the data-bind attribute.

     

    I think having more than one grid on a page being edited with similar Model names is a scenario that would be quite common to developers.

     

     

  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 05 May 2016 Link to this post

    Hello WHuis,

    The Kendo UI Grid for ASP.NET MVC relies on ASP.NET MVC editor templates to create the editing UI.The Html.EditorFor method is used to get the editor HTML for every property which is editable. 

    Unfortunately this is not something we can control or change it using the Kendo UI Grid for ASP.NET MVC API. 

    Regards,

    Boyan Dimitrov

    Telerik

     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Waz
    Waz avatar
    16 posts
    Member since:
    Aug 2007

    Posted 05 May 2016 in reply to Boyan Dimitrov Link to this post

    Hi Boyan,

    I did a bit more research with MVC, how about if I include partial views on the page and with the partial view I use the....

     new ViewDataDictionary() { TemplateInfo = new TemplateInfo() { HtmlFieldPrefix = "UniqueNameHere" } }

    Which should prefix the editors to make them unique on each view?

    Do you see any problems with that?

    Thanks

     

     

  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 09 May 2016 Link to this post

    Hello WHuis,

    Maybe this can be the grid id (each grid element on the page should have unique value) or simply define a counter variable and increment its value after each grid definition. You can search in the forums such as stack overflow for a solution. 

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top