Questions on Kendo UI for jQuery Forum

1 answer

190 views

Accessibility: Menu feedback and keyboard nav issues

Hello,

Using the Kendo Menu demo (copied into this dojo: http://dojo.telerik.com/@richm/UgAPe), I observed the following using the latest version of NVDA:

1. In Chrome, navigating to a submenu doesn't announce the submenu item, but 'list' instead. E.g. in the dojo example, use the keyboard to navigate to Furniture, then right arrow. NVDA announces, "list", though the visual focus is on the first sub-menu element ("Tables and Chairs"). Pressing down arrow properly announces the second item, "Sofas".

The user will not know the first item in the list unless the navigate away and back to it. It is also a bit confusing that they are now on a submenu.

2. Same scenario, but in Firefox. Navigate to Furniture and select right-arrow. The sub-menu opens, but NVDA's focus remains on "Furniture", and NVDA again announces the furniture item. Pressing right arrow again closes the entire menu. If instead down-arrow is pressed, suddenly Sofa is selected.

Please advise if I should open bugs, and if any workarounds are available.

Thank you!

Rich

Menu

answered on 09 May 2017

1 answer

82 views

java.lang.NoSuchMethodError com.kendoui.taglib.GridTag.setExcel(Lcom/kendoui/taglib/grid/ExcelTag;)V

I am getting below error, I am not sure why this happening. Please help

java.lang.NoSuchMethodError: com.kendoui.taglib.GridTag.setExcel(Lcom/kendoui/taglib/grid/ExcelTag;)V

Grid

answered on 09 May 2017

5 answers

393 views

Cascading Dropdownlist

Please help, I am trying to implement a cascading dropdownlist on my app, but it does not work. Please help me what is it that I am not doing right here:

My controller

namespace TelerikMvcDropdownMunicipality.Controllers

{

using System.Linq;

using System.Web.Mvc;

using TelerikMvcDropdownMunicipality.Models;

using System.Data;

using System.Data.Entity;

public partial class MunicipalController : Controller

{

public ActionResult Index()

{

return View();

}

public JsonResult GetCascadeDistricts()

{

var municipality = new MunicipalityEntities();

return Json(municipality.Districts.Select(d => new { DistrictId = d.DistrictId, DistrictName = d.DistrictName }), JsonRequestBehavior.AllowGet);

}

public JsonResult GetCascadeLocals(int? districts)

{

var municipality = new MunicipalityEntities();

var locals = municipality.Locals.AsQueryable();

if (districts != null)

{

locals = locals.Where(l => l.DistrictId == districts);

}

return Json(locals.Select(l => new { LocalId = l.LocalId, LocalMunName = l.LocalName }), JsonRequestBehavior.AllowGet);

}

public JsonResult GetCascadeTowns(int? locals)

{

var municipality = new MunicipalityEntities();

var towns = municipality.Towns.AsQueryable();

if (locals != null)

{

towns = towns.Where(t => t.LocalId == locals);

}

return Json(towns.Select(t => new { TownId = t.TownId, TownName = t.TownName }), JsonRequestBehavior.AllowGet);

}

}





and my view is:




@{
    ViewBag.Title = "Index";
}
 
<div class="demo-section" style="width: 250px;">
 
    <h2>Municipalities</h2>
    <p>
        <label for="districts"> Districts</label>
        @(Html.Kendo().DropDownList()
              .Name("districts")
              .HtmlAttributes(new { style = "width:200px" })
              .OptionLabel("Select district...")
              .DataTextField("DistrictName")
              .DataValueField("DistrictId")
              .DataSource(source =>
               {
                  source.Read(read =>
                  {
                     read.Action("GetCascadeDistricts", "ComboBox");
                  });
             })
          )
                               
        
    </p>
    <p>
        <label for="locals">Locals</label>
        @(Html.Kendo().DropDownList()
        .Name("locals")
        .HtmlAttributes(new { style = "width:200px" })
        .OptionLabel("Select local...")
        .DataTextField("LocalName")
        .DataValueField("LocalId")
        .DataSource(source =>
                        {
                            source.Read(read =>
                                {
                                    read.Action("GetCascadeLocals", "ComboBox")
                                        .Data("filterLocals");
                                        })
                                .ServerFiltering(true);
                        })
                        .Enable(false)
                        .AutoBind(false)
                        .CascadeFrom("districts")
        )
        <script>
            function filterLocals() {
                return {
                    districts: $("#districts").val()
                };
            }
        </script>
    </p>
    <p>
        <label for="towns">Towns</label>
        @(Html.Kendo().DropDownList()
              .Name("towns")
              .HtmlAttributes(new { style = "width:200px" })
              .OptionLabel("Select towns")
              .DataTextField("TownName")
                .DataValueField("TownId")
                                .DataSource(source =>
                                {
                                    source.Read(read =>
                                        {
                                            read.Action("GetCascadeTowns", "ComboBox")
                                                .Data("filterTowns");
                                        })
                                        .ServerFiltering(true);
                                })
                                .Enable(false)
                                .AutoBind(false)
                                .CascadeFrom("towns")
        )
        <script>
            function filterTowns() {
                return {
                    towns: $("#filterTowns").val()
                };
            }
        </script>
    </p>
</div>
 
<script>
    $(document).ready(function () {
        var districts = $("#districts").data("kendoDropDownList"),
            locals = $("#localMun").data("kendoDownList"),
            towns = $("#towns").data("kendoDropDownList");
 
        $("#get").click(function () {
            var districtInfo = "\nDistricts: { id: " + districts.value() + ", name: " + districts.text() + " }",
                localInfo = "\nLocal: { id: " + locals.value() + ", name: " + locals.text() + " }",
                townInfo = "\nTown: { id: " + towns.value() + ", name: " + towns.text() + " }";
 
            alert("Town details:\n" + districtInfo + localInfo + townInfo);
        });
    });
</script>

DropDownList

answered on 09 May 2017

5 answers

886 views

Cascading dropdown selection is not working.

Currently I'm using Kendo UI 2015 Q1 SP1 in my project. The cascading function is working fine.

demo with 2015-Q1-SP1

When I update with the latest version it is not working as expected. The 2nd dropdown is rendering only, the user select the first drop down.

demo with latest version

Note: I'll be having sorting operation in the controller, So I've to bind as "k-options".

Can you assist to fix this bug.

DropDownList

answered on 09 May 2017

1 answer

353 views

Gantt grid pagination/filterable/template

Hello! I have seen that grid in kendo gantt widget has very few features, compared with kendo grid, so my question is:

Is there some way to get at least some features of kendo grid like:
- Pagination
- Column filters
- Column template

If not, is there any plan in the future to add these features?

Thanks for the reply

Gantt

answered on 09 May 2017

1 answer

1.2K+ views

Kendo scheduler change start time when the date changes in navigation bar

Hello,

I am using kendo scheduler in my project. I am using time line view and we have a requirement where I have to set the start time of the scheduler as 12:00 PM on page load. When I navigate to the next date the time line should start from 12:00AM again and not 12:00PM. Currently once I set the start time, all other days also start with the same start time.

Kindly suggest how can I achieve the same.

Thanks & Regards

Shajina

Scheduler

answered on 09 May 2017

1 answer

1.1K+ views

[Solved] Loading not showing

Hi,

I am using a dropDownList to show some values in order to filter results on a grid.

I have use the 'change' event to see when the grid must be updated

$('#view-mode-selector').kendoDropDownList({
    change: onModeSelectorChange
});

in the method onModeSelectorChange I am trying to show the progress bar with

kendo.ui.progress($("#grid), true);

and at the end of the method when all is done I have

kendo.ui.progress($("#grid), false);

But the data loads and I do not see the progress bar.

If I remove the last statement (the 'false' one) I can see the progress bar, but it never disappears.
If I debug, It appears and disappears when the data is ready.

It is not an issue of the data loading too fast, sometimes the data takes 5 seconds to be ready.
The data is already in the browser, I am just showing or hiding columns.

Kendo version v2016.2.714

Thanks

DropDownList

answered on 09 May 2017

1 answer

144 views

How do i declare common options in MVVM for the grid?

Hi,

Using non-MVVM the grid has the setOptions function. There is no equivalent in MVVM. I want to create options that are standard on every grid across every one of my pages without having to declare those options every time.

Things like filterable, sortable, etc. need to be the same across all of my grids and declaring data-sortable="true" on every page seems pointless and can lead to mistakes. How do I do this in MVVM? In non-MVVM I could just have a central function like this:

var setupStandardGridOptions = function(target) {
if (target) {
$(target).data("kendoGrid").setOptions({
navigatable: true,
filterable: true,
sortable: true,
resizable: true,
selectable: true,
pageable: {
pageSize: 20,
pageSizes: [20, 50, 100],
numeric: true
}
});
}
};

If I call this method in the init() of the view model it does not work. I can call it AFTER the view model is bound outside of the view model but any jquery like that for specific controls in the init() of the view model does no work. How do I set the options INSIDE the view model itself in either a single field or in a method during the init()?

Grid

answered on 09 May 2017

4 answers

580 views

[Solved] Check whether current AutoComplete value is in suggestions

Hi,

I would like to be able to hook the 'change' event to be able to test whether the current AutoComplete value would be in the suggestions. Since the widget already searched for the value to see if it is in suggestions I would prefer to be able to check the result of that search. Something like calling kendoAutoComplete.search() but not have it affect the UI - just tell me if it was found or not. Is that possible?

I want to be able to alter the UI if the user has entered a value that is not detected in the suggestions to let them know it is not a valid value, and it seems silly to have to manually see if the value is in the datasource (and handle the filter variants 'startsWith' and 'contains') when that is already being done by the widget. So, I'm just looking to detect whether the search done by the widget found the value in suggestions or not.

AutoComplete

answered on 09 May 2017

1 answer

1.9K+ views

When passing two parameters on Client Template javascript function i get this error Uncaught SyntaxError: missing ) after argument list

This is my code on my Client Template

column.Bound(c => c.DeclarationsSigned)
.ClientTemplate(
"# if(DeclarationsSigned) { #" +
"# if(DeclarationsSignedByAssessor) { #" +
"<label style='color:red;'>Yes</label>" +
"# }else {#" +
"<label style='color:green;'>Yes</label>" +
"# } #"+
"# } else { #" +
"<label style='color:red;' >No</label>" +
//"< a href = 'javascript: void(0)' title = 'Signed Declaration' class = 'grid-action-inline' onclick =\" signOffDeclaration(<#=ProgramAssignmentId#>,<#=LearnerFullName#>)\"><span class='glyphicons glyphicons-pencil'></span></a>" +
"<a href='javascript: void(0)' class = 'grid-action-inline' title = 'Signed Declaration' onclick = 'signOffDeclaration(#= ProgramAssignmentId # , #= LearnerFullName #)'><span class = 'glyphicons glyphicons-pencil' ></span></a>" +
"# } #").Width(50);

And this is my function

how do i solve this error

Grid

answered on 08 May 2017