Questions on Kendo UI for jQuery Forum

3 answers

218 views

how to augment templates of kendo menu control

I build a menu using a data source to supply the items. The data source is just an array of objects that have text, url, and items properties (for sub menus)

Subsequently, i want to select some menu item and apply some API function to it, like say enable.
To do so, I need to first find the particular menu item of interest. It would be nice if the menu item had an ID property. Its easy enough to add that property to my data source, but it doesn't carry through when the menu is rendered.

And, it is pretty easy to see the change that i would like to make to the menu's item template. Just add something like this:
#= item.id ? 'id=\"'+item.id+'\"' : '' #
to the item member of the templates object in kendo.menu.js

Problem is, the templates object is a function scoped "private" variable and I can't really see any good way to override or augment Menu to achieve this.

Any suggestions?

Thanks
roger

Menu

answered on 08 May 2013

1 answer

121 views

Handling NULL values

Hi,

I've got a snipplet of C# razor syntax below which builds up columns for a 12 month period.

The Month1-12 fields can be null.
I would like to be able to sort on Month<number>.EHR.

For example I want to sort on month 'Month12.EHR'.
Because Month12 is null, the grid continuously looks like it's loading.

How am I able to sort the grid on columns that have null?

@for (int i = 12; i > 0; i--)

{

<text>

{

field: 'Month@(i).EHR',

title: 'Month@(i)',

template: '#if (Month@(i) != null) {#$#:Month@(i).EHR#.00 (#:Month@(i).TotalTime#)#} else {# #:"--"# #} #',

width: 20

},

</text>

}

Thanks, Mike.

Grid

answered on 08 May 2013

2 answers

56 views

Q on SharedDatasource demo

Hello!
I'm trying to figure how http://demos.kendoui.com/web/datasource/shared-datasource.html works.
I copied code to my project, provided full url to transport object:
read: {
url: "http://demos.kendoui.com/content/web/datasource/internet-users.json",
dataType: "json"
}
};

Problem is that chart and grid are empty (see UIScreenShot.png).
What could be wrong here?
Thanks!

Kendo UI version:13.1.320
OS: win2008
exact browser version: FF 20.0.1

Data Source

answered on 07 May 2013

2 answers

144 views

Chart unable to render Json string from asp.net

Hi Kendo Team,
I received a funny behaviour of KendoChat (please refer to the attachment) . Need help in what i have done wrong? I am using asp.net 3.5 framework and below are my code:

KendoUI.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web.Services;

public partial class KendoUI : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

[WebMethod]

public static string GetJson()

{

System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();

List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();

Dictionary<string, object> row;

for (int i = 0; i <= 5; i++) {

row = new Dictionary<string, object>();

row.Add("country", "Singapore");

row.Add("year", (2000 + i).ToString() );

row.Add("value", 50 + i);

rows.Add(row);

}

return serializer.Serialize(rows);

}

KendoUI.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="KendoUI.aspx.cs" Inherits="KendoUI" %>

<!doctype html >

<html>

<head runat="server">

<link href="KendoCSS/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />

<script src="KendoJs/jquery.min.js" type="text/javascript"></script>

<script src="KendoJs/kendo.dataviz.min.js" type="text/javascript"></script>

<script src="KendoJs/kendo.data.min.js" type="text/javascript"></script>

</head>

<body>

<form id="form1" runat="server">

<div>

<div class="chart-wrapper">

<div id="chart" ></div>

<div id="test" />

</div>

</form>

</body>

<script>

$(document).ready(function () {

$.ajax({

type: "POST",

url: "KendoUI.aspx/GetJson",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (data) {

if (data != "") {

$("#test").html(internetUsers);

$("#chart").kendoChart({

theme: $(document).data("kendoSkin") || "default",

dataSource: {

data: internetUsers

},

title: {

text: "Internet Users"

},

legend: {

position: "bottom"

},

seriesDefaults: {

type: "line",

labels: {

visible: true,

format: "{0}%"

}

},

series: [{

field: "value",

name: "Singapore"

}],

valueAxis: {

labels: {

format: "{0}%"

}

},

categoryAxis: {

field: "year"

}

});

}

})

});

</script>

</html>

General Discussions

answered on 07 May 2013

1 answer

273 views

any/all operators for filtering using DataSourceRequest - many to many

I have an Alert DataSource i have a listview bound to.
Alerts many to many with Tags
I need a way to filter using the any operator. Is this supported in: DataSourceRequest?

how would i define the json if supported or is there a workaround?
{
     "field": "Tags",
                    "operator": "eq",
                   "value": 'Marketing'
}

related:
http://stackoverflow.com/questions/9278044/wcf-data-services-many-to-many-with-filter

Data Source

answered on 07 May 2013

2 answers

175 views

Image files called sprite@2x.png

Hi,
Is there any reason why this file needs to have an @ symbol in it?
It causes a problem when trying to deploy in a SharePoint app. SharePoint doesn't like files with an @ symbol in it.
Many thanks

General Discussions

answered on 07 May 2013

2 answers

53 views

How do you open time component of datetimepicker using keyboard?

Hi,

How do you open the timepicker in the datetimepicker using the keyboard?

According to the following link:
http://demos.kendoui.com/web/datetimepicker/navigation.html

you can open the date picker using alt+down arrow, but how do you access the timepicker component of the datetimepicker using the keyboard?

Thanks

DatePicker

answered on 07 May 2013

1 answer

206 views

Splitter and percentages totaling more than 100%

I have the need for a 7 column splitter where only 4 columns are visible at any point. I have set the overflow to hidden on the parent container and will control horizontal scrolling programatically as needed.

Is this a bug or is this an unsupported use-case? It appears that everything is calculated properly except for the width. I'm going to try fixing it after creation as well as after the resize event fires. Your help would be appreciated.

$('#target').kendoSplitter({

orientation: 'horizontal',

panes: [

{ collapsible: false, resizable: false, size: '25%' },

{ collapsible: false, resizable: false, size: '25%' }

]

});

The 7th column gets rendered with a width of 0. This is probably a bug where the splitter doesn't expect for the columns to be greater than 100%. Here's what gets rendered:

<div id="target" class="k-widget k-splitter" data-role="splitter">

<div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 0px;">1</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 300px;"></div>

<div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 307px;">2</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 607px;"></div>

<div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 614px;">3</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 914px;"></div>

<div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 921px;">4</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 1221px;"></div>

<div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 1228px;">5</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 1528px;"></div>

<div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 300px; height: 300px; left: 1535px;">6</div><div data-marker="f3ca4302" class="k-splitbar k-state-default k-splitbar-horizontal k-splitbar-static-horizontal" tabindex="0" role="separator" aria-expanded="true" style="height: 300px; left: 1835px;"></div>

<div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 0px; height: 300px; left: 1842px;">7</div>

</div>

The most important being the last

<div class="k-pane k-scrollable" role="group" style="position: absolute; top: 0px; width: 0px; height: 300px; left: 1842px;">7</div>

Splitter

answered on 07 May 2013

1 answer

826 views

How to set min value for Kendo web grid numeric field filter?

Hi,

I am using KendoUi web grid with MVC. I have a integer column. I need to prevent user to enter negative values in the filters from the numericdropdown.

Please guide me how can I achieve this?

Please refer attached image for clear idea what I want to do.

Grid

answered on 07 May 2013

0 answers

62 views

How to set min value for Kendo web grid numeric field filter?

I am using KendoUi web grid with MVC. I have a integer column. I need to prevent user to enter negative values in the filters from the numericdropdown.

Please guide me how can I achieve this?

Grid

asked on 07 May 2013