Questions on Kendo UI for jQuery Forum

1 answer

87 views

Grid height

Hello,
I am wondering if it is possible to have a grid (inside a splitter) that spans the whole height of the page with just css?

I have attached a sample project, and what I would like to have happen is for the header to be right at the top of the page and the footer at the bottom regardless of the size of the browser window.

Thanks,

Grid

answered on 01 Apr 2014

6 answers

58 views

ToolTip Color 2014 Q1

It looks like the tooltip color behaviour may have changed between Q3 2013 and Q1 2014.

I have many column charts that use series.colorField to set the color of each column. The series color for these charts is irrelevant since each colorField is set for each column/point. The tooltips have always matched the column color, but since I upgraded the tooltips are all the same color now and match the series.

How can I have the tooltip colors for each column match the column/point again? Basically, how can I have my tooltips match the colorField value?

Kevin

Charts

answered on 01 Apr 2014

9 answers

852 views

Grid event: Sort, Group

Hi there,

I looked through the docs and the forums, but is unable to find any hint about this... for KendoUI Grid, are we able to listen to sort and group events? If so, how could we do this?

Thank you!

Grid

answered on 01 Apr 2014

2 answers

1.0K+ views

Append Close button to Window

Using javasript I programatically create my dialogs as show below. In the JavaScript I want to append a Close button to the bottom of the content of each dialog. Is this possible?

function kendoDialogCreate(dialogName) {

var dialog =

$("#" + dialogName).kendoWindow({

width: "800px",

title: "",

modal: true,

actions: ["Custom", "Close", "Minimize", "Maximize"],

visible: false,

close: kendoDialogDeactivate,

refresh: kendoDialogRefresh,

error: kendoDialogError

});

//Add close button here???

}

Window

answered on 01 Apr 2014

2 answers

111 views

Truncated chart label in Q1 2014

Hi,

We have found Kendo Q1 2014 version renders chart labels differently for a column chart. If you look at my example link below the label is truncated behind the charts maximum Y axis.

http://trykendoui.telerik.com/Osiy

If you change the library to Q4 SP2 2013 and hit run button the label sit above the chart and displays correctly.

Is option we can use to resolves this issue?

Thanks,

Charts

answered on 01 Apr 2014

1 answer

1.4K+ views

How to set Checkbox by default checked in treeview

Hi

I am trying to set treeview with checkbox and there are some check box are by default checked , here my data source value:-
[{"id":12,"Name":"Shirts","hasChildren":false,"Checked":true}
,{"id":13,"Name":"Jeans","hasChildren":false,"Checked":false},
{"id":14,"Name":"Shoes","hasChildren":false,"Checked":true},
{"id":15,"Name":"Apparel accessories","hasChildren":false,"Checked":false}]

and my view page code:--

$(document).ready(function() {
                        $("#category-treeview").kendoTreeView({
                            dataSource: categories,
                            dataTextField: "Name",
                            checkboxes: true
                    });
                });

but i no one checkbox is selected why?

Can any advice how to solve this?

Regards,
vinit

General Discussions

answered on 01 Apr 2014

1 answer

103 views

Listview datasource

I need to populate a data-source with a post to serverside script the data is returned in JSON format the parameters are similar to the post below:-

$.post("../Services/MeterType.aspx",

{

PC: $('#PC').val(),

MTC: $('#MTC').val(),

LLF: $('#LLF').val(),

REC: $('#REC').val()

}

});

The query is to large to perform without these parameters

Please Help also I know there is very little info but as its quite a simple thing I am looking to do hopefully it should be enough.

ListView

answered on 01 Apr 2014

1 answer

371 views

Mobile List View Header Templates

Ok, I have looked at pretty much every demo and every post on Stack Overflow. Nothing I do seems to work with this.

I am using the AppBuilder simulator to look at my app as it would display on avrious devices. I ahve a few list views that show data in the form of a table, and I need that table to have a header row. I thought it would be simple, but the header never gets bound. It shows it there in my debug view of the page, but it is an empty div. Below is my relevant Markup code:

<body>

<div data-role="view" id="summary"

data-init="mobileListViewDataBindInit"

data-title="Summary All Parks"

data-layout="summarybinding">

<ul data-role="listview" id="summarylistview"></ul>

</div>

<div data-role="view" id="hourly"

data-title="Hourly Detail"

data-layout="hourlybinding">

<ul data-role="listview" id="hourlylistview" data-inset="true"></ul>

</div>

<div data-role="layout" data-id="summarybinding">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

