This is a migrated thread and some comments may be shown as answers.

Multiple Grids Editors duplicate ID's

5 Answers 890 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Waz
Top achievements
Rank 1
Waz asked on 26 Apr 2016, 10:16 AM

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;

}

 

 

 

5 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 28 Apr 2016, 07:38 AM

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!
 
0
Waz
Top achievements
Rank 1
answered on 04 May 2016, 05:33 AM

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.

 

 

0
Boyan Dimitrov
Telerik team
answered on 05 May 2016, 12:28 PM

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!
 
0
Waz
Top achievements
Rank 1
answered on 06 May 2016, 01:46 AM

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

 

 

0
Boyan Dimitrov
Telerik team
answered on 09 May 2016, 03:13 PM

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!
 
Tags
Grid
Asked by
Waz
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Waz
Top achievements
Rank 1
Share this question
or