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"))
)
)
14 Answers, 1 is accepted
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();
}
Daniel
the Telerik team
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.
Daniel
the Telerik team
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.
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
.DetailTemplate(l =>
.DetailTemplate(
@<
text
>
@(Html.Kendo().Grid(item.Users_Roles)
Thank you!
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.
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
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);
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
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
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