Grid with Tabstrip with Grid - Server Binding

[Stephen]

So I am following the kendo examples for using a Grid with a nested TabStrip with a Grid within the tab.  The problem I am having is that the TabStrip is rendering above the Grid instead of within the detailtemplate.  I have attached a screenshot to demonstrate the error.

The main difference between my code and the kendo example is that my main grid and the grids with the tabs are editable.

Here is my view code:

@model IEnumerable<PASSLibrary.Laboratory>

@{
    ViewBag.Title = "Laboratories";
}

<h2>Laboratories</h2>

@(Html.Kendo().Grid(Model)
    .Name("gvLaboratories")
    .Columns(columns =>
    {
        columns.Command(command => { command.Edit(); }).Width(50);
        columns.Bound(l => l.ID);
        columns.Bound(l => l.Description);
        columns.Command(command => { command.Destroy(); }).Width(50);
    })
    .DetailTemplate(l =>
    {
        Html.Kendo().TabStrip()
            .Name("ts" + l.ID)
            .SelectedIndex(0)
            .Items(items =>
            {
                items.Add().Text("Lab Admins").Content(@<text>
                    @(Html.Kendo().Grid(l.Users_Roles)
                        .Name("gvLabAdmins" + l.ID)
                        .Columns(columns =>
                        {
                            columns.Bound(a => a.User_ID).Title("User ID");
                            columns.Bound(a => a.User.Account).Title("BNL Account");
                            columns.Command(command => { command.Destroy(); }).Width(50);
                        })
                        .ToolBar(toolbar => toolbar.Create())
                        .Sortable()
                        .DataSource(dataSource => dataSource
                            .Server()
                            .Model(model => model.Id(a => a.User_ID))
                            .Create(create => create.Action("AddLabAdmin", "SystemAdmin"))
                            .Destroy(destroy => destroy.Action("DeleteLabAdmin", "SystemAdmin"))
                        )
                    )
                </text>);
                items.Add().Text("Facilities").Content(@<text>
                    @(Html.Kendo().Grid(l.Facilities)
                        .Name("gvFacilities" + l.ID)
                        .Columns(columns =>
                        {
                            columns.Bound(f => f.ID);
                            columns.Bound(f => f.Description);
                            columns.Command(command => { command.Destroy(); }).Width(50);
                        })
                        .ToolBar(toolbar => toolbar.Create())
                        .Sortable()
                        .DataSource(dataSource => dataSource
                            .Server()
                            .Model(model => model.Id(f => f.ID))
                            .Create(create => create.Action("AddFacility", "SystemAdmin"))
                            .Destroy(destroy => destroy.Action("DeleteFacility", "SystemAdmin"))
                        )
                    )
                </text>);
            })
            .Render();
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.PopUp).Window(window => window.HtmlAttributes(new { @style = "width:700px;" })))
    .Pageable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Server()
        .Model(model => model.Id(l => l.ID))
        .Create(create => create.Action("AddLaboratory", "SystemAdmin"))
        .Read(read => read.Action("Laboratories", "SystemAdmin"))
        .Update(update => update.Action("UpdateLaboratory", "SystemAdmin"))
        .Destroy(destroy => destroy.Action("DeleteLaboratory", "SystemAdmin"))
    )
)

[Daniel]

Hello Stephen,

You should define the main Grid in a code block and use its Render method to output it in order to avoid the problem e.g.

@{Html.Kendo().Grid(Model)
    .Name("gvLaboratories")
    ...
    .Render();
}

Regards,
Daniel
the Telerik team

[Stephen]

Ok perfect.  That fixed it.  Now I have another issue though.  When I expand an item from the parent grid and I have my tab with the child grid in it, when I add or edit an item in the child grid it collapses the item in the parent grid so I can't see that it is in edit mode.  I have to re-expand the item.  How do I make it so the item stays expanded?

[Stephen]

Also, if I make the edit mode popup, I don't get the popup at all.  This doesn't just happen with a tabstrip.  It also happens if I just have a child grid in the detailtemplate.

[Daniel]

Hello Stephen,