</div>

<div data-role="layout" data-id="hourlybinding">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

<a href="summary" data-role="backbutton" id="park-back" data-align="left">Back</a>

<a href="accum" data-role="button" id="park-accum" data-click="acumclick" data-align="right">Accum</a>

</div>

</header>

</div>

<script type="text/x-kendo-template" id="summaryTemplate">

<table style="width:100%;">

<tr>

<td style="text-align: center; width: 8%;"><p class="item-info">#=Park#</p></td>

<td style="text-align: center; width: 10%;"><p class="item-info">#=TotalFirstEntries#</p> </td>

<td style="text-align: center; width: 10%;"><p class="item-info">#=TotalForecast#</p> </td>

<td style="text-align: center; width: 10%;"><p class="item-info">#=TotalBudgetAttendance#</p></td>

<td style="text-align: center; width: 10%;"><p class="item-info">#=TotalBudgetVariance#</p> </td>

<td style="text-align: center; width: 10%;"><p class="item-info">#=InPark#</p> </td>

<td style="text-align: center; width: 10%;"><p class="item-info">#=OpeningTime#</p></td>

<td style="text-align: center; width: 10%;"><p class="item-info">#=ClosingTime#</p> </td>

<td style="text-align: center; width: 10%;"><p class="item-info">#=LastYearActualAttendance#</p> </td>

<td style="text-align: center; width: 7%;"><p class="item-info">#=LastYearWeatherCode#</p> </td>

<td style="text-align: right; width: 3%;cursor:pointer;vertical-align:middle;">

<a href="hourly" data-role="detailbutton" data-click="click" data-parkid="#=ParkID#" data-icon="details"></a>

</td>

</tr>

</table>

</script>

<script type="text/x-kendo-template" id="hourlyTemplate">

<table style="width:100%;font-size:.5em;line-height:1.2em;">

<tr>

<td style="width: 15%;">#=FirstColumn# </td>

<td style="width:4%;">#=Hour7# </td>

<td style="width:4%;">#=Hour8# </td>

<td style="width:4%;">#=Hour9# </td>

<td style="width:4%;">#=Hour10# </td>

<td style="width:4%;">#=Hour11# </td>

<td style="width:4%;">#=Hour12# </td>

<td style="width:4%;">#=Hour13# </td>

<td style="width:4%;">#=Hour14# </td>

<td style="width:4%;">#=Hour15# </td>

<td style="width:4%;">#=Hour16# </td>

<td style="width:4%;">#=Hour17# </td>

<td style="width:4%;">#=Hour18# </td>

<td style="width:4%;">#=Hour19# </td>

<td style="width:4%;">#=Hour20# </td>

<td style="width:4%;">#=Hour21# </td>

<td style="width:4%;">#=Hour22# </td>

<td style="width:4%;">#=Hour23# </td>

<td style="width:4%;">#=Hour00# </td>

<td style="width:4%;">#=Hour01# </td>

<td style="width:4%;">#=Hour02# </td>

<td style="width:4%;">#=Hour03# </td>

</tr>

</table>

</script>

<script type="text/x-kendo-template" id="hourlyHeaderTemplate">

<table data-role="header" style="width:100%;font-size:.5em;">

<tr>

<td style="width:15%;">As of</td>

<td style="width:4%;">7<br />AM </td>

<td style="width:4%;">8<br />AM</td>

<td style="width:4%;">9<br />AM</td>

<td style="width:4%;">10<br />AM</td>

<td style="width:4%;">11<br />AM</td>

<td style="width:4%;">12<br />PM</td>

<td style="width:4%;">1<br />PM</td>

<td style="width:4%;">2<br />PM</td>

<td style="width:4%;">3<br />PM</td>

<td style="width:4%;">4<br />PM</td>

<td style="width:4%;">5<br />PM</td>

<td style="width:4%;">6<br />PM</td>

<td style="width:4%;">7<br />PM</td>

<td style="width:4%;">8<br />PM</td>

<td style="width:4%;">9<br />PM</td>

<td style="width:4%;">10<br />PM</td>

<td style="width:4%;">11<br />PM</td>

<td style="width:4%;">12<br />AM</td>

<td style="width:4%;">1<br />AM</td>

<td style="width:4%;">2<br />AM</td>

<td style="width:4%;">3<br />AM</td>

</tr>

</table>

</script>

And here is my javascript code:

<script>

var parkId = 0;

