Questions on Kendo UI for jQuery Forum

2 answers

1.0K+ views

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

123 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.5K+ 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

119 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

431 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

136 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

72 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

1 answer

147 views

Basic binding to model not working

I am admittedly new to MVC and this may be something very simple that I am missing, but I am at a complete loss as to what else to do other than post here. I have a model with a basic property called height:

public class BasicInformation

{

[Display(Description = "Patient's height", Name = "Height (Inches):")]

[Required(AllowEmptyStrings = false, ErrorMessage = "Height requires a value to be entered.")]

[Range(12, 96)]

public double Height { get; set; }

}

I am creating a new basic information and passing to the view when I call the view:

BasicInformation bi = new BasicInformation();

return View("Step2", bi);

Now in my view I am binding to this model using:

@(Html.Kendo().NumericTextBoxFor<double>(model => model.Height).Name("txtHeight").Decimals(0).Format("##")

)

My problem is that when I pass the model object to my next method, the value for height has not been updated. The min & max seems to be working based on the range attribute from the model so it seems as though that part is connected properly. Also if I use the basic html controls (see below) then it works fine.

@Html.EditorFor(model => model.Height)

I have tried to use several different Telerik controls and I am having the same problem with all the controls. Please explain what I am doing wrong or have not set on the Telerik control to have the control save the value on the model.

Thanks in advance,
Lee

General Discussions

answered on 01 Apr 2014

5 answers

1.4K+ views

Select across "pages" in virtual scrolling grid

I have a grid set up with virtual scrolling. I want to be able to use "multiple row" selection but it doesn't seem to be behaving as expected. Currently selecting a row on one "page", scroll to another page, and shift-clicking another row results in some fairly random selections.

I basically need to be able to click one row, scroll down a few "pages" and then shift-click another row and have everything in between selected.

I have a feeling this is not supported but I just want to double check.

Grid

answered on 01 Apr 2014

2 answers

195 views

[Solved] Notifications are hiding each other

Hi,

I'm experiencing a problem with notifications hiding each other, new notifications are stacked above the previous ones.

I have build the following plunker to reproduce the problem: http://plnkr.co/edit/o7g33wo4kwA8dJ0YXK8L?p=preview

Thanks
Holger

Notification

answered on 01 Apr 2014