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

Problem editing with multiple instances of same Grid

1 Answer 33 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Javier
Top achievements
Rank 1
Javier asked on 06 Jul 2018, 12:27 PM

I am showing multiple instances of the same grid in the same view. And everything works fine except if you try to edit a record on two grids at the same time.

The problem seems to be that the EditorFor elements created when switching to in-line edit mode all end up named the same, so the second set of editors don't work as expected (as-in, the DatePicker doesn't render, I just end-up with a non-formatted date in a regular textbox).

 

I tried adding an HtmlFieldPrefix to each partial (the helper to create the view is held within a PartialView that's called for each team).

That makes the actual editors render appropriately, but they don't get properly bound to the underlying model (as-in, I can see the datepicker, but it doesn't have the existing value, nor posts back to the model as expected).

 

As far as the model, the key portion would be with the Date fields, where I have the model decorated so that it shows the appropriate date picker.

The way I'm creating multiple grids is that I loop through a collection of teams and call a helper to create each grid with a separate Id.

[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
[UIHint("Date")]
public DateTime DateStart { getset; }
 
@helper TeamGrid(int id)
{
    @(Html.Kendo().Grid<KTeam>()
          .Name("gridTeam" + id)
          .DataSource
          (
              d => d
                  .Ajax()
                  .ServerOperation(false)
                  .PageSize(20)
                  .Model(model =>                   {
                      model.Id(u => u.Id);
                   })
                  .Events(events => events.Error("onError"))
                  .Read(r => r.Action("ReadTeam""Report").Data("dataTeamId(" + id + ")"))
                  .Update(u => u.Action("EditTeam""Report"))
                  .Sort(sort => sort.Add(s => s.Member).Ascending())
          )
          .Columns(columns =>           {
              columns.Bound(u => u.Id).Hidden();
              columns.Bound(u => u.Member).Width(200);
              columns.Bound(u => u.DateStart).Width(120);
              columns.Bound(u => u.DateEnd).Width(120);
              columns.Command(command => command.Edit()).Width(177);
          })
          .Filterable(f => f.Extra(false).Operators(o => o.ForString(s => s.Clear().Contains("Contains"))))
          .Sortable(s => s.SortMode(GridSortMode.MultipleColumn).AllowUnsort(true))
    ) }

 

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 10 Jul 2018, 07:51 AM
Hello Javier,

In order for the editors to be bound correctly to the edited dataItem, their name should match exactly the name of the field, which is why it fails to bind the value when you change the names of the editors. I have to say that there is no workaround that I could suggest for this scenario, especially when the same model is bound all Grids. The only option would be to switch to Batch (InCell) edit mode, which will render only one editor at a time:

Best Regards,
Konstantin Dikov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Javier
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or