function mobileListViewDataBindInit(e) {

//$("#datepicker").kendoDatePicker({

// value: new Date(),

// change: function () { mobileListViewDataBindInit(e); }

//});

//var datepicker = $("#datepicker").data("kendoDatePicker");

var date = new Date('3/29/2014');// datepicker.value();

var month = date.getMonth() + 1;

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "http://localhost/AttendanceMonitorServices/AtmonService.svc/GetAllData",

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

data: { selectedDate: month + '/' + date.getDate() + '/' + date.getFullYear() }

}

},

requestStart: function () {

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

},

requestEnd: function (result) {

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

BindAllData(result);

},

change: function (e) {

}

});

dataSource.read();

}

function click(e) {

var data = e.button.data();

var date = new Date('3/29/2013');// datepicker.value();

var month = date.getMonth() + 1;

parkId = data.parkid;

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "http://localhost/AttendanceMonitorServices/AtmonService.svc/GetHourlyData",

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

data: {

selectedDate: month + '/' + date.getDate() + '/' + date.getFullYear(),

parkID: parkId

}

},

requestStart: function () {

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

},

requestEnd: function (result) {

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

BindHourlyData(result);

},

change: function (e) {

}

});

dataSource.read();

}

function acumclick(e) {

var date = new Date('3/29/2013');// datepicker.value();

var month = date.getMonth() + 1;

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "http://localhost/AttendanceMonitorServices/AtmonService.svc/GetCumulativeData",

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

data: {

selectedDate: month + '/' + date.getDate() + '/' + date.getFullYear(),

parkID: parkId

}

},

requestStart: function () {

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

},

requestEnd: function (result) {

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

BindAccumData(result);

},

change: function (e) {

}

});

dataSource.read();

}

function BindAllData(result) {

var d = eval(result.response.GetAllDataResult);

$("#summarylistview").kendoMobileListView({

dataSource: d,

template: $("#summaryTemplate").html(),

pullToRefresh: true

});

}

function BindHourlyData(result) {

var d = eval(result.response.GetHourlyDataResult);

$("#hourlylistview").kendoMobileListView({

template: $("#hourlyTemplate").html(),

headerTemplate: $("#hourlyHeaderTemplate").html(),

pullToRefresh: true,

dataSource: kendo.data.DataSource.create({ data: d })

});

}

</script>

You may note, also, that I had to create a binding function to bind to the list, because I could not just set the datasource like shown in the demos. I had to get the JSON object and parse it and then bind it to the listview. Regardless of that issue, my BIG issue is that the headerTemplate is never shown. Cannot I just have HTML in the template? Or does it have to reference some value from the datasource in order to get it to bind?

Any help is much appreciated. I've been fighting with this issue for quite a few hours now.

ListView (Mobile)

answered on 01 Apr 2014

3 answers

112 views

Chrome App Error: Uncaught history.length is not available in packaged apps.

I have a Chrome App using Kendo UI Complete v2013.3.1324 and it works correctly. I just downloaded Kendo UI Complete v2014.1.318 and it generates an error when instantiating a new mobile application.

Ex: var app = new kendo.mobile.Application(document.body);

I will continue to use the previous version for now. Any help upgrading is appreciated. Thanks.

Uncaught history.length is not available in packaged apps. extensions::platformApp:14

(anonymous function) extensions::platformApp:14

o.Class.extend.length kendo.all.min.js:10

o.Observable.extend.start kendo.all.min.js:10

o.extend.start kendo.all.min.js:10

l.Observable.extend._startHistory kendo.all.min.js:21

(anonymous function) kendo.all.min.js:21

c jquery-1.9.1.js:7341

p.fireWith jquery-1.9.1.js:7403

b.extend.ready jquery-1.9.1.js:6875

H jquery-1.9.1.js:6601

General Discussions

answered on 01 Apr 2014

1 answer

58 views

(C# MVC)Kendo MutliSelect - setting values that are not in the list when page loads

Hi support team,

How do I set values to mutli select control when those values are not currently available in the list?

I have a mutli-select control that is initially bind to 200 data items coming from the controller when page loads (There are more than 2000 available items) and allow user to type and search for result. The page is not using AJAX and we can't use AJAX for a particular purpose.

When the page reloads, I manually set the value to the multi-select control if it was previously selected by user to retain the selected values. However, I am not able to set values that are not in the initial 200 data items. (i.e. User searched for the item and refreshed the page)

Since there are more than 2000 available items and this will increase in the future, showing all data items on initial load is not an option for us. Could you please suggest what we can do?

Thanks

General Discussions

answered on 01 Apr 2014