Questions on Kendo UI for jQuery Forum

5 answers

367 views

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

865 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

333 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

134 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

562 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

1 answer

166 views

Weird CSS in ButtonGroup demo

In the single example for the ButtonGroup demo there is a bit of static CSS which is overriding any of the themes:

.k-button-group .k-button { background-color: rgb(44, 35, 43);}

I recommend removing it so users can see the theme variances properly.

ButtonGroup

answered on 08 May 2017

3 answers

934 views

Kendo UI Grid Fillter/Pagination Dropdown

Hi there,

I have a few grids in the AngularJS (v.1.x) app where i face issue is in Pagination as well as Filter Dropdown / List. When there is a grid in the page as the last element of a page following problems occur :

1) Grid Filter

Once i filter any column and let say no rows are displayed because it's not matching the data as per the filter. Now Grid height is smaller than before and if i click on filter again (filter list height is larger than grid size in this case), it's flickering.

If i scroll a bit the page then it works fine, it renders list in top position instead of bottom. Unless I scroll, problem is not solved.

2) Grid Pagination Dropdown

It similar to 1) only difference is in reproducing. Here i am changing page size from 300 to 10 and trying again to do the same but starts flickering. Once i scroll it solves the problem.

Summary :

Such scenarios where grid is end of page this problem occurs and in my application i have used lots of grid in this scenarios.

AngularJS Version : 1.5.5
Kendo Version : 2016.1.412
jQuery Version : 1.9.1 / 2.x (tried both)

Any help from Kendo Team will be greatly appreciated!

Thanks,

Hardik

Grid