Как изменить метку арии в подробностях «Развернуть и свернуть» в мастер-строке Нажмите в сетке кендо? - PullRequest
Новая
       25

Как изменить метку арии в подробностях «Развернуть и свернуть» в мастер-строке Нажмите в сетке кендо?

0 голосов
/ 15 апреля 2020

Я хочу изменить метку арии из Развернуть и Свернуть детали на главной строке. Нажмите в Kendo Grid, но похоже, что Кендо снова перезаписывает измененную метку. В качестве теста я создал атрибут «new-label». Это вставлено правильно.

Как правильно изменить метку арии?

PS: я должен изменить имя из-за проблем с wcag. 

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/hierarchy">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
    

</head>
<body>

        <div id="example">
            <div id="grid"></div>

            <script>
                $(document).ready(function() {
                    var element = $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                            },
                            pageSize: 6,
                            serverPaging: true,
                            serverSorting: true
                        },
                        height: 600,
                        sortable: true,
                        pageable: true,
                        detailInit: detailInit,
                        dataBound: function(e) {
                          var grid = e.sender;
                          
                          grid.tbody.find("tr.k-master-row").click(function(e){                            
                            var target = $(e.target);  
                            
                            if ((target.hasClass("k-i-collapse"))) {
                              target.attr('aria-label', 'Collapse new');
                              target.attr('new-label', 'Collapse new');
                              console.log("collapse");
                              return;
                            }       
                            
                            if ((target.hasClass("k-i-expand"))) {
                              target.attr("aria-label", "Expand new");
                              target.attr('new-label', 'Expand new');
                              console.log("expand");
                              return;
                            }  
                            
   
                          })
                          	
                        },
                        columns: [
                            {
                                field: "FirstName",
                                title: "First Name",
                                width: "110px"
                            },
                            {
                                field: "LastName",
                                title: "Last Name",
                                width: "110px"
                            },
                            {
                                field: "Country",
                                width: "110px"
                            },
                            {
                                field: "City",
                                width: "110px"
                            },
                            {
                                field: "Title"
                            }
                        ]
                    });
                });

                function detailInit(e) {
                    $("<div/>").appendTo(e.detailCell).kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                            },
                            serverPaging: true,
                            serverSorting: true,
                            serverFiltering: true,
                            pageSize: 10,
                            filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
                        },
                        scrollable: false,
                        sortable: true,
                        pageable: true,
                        columns: [
                            { field: "OrderID", width: "110px" },
                            { field: "ShipCountry", title:"Ship Country", width: "110px" },
                            { field: "ShipAddress", title:"Ship Address" },
                            { field: "ShipName", title: "Ship Name", width: "300px" }
                        ]
                    });
                }
              
              
            </script>
        </div>


</body>
</html>

1 Ответ

0 голосов
/ 17 апреля 2020

Я решил это сейчас (не красиво, но редко).

Я предполагаю, что все строки свернуты при инициализации. Я добавляю aria-expanded = "false". Я также установил aria-label = "Open Translate" (измените Open Translate на нужный текст).

В dataBound я делаю нежелательный setTimeOut (понятия не имею, достаточно ли здесь 500 мс, время отклика сервера и т. Д. c.). 

setTimeout (function () {
       target.attr ('aria-label', 'Open Translate');
}, 500);


<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/hierarchy">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
    

</head>
<body>

        <div id="example">
            <div id="grid"></div>

            <script>
                $(document).ready(function() {
                    var element = $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                            },
                            pageSize: 6,
                            serverPaging: true,
                            serverSorting: true
                        },
                        height: 600,
                        sortable: true,
                        pageable: true,
                        detailInit: detailInit,
                        dataBound: function(e) {
                          var grid = e.sender;
                            
                           $('.k-i-expand').attr('aria-expanded', 'false');
                           $('.k-i-expand').attr('aria-label', 'Open Translate');
                          
                           grid.tbody.find("tr.k-master-row").click(function(e){
                           var target = $(e.target);

                           if ((target.hasClass("k-i-collapse"))) {
                             target.attr('aria-expanded', 'false');
                             setTimeout(function() {
                               target.attr('aria-label', 'Open Translate');
                             }, 200);
                             return;
                           } else if ((target.hasClass("k-i-expand"))) {
                             target.attr('aria-expanded', 'true');
                             setTimeout(function() {
                               target.attr('aria-label', 'Close Translate');
                             }, 200);
                             return;
                           }

                         })
                          	
                        },
                        columns: [
                            {
                                field: "FirstName",
                                title: "First Name",
                                width: "110px"
                            },
                            {
                                field: "LastName",
                                title: "Last Name",
                                width: "110px"
                            },
                            {
                                field: "Country",
                                width: "110px"
                            },
                            {
                                field: "City",
                                width: "110px"
                            },
                            {
                                field: "Title"
                            }
                        ]
                    });
                });

                function detailInit(e) {
                    $("<div/>").appendTo(e.detailCell).kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                            },
                            serverPaging: true,
                            serverSorting: true,
                            serverFiltering: true,
                            pageSize: 10,
                            filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
                        },
                        scrollable: false,
                        sortable: true,
                        pageable: true,
                        columns: [
                            { field: "OrderID", width: "110px" },
                            { field: "ShipCountry", title:"Ship Country", width: "110px" },
                            { field: "ShipAddress", title:"Ship Address" },
                            { field: "ShipName", title: "Ship Name", width: "300px" }
                        ]
                    });
                }
              
              
            </script>
        </div>


</body>
</html>
...