When using server binding the Grid needs to read the data again when entering edit mode so the page is reloaded and the detail will be in its initial state(collapsed). You could either use Ajax binding or add a parameter that indicates which row should be expanded and expand it in the master Grid RowAction callback e.g.

.DataSource(dataSource => dataSource
    .Server()
    .Model(model => model.Id(a => a.User_ID))
    .Read(read => read.Action("Laboratories", "SystemAdmin", new {detailLaboratoryID = l.ID}))
    .Create(create => create.Action("AddLabAdmin", "SystemAdmin"))
    .Destroy(destroy => destroy.Action("DeleteLabAdmin", "SystemAdmin"))
)

.RowAction(row =>
{
    if (row.DataItem.ID.ToString() == Request.QueryString["detailLaboratoryID"])
    {
        row.DetailRow.Expanded = true;
    }
})

This should also resolve the problem with the popup.

Regards,
Daniel
the Telerik team

[Stephen]

Thank you for the response.  I am getting an error with this so I just want to make sure I understand.

The additional parameter should go on a new read statement in the child grid?

.Read(read => read.Action("Laboratories", "SystemAdmin", new {detailLaboratoryID = l.ID}))

And then the RowAction goes on the parent grid?

I actually tried the additional parameter on both the patent and child grid and in both cases I get an error that "l" (for the model) does not exist in the current context.

[Daniel]

Hello again Stephen,

Yes, the RowSelection should be used on the parent and the additional parameter should be to the child Grid action. I am not sure what could be causing the error. From the code that you previously provided "l" seemed to be the name of the parameter used for the DetailView. I attached a sample project in which the expanded state of the detail row that is edited is preserved. Please check it and let me know if I am missing something.

Regards,
Daniel
the Telerik team

[Stephen]

Ok so I got it working.  The issue was that I have two scenarios where I am doing this.  In one scenario I was not using the tabstrip, just the child grid directly in the detailtemplate so in that case I didn't have

