Questions on Kendo UI for jQuery Forum

2 answers

293 views

Hi, i'm currently using the treeview component with two levels of checkboxes. I have to invert the selected values of them. My problem is that when I manually change the child check values, they don't trigger their change event so I have call the event handler manually too, that way the parent values don't change either. Is there a way to do this using the treeview object? By the way, I tried using .click() with the child checks, but it made the browser crash.

Thanks for your answers!

TreeView

answered on 15 Jan 2013

2 answers

156 views

Splliter Issue

Hi,

I trying to use splitter in my project but it works little wired.

Please see the attachement.

Thank You
Rana

Splitter

answered on 15 Jan 2013

1 answer

327 views

Nested listviews

There is one very real scenario that I often encounter and I'm not sure how to approach it with Kendo.

I have a Datasource that has a complex structure, meaning there are nested complex structures, sometimes going 2 levels. Right now I use a regular data source, and display it with a kendo template. When i do chenges i have to "repaint" the template, since the painted template doesnt seem to notice changes in the underlying MVVM bound item. When i reach the nested elements in the template i use javascript for loops to show them all.

It would be nicer to use a nested type of listview or something, but I'm not sure if it's possible or how to achive it?

I'm also not sure if an hierarchical datasource is applyable since from what I understood that should be used when I have to connect more than one API service call, and I do not have that case. I find the hierarchical datasource documentation lacking, and am not sure of all the scenarios where to use it from it. It would be nice if I could define a model and nest another model inside it. Is that possible?

ListView

answered on 15 Jan 2013

3 answers

99 views

Formatting grid in combination with localization

I have set the culture to 'nl-BE' which should display currencies in the '€ 12,34' format. It doesn't however...

Found that applying a row template caused this behaviour. Worked with column template instead and everything works just fine now.

Grid

answered on 15 Jan 2013

2 answers

393 views

Formatting the footer of a grid that uses row templates

How can one format the footer of a grid that uses aggregates? I would like to align text to the right and give the text another color. The correct localization should also be applied.

Found solution by extending the css class .k-footer-template
Regards

Grid

answered on 15 Jan 2013

5 answers

1.4K+ views

dataSource.query

Hello

I have next code:

var dataSource;

function newsListInit() {

dataSource = new kendo.data.DataSource({

pageSize: 12,

serverPaging: true,

// ... //

});

$("#newsList").kendoMobileListView({

dataSource: dataSource,

template: $("#newsList-template").text(),

endlessScroll: true,

scrollTreshold: 30

});

}

I want to use dataSource var from another view and declared it in global scope. When I use the query method (like so):

dataSource.query({take:12, skip:12});

the AJAX call runs, but in console I get the error:

Uncaught TypeError: Cannot read property '0' of undefined kendo.mobile.min.js:14
    f.extend.refreshkendo.mobile.min.js:14
p.isFunction.fjquery.min.js:2
Class.extend.triggerkendo.mobile.min.js:9
j.extend._processkendo.mobile.min.js:11
j.extend.successkendo.mobile.min.js:11
p.isFunction.fjquery.min.js:2
n.successkendo.mobile.min.js:11
kjquery.min.js:2
l.fireWithjquery.min.js:2
yjquery.min.js:2
c.onload.c.onreadystatechangejquery.min.js:2

    

Does it possible to use dataSource in this way and how to do it right?

Data Source

answered on 15 Jan 2013

3 answers

125 views

CascadeFrom and optionLabel

Consider two comboboxes. Box1 and Box2:
- Box2 is cascading from Box1
- Box1 has an optionLabel

It appears to me that Box1 is populating (or attempting to populate) Box2 when the Box1 optionLabel is selected.

This is erroneous. When Box1 optionLabel gets selected Box2 should be emptied and deactivated.

DropDownList

answered on 15 Jan 2013

1 answer

131 views

TimePicker error in IE8

Hi there,

I'm getting the following error from IE8 when trying to define two Timepickers within a Grid's edit popup window:-

"Object doesn't support this property or method"

The result of this is my change event isn't executing and I can no longer submit the update. The bottom button stops working.

The code I'm using currently looks like this :-

