Questions on Kendo UI for jQuery Forum

4 answers

553 views

[Solved] Posting checkboxes from treeview to MVC controller

Hi - Just getting started with Kendo and need to post the selected checkboxes from a treeview to an MVC controller. I was able to get the treeview rendering with little fuss but am having problems getting the selected checkboxes to post. The parameter they should map to in my controller action is always null. Below is what the HTML looks like when my view renders:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width" />

<title>Redacted</title>

<link href="/Content/bootstrap.css" rel="stylesheet" />

<link href="/Content/site.css" rel="stylesheet" />

<script src="/Scripts/jquery-1.9.1.js"></script>

<script src="/Scripts/jquery.validate.js"></script>

<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

<script src="/Scripts/bootstrap.js"></script>

</head>

<body>

<link href="/Assets/css/kendo/kendo.common.min.css" rel="stylesheet" />

<link href="/Assets/css/kendo/kendo.default.min.css" rel="stylesheet" />

<script src="/Assets/js/kendo/kendo.core.min.js"></script>

<script src="/Assets/js/kendo/kendo.userevents.min.js"></script>

<script src="/Assets/js/kendo/kendo.data.min.js"></script>

<script src="/Assets/js/kendo/kendo.treeview.min.js"></script>

<div class="container">

<h1>Batch Reporting</h1>

<div class="accordion" id="reports">

<div class="accordion-group">

<div class="accordion-heading">

<a class="accordion-toggle" data-toggle="collapse" data-parent="reports" href="#dataExtract">Data Extract</a>

</div>

<div id="dataExtract" class="accordion-body collapse">

<div class="accordion-inner">

<form action="/Report/DataExtract" method="post">

<div style="height: 300px; overflow-y: scroll">

<div id="treeview"></div>

</div>

<div>

<br />

<button class="btn " type="submit">Submit</button>

</div>

</form>

</div>

<script type="text/javascript">

$("#treeview").kendoTreeView({

checkboxes: {

checkChildren: true,

name: "checkedItem[]"

},

dataSource: [

{

"id": 13, "hasChildren": true, "text": "csd", "items": [

{

"id": 25, "hasChildren": true, "text": "School", "items": [

{ "id": 39, "hasChildren": false, "text": "Class 1", "items": null, "expanded": false },

{ "id": 48, "hasChildren": false, "text": "Class 2", "items": null, "expanded": false },

{ "id": 90, "hasChildren": false, "text": "Class 3", "items": null, "expanded": false },

{ "id": 85, "hasChildren": false, "text": "Class 4", "items": null, "expanded": false },], "expanded": false

}], "expanded": true

}]

});

</script>

</body>

</html>

The controller action looks like this:

public ActionResult DataExtract(string[] checkedItems)

{

// Do some really important stuff here...

return RedirectToAction("Index", "Home");

}

Any suggestions as to what I need to do to get the array of selected values would be much appreciated.

Thanks!

TreeView

answered on 18 Jul 2013

2 answers

231 views

[Solved] UID undefined in datasource after a new page request

I have a KendoMobileListView with items loaded by endless scroll, with server paging and filtering. Clicking an item leads to a remote mobile view containing its details. The problem is UID seems to get lost/undefined for the previous page items in listview's data source, after a new page has been loaded in the listview.

Found my answer, it seems this is an expected behavior.
http://kendouimobile.com/forums/framework/data-source/getbyuid-returns-undefined-unexpectedly.aspx

ListView (Mobile)

answered on 18 Jul 2013

1 answer

233 views

How can I turn off the slide effect from the tooltip in Kendo.Chart()

Hi,

The new set of DataViz controls are looking good, but there's still way too much animation configured by default. Our users tend to like displays to be rendered as rapidly as possible. I've managed to turn off the overall animation for the chart in general, but can't quite see how to turn off the slide animation for the tooltip. Perhaps this is a css level change? People will definitely want to get rid of this btw. Having the tooltip jump from one point to another on mouse movement is absolutely fine.

Thanks,
George

Charts

answered on 18 Jul 2013

6 answers

1.6K+ views

Weird problem with Autocomplete

I'm trying to make an autocomplete and I'm using Visual Studio for debugging. The autocomplete does ask for data, my code returns it then I get this from Visual Studio:

Microsoft JScript runtime error: Unable to get value of the property 'toLowerCase': object is null or undefined

