I have hierarchy grid in asp.net mvc
It's not accessible, is it possible?
this is my code:
@(Html.Kendo().Grid<Matrix.Plugin.BooksLists.Models.CustomerList.CustomerProductsListsModel>
()
.Name("CustomerProductsListsGrid")
.Columns(columns =>
{
columns.Bound(p => p.ListName).Title("" + T("Matrix.Plugin.BooksLists.ListName") + "").HtmlAttributes(new { @class = "firstColumn listName" }).Media("(min-width: 450px)");
columns.Bound(p => p.AgeText).Title("" + T("Matrix.Plugin.BooksLists.Age") + "").HtmlAttributes(new { @class = "age" }).Media("(min-width: 450px)");
columns.Bound(p => p.Count).Title("" + T("Matrix.Plugin.BooksLists.NumOfBooks") + "").HtmlAttributes(new { @class = "booksNum" }).Media("(min-width: 450px)");
columns.Bound(p => p.Warnning).Title("").HtmlAttributes(new { @class = "warning" }).Media("(min-width: 450px)");
columns.Command(command => command.Custom("errorBox").Text(" ").HtmlAttributes(new { @class = "icon-icon- worning popOverIcon", @data_toggle = "popover", @data_popover_content = "\\#errorPopUpContainer", @data_placement = "bottom", @data_trigger = "hover", @href = "\\#this" })).Media("(min-width: 450px)");
columns.Command(command => command.Custom("actionsBox").Text("").Click("openActionBox")
.HtmlAttributes(new { @class = "icon-icon-dots popOverIcon", @data_toggle = "popover", @data_popover_content = "\\#actionPopUpContainer", @data_placement = "bottom", @href = "\\#this" })).Media("(min-width: 450px)");
columns.Template(@<text></text>).ClientTemplate("#=resColTemplate(data)#").Title(" ").Media("(max-width: 450px)");
})
.ToolBar(toolBar =>
toolBar.Custom()
.Text("" + T("Matrix.Plugin.BooksLists.ExportAllListsToExcel") + "")
.HtmlAttributes(new { @class = "exportToExcel" })
.Url(Url.Action("CustomerListsExportToExcel", "BooksLists"))
)
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable()
.Pageable()
.Navigatable()
.Scrollable(s => s.Enabled(false))
.ClientDetailTemplateId("template")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Warnning).Editable(false);
})
.PageSize(20)
.Read(read => read.Action("GetCustomerList", "BooksLists"))
)
.Events(events => events.DataBound("dataBound"))
)
<script id="template" type="text/x-kendo-template">
@(Html.Kendo().Grid<Matrix.Plugin.BooksLists.Models.CustomerList.CustomerProductsLists_AttachedProductsModel>
()
.Name("grid_#=Id#") // template expression, to be evaluated in the master context
.Events(events => events.DataBound("LoadPopoversIcons"))
.Columns(columns =>
{
columns.Bound(o => o.ProductName).Title("" + T("Matrix.Plugin.BooksLists.BookName") + "").Width(120).ClientTemplate("<a class='productName' href=" + @Url.RouteUrl("Product", new { SeName = "\\#= SeName \\#" }) + "> \\#= ProductName \\# </a>").Media(" (min-width: 450px)");
columns.Bound(o => o.ProductFieldOfKnowledge).Title("" + T("Matrix.Plugin.BooksLists.ProductFieldOfKnowledge") + "").Width(120).Media("(min-width: 450px)");
columns.Bound(o => o.BookType).Title("" + T("Matrix.Plugin.BooksLists.BookContentType") + "").Width(120).Media("(min-width: 450px)");
columns.Bound(o => o.ProductProvider).Title("" + T("Matrix.Plugin.BooksLists.ProductProvider") + "").Width(120).Media("(min-width: 450px)");
columns.Command(command => command.Custom("extraInfoBox").Click("extraInfoDetails").HtmlAttributes(new { @class = "icon-icon- more-informtion extraInfoBoxPopOver popOverIcon", @data_toggle = "popover", @data_popover_content = "\\#extraInfoPopOverContainer", @data_placement = "bottom", @href = "\\#this" }).Text(" ")).Title("מידע × ×•×¡×£").Width(90).Media("(min- width: 450px)");
columns.Command(command => command.Custom("alertBox").Text(" ").HtmlAttributes(new { @class = "icon-icon-more-informtion-press popOverIcon", @data_toggle = "popover", @data_placement = "bottom", @data_trigger = "hover", @data_popover_content =
"\\#alertPopUpContainer", @OnMouseOver = "showAlertBox(this)", @href = "\\#this" })).Width(50).Media("(min-width: 450px)");
columns.Command(command => command.Custom("bookErrorBox").Text(" ").HtmlAttributes(new { @class = "icon-icon-worning popOverIcon", @data_toggle = "popover", @data_placement = "bottom", @data_trigger = "hover", @data_popover_content = "\\#bookErrorPopUpContainer", @OnMouseOver = "showBookErrorBox(this)", @href = "\\#this" })).Width(50).Media("(min-width: 450px)");
columns.Command(command => command.Custom("notesBox").Text(" ").Click("showNotesBox").HtmlAttributes(new { @class = "icon- icon-note-press hasNote popOverIcon", @data_toggle = "popover", @data_popover_content = "\\#notesPopUpContainer", @data_placement = "bottom", @href = "\\#this" })).Title("הערה").Width(90).Media("(min-width: 450px)");
columns.Bound(o => o.ProductId).Title("" + T("matrix.plugin.bookslists.addtoschoollistshort") + "").Width(120).Media("(min-width: 450px)").ClientTemplate(@Html.ActionLink(" ", "SchoolBooksListsButtons", "BooksLists", new { ProductId = "\\#=ProductId\\#" }, new { @class = "modal-link icon-icon-add-list", @onclick = "addToSchoolList(this)" }).ToHtmlString());
columns.Command(command => command.Custom("deleteBook").Text(" ").Click("DeleteBookGetData").HtmlAttributes(new { @class = "icon-icon-delete popOverIcon", @data_toggle = "modal", @data_target = "\\#deleteBookModal" })).Title("הסרה").Media("(min-width: 450px)");
columns.Template(@<text></text>).ClientTemplate("\\#=resInnerTableColTemplate(data)\\#").Title(" ").Media("(max-width: 450px)");
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetCustomerAttachProductsList", "BooksLists", new { ListId = "#=Id#" }))
)
.Pageable()
.Sortable()
.Navigatable()
.ToClientTemplate()
)
</script>
Thanks!
4 Answers, 1 is accepted
I guess that the problem you are facing is that you are able to navigate through the cells of the parent grid, but not to go to the child grid and vice versa. If this is the problem there are few things that I would like to mention:
- once the cell that contains the child grid is focused you can press Enter key to go to the child grid. Now you are able to use the keyboard arrow keys to navigate through the cells of the child grid.
- If you want to go back to the parent grid you have to press the "Shift" and "Tab" keys.
Regards,
Boyan Dimitrov
Progress Telerik
Rank 1
You're right,
but when I press Enter on the Parent row all the texts in the line become editable but the inner line doesn't open
I noticed in your code that you have enabled the "inline" editing feature of both grids. Indeed inline editing with navigable will open the current row in edit mode when Enter key is pressed. In case that there is a child grid in the row the Enter key will behave differently - it will focus the first cell in the child grid so user will be able to navigate through the cells of the child grid. So in case that the parent grid row does not contain a child grid the Enter key will open the entire row for editing. If parent grid row does contain a child grid the Enter key will focus the first cell of child grid.
Please take a look at the https://dojo.telerik.com/aBIWUBik example. If something does not work as you expect please modify the example to replicate the issue and list all necessary steps to replicate the problem.
Regards,
Boyan Dimitrov
Progress Telerik
Rank 1