UI for mvc hierarchy grid - accessibility

5 posts, 1 answers
  1. Sharon
    Sharon avatar
    3 posts
    Member since:
    Jan 2019

    Posted 31 Jul 2019 Link to this post

    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!

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 01 Aug 2019 Link to this post

    Hello,

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Sharon
    Sharon avatar
    3 posts
    Member since:
    Jan 2019

    Posted 04 Aug 2019 in reply to Boyan Dimitrov Link to this post

    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

  4. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 06 Aug 2019 Link to this post

    Hello,

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Sharon
    Sharon avatar
    3 posts
    Member since:
    Jan 2019

    Posted 07 Aug 2019 in reply to Boyan Dimitrov Link to this post

    yes! I deleted this code ".Editable(editable => editable.Mode(GridEditMode.InLine))" and its work! Thanks!!
Back to Top