Questions on Kendo UI for jQuery Forum

2 answers

106 views

Datasouce Read from server rather than cache when the user pulls to refresh

Hi,
We have the following datasource

var messages = new kendo.data.DataSource({

transport: {

read: function(operation) {

var cachedData = localStorage.getItem("cachedMessages");

if (cachedData != null || cachedData != undefined) {

operation.success(JSON.parse(cachedData));

}

else {

operation.success(getMessages());

}

});

I only want it to hit the server "getMessagesFromServer()" if there is no cache (which is working) or when the user "pulls to refresh" in the listview e.g.

<ul id="messages-list-view" data-role="listview" data-source="messages" data-template="message-template" data-pull-to-refresh="true">

</ul>

How can I tell messages.read that the user has forced a refresh and it needs to go to the server to get the data rather than the cache.

Thanks in advance

Eaigs

Data Source

answered on 07 Feb 2014

4 answers

140 views

Page shifting if scheduler bottom is off screen

I have an issue where I have a scheduler which extends off the bottom of the page and when you click on it, the whole page shifts up, so that the top, left corner of the calendar is at the top of the page. Is there a way to prevent the page from shifting?

When you double-click to bring up the editor, it ends up opening at the wrong time slot, because it shifted between clicks.

Scheduler

answered on 07 Feb 2014

1 answer

294 views

[Solved] Donut Chart Sizing

Please see that attached. We have a few donut charts and want the labels on them. We have done what we can to reduce the size, but the labels and chart title still seem to get cut off (see attached pictures). This is in a responsive UI, and it seems the labels are not always counted when using the "$(this).data("kendoChart").redraw()" method.

$("#" + chartDiv).kendoChart({

title: {

text: chartName + " " + chartLabel

},

legend: {

visible: false,

position: "bottom"

},

seriesDefaults: {

type: "donut",

startAngle: 150

},

theme: defaultTheme,

series: [{

name: "Prior Period",

overlay: { gradient: "none" },

categoryField: "Value.Description",

field: "Value.Value",

tooltip: {

visible: true,

template: "${dataItem.Value.Description} - ${dataItem.Value.FormattedValue} - Prior Period"

},

data: jsonPrior

}, {

name: labelDateRange,

overlay: { gradient: "none" },

categoryField: "Value.Description",

field: "Value.Value",

tooltip: {

visible: true,

template: "${dataItem.Value.Description} - ${dataItem.Value.FormattedValue} - " + labelDateRange

},

data: jsonData,

labels: {

template: "${dataItem.Value.Description} - ${dataItem.Value.FormattedValue}",

position: "outsideEnd",

font: "10px Arial,Helvetica,sans-serif",

align: "circle",

visible: true,

distance: 15,

background: "transparent"

},

}]

});

Charts

answered on 07 Feb 2014

1 answer

196 views

resize scheduler control

How can I resize the scheduler control? I need it to fill its container as the window is resized.

Scheduler

answered on 07 Feb 2014

1 answer

272 views

Disable Mouse Scroll / Zoom

Is there a way to disable map zooming when the mouse is scrolled?

Thanks!
Sean

Map

answered on 07 Feb 2014

3 answers

125 views

[Solved] Filtermenu with date(time)picker not working when regenerating grid.

I'm using a grid which sometimes needs to be regenerated. But if the filtermenus with datetimepicker is used before the grid is regenerated the filter wont work for the new grid.

Here's a jsfiddle example:
http://jsfiddle.net/YF7gS/2/

To reproduce:
1. Click Create grid.
2. Select a date-filter
3. Click Create grid again.
4. Now the select filter is not working.

(So far I only tried firefox, but I don't think he browser matters)

This worked before updating Kendo (from 2012Q3(?) to 2013Q3)

Grid

answered on 07 Feb 2014

8 answers

296 views

Wizard flow a good use case for SPA?

I've been tasked w/ creating a wizard-like, information collection workflow using Kendo MVVM. It was suggested SPA might be a good fit for this project. The basic idea is asking the user at the beginning which options they'd like to include, and then based on those choices, allow the user to configure each in detail using a Next page, previous page "wizard like" workflow. Does this sound like a good use for Kendo SPA?

One of my concerns is my view model(s) getting too large. I might be able to mitigate this w/ proper object oriented Javascript class composition, but in general, should viewmodel size be a concern w/ SPA? The other concern is having to create a lot of new kendo.View instances to house all the different "content" areas of each pages. In total, there easily could be 40-50 different views for the different content.

I've seen the kendo music store SPA app as well as sushi, but these are very simple apps with only a small handful of different content views.
Surely I wouldn't want to keep those in memory, right? Any insight on if this is a good idea (and if so) would be the best way to architect the application, would be most helpful.

I'm sorry if this question seems elementary, I am new to both MVVM and SPA, not to mention modern OO Javascript. I come from ASP.NET MVC mainly.

Thanks in advance!

PS: I've read the three "A Day at the SPA" blog articles by Derick Bailey and the Getting Started SPA guide. I'm just looking for some guidance at this point.

SPA

answered on 07 Feb 2014

1 answer

243 views

router + template loader best practice

Hi, I created an index.html page with router and template loader as described here:
http://docs.telerik.com/kendo-ui/howto/load-templates-external-files

Now what I'm trying to do is to dynamically load the template data each time I navigate to a new url.

The first part of clicking on links and navigating with using the router works perfect. It even has a great caching mechanism so it won't load each template more than once. The question is what is the best practice to inject the server data into the template?

For example let's say that I'm looking at a homepage and I have a link to the customers page. Click on the link will switch view to the customers.html and will show the template page. Now I need to load all the customers. When and how do I do that? In the template page? I think that it would be better if the code that loads the customers will be in a separate js file that will load the data, populate the viewModel (am I right here?) and bind it to the page. Same questions when clicking on a specific user in order to edit it in a new popup - when and what is the best way to load the data?

SPA

answered on 07 Feb 2014

0 answers

105 views

Invalid whitespace generated by template

Can anyone explain the invalid white space generated by the template binding. It occurs in each <li> before the <table>
see http://jsfiddle.net/hSXL4/2/

Regards
Jaco

General Discussions

asked on 07 Feb 2014

6 answers

291 views

[Solved] Grid Details not shown in proper place

I am trying to open a grid as the detail template inside a grid but it seems it is not opening is correct place. Please help. The detail steps with screenshot is the attached document.

The code to open the grid is as below

Grid Definition and related code

@(Html.Kendo().Grid().Name("grvInvSplit")

.TableHtmlAttributes(new { style = "table-layout: fixed;" })

.ClientDetailTemplateId("ViewGridItemDetails")

.DataSource(dataSource => dataSource.Ajax()

.Batch(false)

.ServerOperation(false)

.Read(...)

.Create(..)

.Update(..)

.Model(model => model.Id(p => p.GridRowNum))

.Model(model => model.Field(p => p.GridRowNum).DefaultValue(-1))

.Events(events => events.RequestEnd("onGridRqstEnd")