function editTimeSheet(e) {

e.container.find('#projectDrpDwn').kendoDropDownList({

autoBind: false,

dataSource: dsn.projects

});

e.container.find('#WorkDate'

).kendoDatePicker();



      // *** ERRROR OCCURS AFTER THIS LINE IN IE8 ONLY***

startTime = e.container.find('#startTime').kendoTimePicker().data('kendoTimePicker');

endTime = e.container.find('#endTime').kendoTimePicker().data('kendoTimePicker');

// attach change event handler via bind()

startTime.bind('change', startTimeChange);

// Define min/max range

startTime.min('07:00');

startTime.max('20:00');

endTime.min('07:00');

endTime.max('06:30');

}

The template (remotely called in) looks like this:-

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

<div class="k-edit-label">

<label for="Project">Project</label>

</div>

<div data-container-for="Project" class="k-edit-field">

<input id="projectDrpDwn" name="Project" data-text-field="ProjectName" data-value-field="Id" data-bind="value:Project" style="width: 100%;" required validationMessage="Project is required" />

<span class="k-invalid-msg" data-for="Project"></span>

</div>

<div class="k-edit-label">

<label for="WorkDate">Work Date</label>

</div>

<div data-container-for="WorkDate" class="k-edit-field">

<input id="WorkDate" name="WorkDate" data-type="date" data-format="dd/MM/yyyy" data-bind="value:WorkDate" required validationMessage="Work Date is required" />

<span class="k-invalid-msg" data-for="WorkDate"></span>

</div>

<div class="k-edit-label">

<label for="startTime">Start Time</label>

</div>

<div data-container-for="StartTime" class="k-edit-field" style="width:132px">

<input id="startTime" name="StartTime" data-format="HH:mm" data-bind="value:StartTime" data-role="timepicker" required validationMessage="A start time is required" />

<span class="k-invalid-msg" data-for="StartTime"></span>

</div>

<div class="k-edit-label">

<label for="endTime">End Time</label>

</div>

<div data-container-for="EndTime" class="k-edit-field" style="width:132px">

<input id="endTime" name="EndTime" data-format="HH:mm" data-bind="value:EndTime" data-role="timepicker" required validationMessage="An end time is required" />

<span class="k-invalid-msg" data-for="EndTime"></span>

</div>

I've tried a combination of things, syntax changes but nothing seems to remove the error.

IE9 compatibility mode shows the same issue but in normal and other browsers (FF, Chrome, Safari) no problems.

Kendo UI version is v2012.3.1114

Thanks

Date/Time Pickers

answered on 15 Jan 2013

1 answer

255 views

Three or more DropDownList linked by cascadeFrom

The page http://docs.kendoui.com/getting-started/web/combobox/cascading has some great FAQ.

One entry is related to work I am doing:
"Q: I am using comboboxes with load on demand (autoBind: false) and I need to pre-set the selected items."

However, the question I have is to related multiple cascades

$("#level1").kendoDropDownList ({ ... });
$("#level2").kendoDropDownList ({ ... cascadeFrom: "level1" ...});
$("#level3").kendoDropDownList ({ ... cascadeFrom: "level2" ...});

Is there a fiddle or example show cascadeFrom working with 2 or more linkages ?
Is the cascading system developed to handle multi-level cascades in the proper serial manner so as to arrive at the states of the following four actions?

Action
1.
level1 optionLabel selected
-> level2 & 3 disabled & emptied,
-> level2 & 3 optionLabel displayed

2.
level1 selected
-> level2 queried using level1
-> level3 disabled & emptied
-> level2 & 3 optionLabel displayed

3.
level2 optionLabel selected
-> level3 disabled & emptied
-> level3 optionLabel displayed

4.
level2 selected
-> level3 queried using level2
-> level3 optionLabel selected

Thanks,
Richard

DropDownList

answered on 15 Jan 2013

1 answer

95 views

the bug on the demo page?

On the page http://demos.kendoui.com/mobile/scrollview/index.html the scroll view should display the third page (data-page="2"):

<div data-role="scrollview" data-page="2">

The pager displays the right page, but the scroller stays on the first photo after initialization.

ScrollView (Mobile)

answered on 15 Jan 2013