Telerik Forums
Kendo UI for jQuery Forum
11 answers
389 views

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

 

Raymond
Top achievements
Rank 1
 answered on 18 Aug 2016
3 answers
577 views
I would like to let user hide columns in the grid they don't want and order columns in the grid the way they want. Right now we have the feature to hide the column in the grid(through code) but user cannot do that. Is there a way to let the user hide the column with a cancel button so that I will save that column preference data in the database to hide that column for the user when he logs in the next time and also I would like to let the user order the columns in the grid by dragging and drop. Thanks
Dimo
Telerik team
 answered on 18 Aug 2016
1 answer
276 views

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 undefined

Code:

<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>

Rosen
Telerik team
 answered on 18 Aug 2016
3 answers
140 views

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

Vladimir Iliev
Telerik team
 answered on 18 Aug 2016
1 answer
106 views
We would like to launch our custom event creation form from each day on the month calendar view and pass through the selected day. I have looked through the examples and been unable to find an example of how we could add a create link/image to each day to be able to launch our form. Is there any examples on how to do this?
Vladimir Iliev
Telerik team
 answered on 18 Aug 2016
1 answer
257 views

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.

 

Vladimir Iliev
Telerik team
 answered on 18 Aug 2016
1 answer
240 views

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

Rosen
Telerik team
 answered on 18 Aug 2016
8 answers
704 views
I have searched far and wide and not found anything that will help me get what I am trying to do.  I modified an example to use the grid in popup, non-batch mode and that works.  What I am missing is that I need to add a upload input to the popup dialog so that I can select a single PDF file and pass that to the MVC action.

Before I was sending the user to a create page and there I was using the usual <input type="file"> with a model object using HttpPostedFileBase to bind to the input.  That works, but I want to change all my code to use popups to create a better user experience.

The problem is that most of the examples either put the Kendo upload widget inline or the popup examples don't work with an MVC action (at least I have not been able to get it to work).

Any help would be appreciated.  A single good example is normally worth gold, enough to get one moving forward again.

Thanks.
Dimiter Madjarov
Telerik team
 answered on 18 Aug 2016
1 answer
313 views

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?

Vladimir Iliev
Telerik team
 answered on 18 Aug 2016
9 answers
5.5K+ views
Hi,

I've got a dropdown and a grid. The idea is to change the data displayed in the grid depending on the selection made in the dropdown.
The datasource uses a json service. When the page is loaded the grid is filled with the data from the json service. After changing the selection in the dropdown the transport url is changed according to the alert. But capturing the network traffic reveals that the original url is called instead of the one with the new parameter. 

The html excerpt:
<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>


The script:
// 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);
});


Any suggestions?

Kind regards,
Tycho
T. Tsonev
Telerik team
 answered on 18 Aug 2016
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Drag and Drop
Application
Map
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
DropDownTree
ListBox
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
Styling
ColorPicker
Pager
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
Licensing
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? more
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?