function anonymous(d, __f, __o) {

return (d.Title.toLowerCase().lastIndexOf('key', 0) == 0)

}

I'm guessing it is due to d.Title being undefined... BTW: key above was the search word typed into the autocomplete.

I'm creating the autocomplete like this:

// Search box.

$("#searchBox").kendoAutoComplete({

minLength: 3,

dataTextField: "Title", //JSON property name to use

dataSource: new kendo.data.DataSource({

type: "json", //Specifies data protocol

pageSize: 10, //Limits result set

transport: {

read: "/Search",

parameterMap: function() {

return { title: $("#searchBox").data("kendoAutoComplete").value() };

}

})

});

Here is the data returned:

[{"Title":"Doctor Who: The Trial of a Time Lord"},{"Title":"Doctor Who: The Key to Time"},{"Title":"Doctor Who: The Time Meddler"},{"Title":"Doctor Who: The End of Time"}]

AutoComplete

answered on 18 Jul 2013

10 answers

599 views

"Destroy"/Totally remove a 'View' if possible

Hi,

This is my first time using Kendo UI and am considering using for a new level project mid year :)
I am wanting to see if there is a way to 'destroy' a view -

At the moment I have a view:

<div data-role="view" data-stretch="true" id="map2" data-title="Map" data-show="startMap">

MAP GOES HERE
</div>

The logic grabs data to a local array and alters the map, however the view is cached once it is loaded
I have tried to use data-show but that crashes, I would like to know a way to totally delete a view if possible?
Destroy() did not do much for me.

If you have any other similar JSFiddle snippets I would be very greatful

Thanks

Daz.

General Discussions

answered on 18 Jul 2013

1 answer

70 views

[Solved] UI issue on Selection in IE10

Hello,

http://demos.kendoui.com/web/scheduler/selection.html

Steps to reproduce the issue:

1. Open the above link.
2. Select event which have 6/13/2013 9:00 AM (Evaluations).
3. Issue is Partially selection color -> Please check this screenshot for more information.

Thanks,
Jayesh Goyani

Scheduler

answered on 18 Jul 2013

1 answer

151 views

Custom download problem

Hi,

The custom download builder is not working: http://www.kendoui.com/custom-download.aspx

Is it only for me?

General Discussions

answered on 18 Jul 2013

2 answers

337 views

Problem in Grid Footer Rendering

Hi,
I am facing a problem in rendering of Grid's footer.The Grid Footer Rendered wrongly by default , on opening fresh it looks attachement "Error_withoutData_1.JPG" but if any Data is inserted within the Grid only then it aligns Correctly as expected like in attachement "withData.JPG" .I had adjusted with the height attribute in the grid but no luck.

$("#DDGrid")
.kendoGrid(
{
dataSource : DD_DataSource,
navigatable : true,
pageable : true,
height : 335,
.....});

I am using kendoui web,Framework .Anyone Pls help me out .,Thanks in Advance .
Regards,
Winds

Grid

answered on 18 Jul 2013

1 answer

164 views

[Solved] Reverse direction of linear gauge (vertical), moving from top to bottom

As the title reads, is it possible to reverse the direction of a vertical linear gauge, so it starts to move from top to bottom? My scenario is the following:
I'm feeding the gauge with real time depth data, and I have defined top / surface to be at 0. When moving deeper, I'd like the pointer to move downwards towards the bottom of the gauge.

It moves fine with the real time data now, but in the wrong direction :)

Any suggestions?

<script>

function createGauges() {

$("#depthBar").kendoLinearGauge({

pointer: {

value: 0,

shape: "arrow"

},

scale: {

majorUnit: 1000,

minorUnit: 500,

min: 0,

max: 12000,

vertical: true,

}

});

}

$(document).ready(function() {

createGauges();

});

</script>

LinearGauge

answered on 18 Jul 2013

1 answer

1.6K+ views

[Solved] No borders in grid, but on Input

Using this custom CSS I am able to remove all the borders on a gird. Works great.

/* Grids can't have borders */
.k-grid, .k-grid * { border: 0 !important; }

the problem is that it removed borders from all the elements in the grid. How can I edit the CSS so that only the Gird has all the borders and lines removed, but all the child controls still have their borders?

Grid

answered on 18 Jul 2013