.DetailTemplate(l =>

instead I had

.DetailTemplate(
      @<text>
          @(Html.Kendo().Grid(item.Users_Roles)

so it didn't have the "l" in context.  I'm sure there is a way to make it work with the nested grid without the tabstrip but I put the tabstrip in place anyway.

Thank you!

[Stephen]

Of course another problem has occurred.  Both my parent and child grids are editable.  Now when I try to add a new item to the parent grid I get an error on the RowAction.

It throws an "Object reference not set to an instance of an object." on this line:

if (row.DataItem.ID.ToString() == Request.QueryString["labID"])

Sorry for my lack of knowledge with this, I am very new to MVC.

[Petur Subev]

Hello Stephen,

Basically the issue that I produce on my side is due to missing default values. 
e.g.

.DataSource(dataSource => dataSource.Server().PageSize(5).Create(cr=>cr.Action("not","implemented"))
    .Model(m=>{
        m.Id(id => id.EmployeeID);
        m.Field(f => f.EmployeeID).DefaultValue(0);
        m.Field(f => f.Address).DefaultValue("");
        m.Field(f => f.BirthDate).DefaultValue(DateTime.Now);
        m.Field(f => f.City).DefaultValue(0);
        m.Field(f => f.LastName).DefaultValue("");
        m.Field(f => f.FirstName).DefaultValue("");
        m.Field(f => f.City).DefaultValue("");
    })
    )

You can check and run the attached project to see if the issue is the same after removing the default values.

Kind Regards,
Petur Subev
the Telerik team

[Stephen]

That did it! ...but of course another question....

On my parent grid I want the ID field to only be editable during an ADD but not during an EDIT.  I tried adding the Editable(false) to the field:

.Model(model => {
    model.Id(l => l.ID);
    model.Field(f => f.ID).Editable(false);

but that doesn't seem to do it.  Any insight?  Thanks again!

[Petur Subev]

Hello Stephen,

The question is discussed several times on the forums and over the internet:

http://stackoverflow.com/questions/13393443/kendo-ui-how-to-make-specifc-fields-readonly-on-edit-while-on-create-its-edita

http://www.kendoui.com/forums/ui/grid/column-readonly-in-edit-mode-but-editable-in-add-mode-.aspx


Kind Regards,
Petur Subev
Telerik

[Stephen]

Hello again,

I al following other threads for the add/editable issue but I am still having a problem with the subject of this thread.

I have my popup editor working correctly with all of this but when I try to do an ADD it gives an error that it can't find an associated view.  Edit works fine, just add is the problem.

If I change it to InLine editing both add and edit work, its only in the PopUp.

Here is my grid code again:

@{ Html.Kendo().Grid(Model)
    .Name("gvLaboratories")
    .Columns(columns =>
    {
        columns.Command(command => { command.Edit(); }).Width(50);
        columns.Bound(l => l.ID);
        columns.Bound(l => l.Description);
        columns.Command(command => { command.Destroy(); }).Width(50);
    })
    .DetailTemplate(l =>
    {
        Html.Kendo().TabStrip()
            .Name("ts" + l.ID)
            .SelectedIndex(0)
            .Items(items =>
            {
                items.Add().Text("Lab Admins").Content(@<text>

                    @(Html.Kendo().Grid(l.Users_Roles)
                        .Name("gvLabAdmins" + l.ID)
                        .Columns(columns =>
                        {
                            columns.Bound(a => a.User_ID).Template(a => a.User_ID.ToString()).Title("User ID");
                            columns.Bound(a => a.User.BNL_ID).Title("BNL ID");
                            columns.Bound(a => a.User.Pool.First_Name).Title("First Name");
                            columns.Bound(a => a.User.Pool.Last_Name).Title("Last Name");
                            columns.Bound(a => a.User.Account).Title("BNL Account");
                            columns.Command(command => { command.Destroy(); }).Width(50);
                        })
                        .ToolBar(toolbar => toolbar.Create())
                        .Editable(editable => editable.Mode(GridEditMode.PopUp))
                        .Sortable()
                        .DataSource(dataSource => dataSource
                            .Server()
                            .Model(model => model.Id(a => a.User_ID))
                            .Read(read => read.Action("Laboratories", "SystemAdmin", new { labID = l.ID }))
                            .Create(create => create.Action("AddLabAdmin", "SystemAdmin"))
                            .Destroy(destroy => destroy.Action("DeleteLabAdmin", "SystemAdmin"))
                        )
                    )

                </text>);
            })
            .Render();
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Pageable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Server()
        .Model(model =>
        {
            model.Id(l => l.ID);
            model.Field(field => field.ID).DefaultValue("");
            model.Field(field => field.Description).DefaultValue("");
        })
        .Create(create => create.Action("AddLaboratory", "SystemAdmin"))
        .Read(read => read.Action("Laboratories", "SystemAdmin"))
        .Update(update => update.Action("UpdateLaboratory", "SystemAdmin"))
        .Destroy(destroy => destroy.Action("DeleteLaboratory", "SystemAdmin"))
    )
    .RowAction(row =>
    {
        if (row.DataItem.ID.ToString() == Request.QueryString["labID"])
        {
            row.DetailRow.Expanded = true;
        }
    })
    .Render();
}

Am I missing something still?

Thanks,
Steve

[Petur Subev]

Hello Stephen,

It cannot find the view when you press the Add new item button on the ToolBar and the popup should become visible or when you press update inside the popup?

If the first can you check where the URL in the toolbar points to?

If the second can you confirm that you actually specified the view that you want to return in the action method on the controller?
e.g.

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create(ProductViewModel product)
{
    if (ModelState.IsValid)
    {
        //The model is valid - insert the product and redisplay the grid.
        SessionProductRepository.Insert(product);

        //GridRouteValues() is an extension method which returns the
        //route values defining the grid state - current page, sort expression, filter etc.
        RouteValueDictionary routeValues = this.GridRouteValues();

        return RedirectToAction("ServerEditing", routeValues);
    }

    //The model is invalid - render the current view to show any validation errors
    return View("ServerEditing", SessionProductRepository.All());
}

Kind Regards,
Petur Subev
Telerik

[Stephen]

It was after it popped up and then I hit the update button but it wasn't an issue in the controller because it worked with InLine editing....but it is working now with the popup and I haven't made any changes so maybe it was just some kind of hiccup....