This is a migrated thread and some comments may be shown as answers.

Grid Title or Table Caption

3 Answers 373 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Treg
Top achievements
Rank 1
Treg asked on 16 Nov 2011, 11:28 AM
I am looking to utilize a grid title or the table caption to host html.
Any recommendations?

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 16 Nov 2011, 01:59 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sreejith
Top achievements
Rank 1
answered on 07 Mar 2019, 05:46 PM
This page is not accessible anymore: can we have the http://demos.kendoui.com/grid/from-table.html
0
Dimo
Telerik team
answered on 08 Mar 2019, 07:56 AM
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
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.
ashutosh
Top achievements
Rank 1
Iron
Veteran
commented on 30 Aug 2021, 07:48 AM

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
Telerik team
commented on 02 Sep 2021, 06:50 AM

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:

Let me know if you ahve any questions.

Regards,

Nikolay

 

ashutosh
Top achievements
Rank 1
Iron
Veteran
commented on 19 Sep 2021, 03:55 PM

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
Telerik team
commented on 22 Sep 2021, 10:38 AM

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"))
        }
      });

Regards,

Nikolay

 

Tags
Grid
Asked by
Treg
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Sreejith
Top achievements
Rank 1
Share this question
or