Grid Title or Table Caption

[Treg]

I am looking to utilize a grid title or the table caption to host html.
Any recommendations?

[Dimo]

Hello Treg,

In order to use a table caption, you need to do the following:

1. Initialize the Kendo Grid from a table:

https://demos.telerik.com/kendo-ui/grid/from-table

2. Add a <caption> element inside the <table> element

3. Add styles for the caption element, e.g. vertical padding and a background color. You can also set a k-content, k-group or k-widget CSS class to the caption to add a background color automatically, depending on the current skin.

4. Disable Grid scrolling:

             $(document).ready(function() {
                    $("#grid").kendoGrid({
                        height: "auto",
                        scrollable: false
                    });
                });

The above procedure is required only if you need to ensure a good level of accessibility. Otherwise a simple heading tag before the Grid is enough.

In addition to a caption, you can also use the summary attribute of the <table> element.

Greetings,
Dimo
the Telerik team

 

[Sreejith]

This page is not accessible anymore: can we have the http://demos.kendoui.com/grid/from-table.html

[Dimo]

Hi Sreejith,

THe URL has changed and it seems there is no redirect. Sorry about that. Here is the working link: https://demos.telerik.com/kendo-ui/grid/from-table

Regards,
Dimo
Progress Telerik

[ashutosh]

Hi  Dimo,

I cannot use the way to create the kendo grid using table, I have to use APIs to render the table, so is there a way to add "caption" later or "summary" attribute to the table element generated by the kendo grid?

its required for accessibility compliance.

thanks

[Nikolay]

Hi Ashutosh,

My name is Nikolay and I will get hold of this thread from now on.

You can use the setOptions() Grid method to update grid options including adding attributes to the already rendered Grid table elements. For example:

      var grid = $("#grid").data("kendoGrid");
      var columns = grid.getOptions().columns;
      columns[0].attributes.class = "k-text-right";
      grid.setOptions({
        columns: columns
      });

Here is a small Dojo demo I prepared demonstrating this:

• https://dojo.telerik.com/iXoMAQOc

Let me know if you ahve any questions.

Regards,

Nikolay

 

[ashutosh]

thanks Nikolay, and sorry for not responding earlier.

but i am trying to add caption element to the rendered grid-table, just like below, this is required for accessibility compliance, can you tell me how can i access the "table" element post render?

 

<table>
    <caption>He-Man and Skeletor facts</caption>
    <tr>

[Nikolay]

Hello Ashutosh,

I recommend finding the desired Grid element via jQuery in the dataBound event handler. For example:

dataBound: function() {
          console.log($("#grid > .k-grid-header").find("table"))
        }
      });

• https://dojo.telerik.com/iXoMAQOc/3

Regards,

Nikolay