We are trying to make our applications compliant with the Web Content Accessibility Guidelines (WCAG) (https://www.w3.org/TR/WCAG20/). One of the requirements is that buttons have text associated with them.
When I created a grid (markup provided below), it fails WCAG compliance because the filter buttons in the column headers do not have text associated with them. I found a way to add the text into the span using javascript but it seems like there should be a better way.
Then I noticed that your demo grid (http://demos.telerik.com/kendo-ui/grid/filter-menu-customization) has the text property set. If I inspect the markup for one of the filter buttons in your demo, I see this:
<a class="k-grid-filter" href="#" tabindex="-1"><span class="k-icon k-filter">Filter</span></a>
So my question is...how did the text property of the span get the value "Filter"? And how can I accomplish that in my grid defined as follows:
@(Html.Kendo().Grid<Staff.Models.Employee>()
.Name("grdEmployees")
.Columns(columns =>
{
columns.Bound(p => p.FirstName).Width("9%").Title("First Name").Filterable(f => f.Extra(false).Operators(o => o.ForString(s => s.Clear().Contains("Contains").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to").StartsWith("Starts with").EndsWith("Ends with"))).Cell(cell => cell.Operator("Contains")));
columns.Bound(p => p.LastName).Width("9%").Title("Last Name").Filterable(f => f.Extra(false).Operators(o => o.ForString(s => s.Clear().Contains("Contains").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to").StartsWith("Starts with").EndsWith("Ends with"))).Cell(cell => cell.Operator("Contains")));
columns.Bound(p => p.OfficeDesc).Width("25%").Title("Office").MinScreenWidth(900).Filterable(f => f.Extra(false).Operators(o => o.ForString(s => s.Clear().Contains("Contains").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to").StartsWith("Starts with").EndsWith("Ends with"))).Cell(cell => cell.Operator("Contains")));
columns.Bound(p => p.WorkUnitDesc).Width("15%").Title("Work Unit").Filterable(f => f.Extra(false).Operators(o=> o.ForString(s => s.Clear().Contains("Contains").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to").StartsWith("Starts with").EndsWith("Ends with"))).Cell(cell => cell.Operator("Contains"))).MinScreenWidth(900);
columns.Bound(p => p.EMail).Width("18%").Title("Email").Filterable(f => f.Extra(false).Operators(o=> o.ForString(s => s.Clear().Contains("Contains").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to").StartsWith("Starts with").EndsWith("Ends with"))).Cell(cell => cell.Operator("Contains")));
columns.Bound(p => p.Phone).Width("8%").Title("Phone").Filterable(f => f.Extra(false).Operators(o => o.ForString(s => s.Clear().Contains("Contains").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to").StartsWith("Starts with").EndsWith("Ends with"))).Cell(cell => cell.Operator("Contains")));
columns.Bound(p => p.Title).Width("16%").Title("Title").Filterable(f => f.Extra(false).Operators(o=> o.ForString(s => s.Clear().Contains("Contains").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to").StartsWith("Starts with").EndsWith("Ends with"))).Cell(cell => cell.Operator("Contains"))).MinScreenWidth(900);
})
.ClientRowTemplate(
"<tr >" +
"<td >#: FirstName# </td>" +
"<td >#: LastName# </td>" +
"<td >#: OfficeDesc #</td>" +
"<td >#: WorkUnitDesc #</td>" +
"<td ><a href='mailto:#: EMail #' title='Send Email' alt='Send Email' >#: EMail #</a></td>" +
"<td style='white-space:nowrap;' >#: Phone #</td>" +
"<td >#: Title #</td>" +
"</tr>"
)
.ClientAltRowTemplate(
@"<tr class=""alt-row"" >" +
"<td >#: FirstName# </td>" +
"<td >#: LastName# </td>" +
"<td >#: OfficeDesc #</td>" +
"<td >#: WorkUnitDesc #</td>" +
"<td ><a href='mailto:#: EMail #'>#: EMail #</a></td>" +
"<td style='white-space:nowrap;' >#: Phone #</td>" +
"<td >#: Title #</td>" +
"</tr>"
)
.Pageable()
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Staff_Read", "Staff"))
.Filter(f => f.AddRange(ViewBag.filters))
)
)
Thanks,
Ray

Hello
I'm trying to create kendoGrid with server paging but got the folowing error:
kendo.grid.min.js:25Uncaught TypeError: Cannot read property 'deepExtend' of undefinedCode:
<div id="example"> <div id="grid"></div></div><script type="text/javascript" language="javascript" class="init"> $(document).ready(function() { $("#grid").kendoGrid({ dataSource: { type: "odata", transport: { read: "derived_roles_service.jsp" }, schema: { model: { fields: { description: { type: "string" } name: { type: "string" } } } }, pageSize: 20, serverPaging: true, serverFiltering: true, serverSorting: true }, height: 550, filterable: true, sortable: true, pageable: true, columns: [{ field: "name", title: "name" }, { field: "description", title: "description" } ] }); });</script>I would like to turn off the scheduler's footer. I see in the documentation that you can do this through javascript init, however I would like to do it through MVVM bindings. I tried to do data-footer="false", but nothing happens. Please advise.
Dojo demonstrating how footer still show even with data-footer set to false: http://dojo.telerik.com/UfoXO
We have created our own event creation form external to the Scheduler control. When we click save on the form we would like the event to automatically appear on the scheduler, is there a javascript function to be able to add the event or refresh the scheduler? I have read that there is an observable data option in the scheduler, would this be the mechanism? Is there any code examples of this being used?
Finally, would this work well with the high data volume query and the OData service?
Many thanks.
I'm creating a kendo-grid using grid options object like shown in the example: http://i.stack.imgur.com/EeNeb.jpg
The datasource returns all the fields including the comment (colored in orange). So each record in the table has a few constant cells (td) and another line below that starts from the second <td> until the end of the <tr>.
Is there a way to use the kendo-grid and add the additional comment line for each record ?
Thanks,
Eddie
The scheduler performs well with the small number of events we have been rendering using the component. However the volume of events will increase for our use case considerably over time.
We are currently using an OData feed to retrieve the events. Is there any guidance on how best it would be to render events when dealing with a high volume of data?
Should we be loading data per month per user, and then when the user moves to the next month it requests further data? As part of this has any performance testing being carried out on the scheduler to understand what volume of data the scheduler works best with, where performance may start to degrade?
<input id="ddlFacility" /><div id="SiteOverviewTabStrip"> <ul> <li class="k-state-active">Regional dashboard</li> <li>Production summary</li> </ul> <div class="placeholder table"> <div id="regionalGrid"> </div> </div> <div class="placeholder graph"> <div id="productionGrid"> </div> </div></div>// bind to the change event and update the data source url var ddlFacility = $("#ddlFacility").data("kendoDropDownList");ddlFacility.bind("change", function () { var grid = $("#regionalGrid").data("kendoGrid"); grid.dataSource.options.transport.read.url = "/_layouts/SharePoint.Services/ProxyService.svc/GetFacilityRegionalData?origin=" + this.value(); grid.dataSource.read();
grid.refresh(); alert(grid.dataSource.options.transport.read.url);
});