Questions on Kendo UI for jQuery Forum

5 answers

653 views

Just started using Kendo.UI and I can't seem to find any documentation on how to do what I need in JavaScript. I have a ORM Entity Model I'm accessing in the web project via a web service (oData/JSON). I can get the top-level data of any table just fine. But let's say I have a table called Devices (because I do) and it has a association called DeviceHasLocation (because it does) and I want to display the Name of the associated Location in a grid of Devices. What would the code for that look like?

I need to do something similar for a LOT of these associations, so a reusable methodology would be much appreciated.

Data Source

answered on 20 Mar 2014

1 answer

100 views

grid data visualization on Ipad

Hello,
we are using Kendo components to build the a multibrowser UI for a complex financial web application.
We use the library kendo.all.min.js library, version 2013.2.918, to run the client frontend both on desktop and tablet, specifically Ipad.
On Ipad we are experiencing the following problem:
when se load the data foer a grid, the loading operation terminates but the data is not visible and the grid remains empty. If I " play with the screen", say I enlarge it or shrink it, the application seems to reactivate and the data appears, but I believe the data was already there.
This problem does not happen on Windows PC with Explorer/Chrome/Firefox browsers.
Unfortunately I don't have a Mac for further debug
The Ipad info are:
Version iPad 7.0.6 (11B651)
browser 7.0
Webkit 537.51.1
Safari 9537.53

Though the question is vague, please give me a hint,

thank you for your help

best regards

Marco

Grid

answered on 20 Mar 2014

13 answers

254 views

v2013.2.1024 declarative binding an endless scrolling list view is broken

My endless scrolling listviews were working (excepting a couple of bugs that I've already brought up on this forum) until I updated to v2013.2.1024 and now I get the following error:

"Uncaught Error: the DataSource does not have page size configured. Page Size setting is mandatory for the mobile listview virtual scrolling to work as expected."

I found that this only happens when I use declarative binding. This problem also occurs in the latest available beta v2013.3.1030.

Cheers
Dean

ListView (Mobile)

answered on 20 Mar 2014

1 answer

100 views

How to handle Whitespace-Problem with Knockout-Binding?

Hi there, it's me again with another ScrollView-issue:

I have an array of knockout-viewmodels.
For each viewmodel, I'd like to get a page in my ScrollView-instance.

Now I get the problem described in your documentation: If there's a whitespace, you'll get an extra page.
Unfortunately the template-workaround doesn't work here and I cannot work with datasource as my knockout-bindings are initialized before I initialize kendoUI Mobile (there is much more going on in the app, so changing that order would be a lot of refactoring which I'm trying to avoid).

Because I can't find a way to define a specific number of pages (as a simple workaround), I'm hopping for your help :)

Thanks for your help!

Cheers,
Richard

ScrollView (Mobile)

answered on 20 Mar 2014

2 answers

360 views

Issue binding a click event handler within a template item

Hello, I'm trying to bind an array of primitive objects to an un-ordered list using the example from the getting started documentation here:

http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/source#source-binding-to-array-of-primitive-objects

I'd like to add a button along side each list item that, when clicked, removes the item from the list.

When I run the example above without the addition of a click event handler, everything works fine as the below link shows:

http://jsbin.com/muzameko/3/edit

However, when I add a click event handler to the same span, or even a neighboring span element as below...

http://jsbin.com/muzameko/4/edit

I get the following error in Chrome's console:

Uncaught TypeError: Object Coffee has no method 'get'

and the rest of the list fails to render correctly. Is this a bug or am I binding in an unusual way?

Thanks in advance, Sam.

MVVM

answered on 20 Mar 2014

1 answer

408 views

Selected Button Text Color (Action)

I am using your Mobile ThemeBuilder and I can not get the selected button's text in the ButtonGroup to change color. I've tried many different ways to change the color through declarative css styles. (No Inline, I can not use inline styling).

This is the style that is generated by your theme builder:

.km-ios7 .km-view .km-navbar .km-view-title > * .km-button.km-state-active .km-text {
color: rgb(0, 63, 135);
}

It does not work. The selected button's text is always white.

Thank you for your time.

ButtonGroup

answered on 20 Mar 2014

0 answers

1.2K+ views

Q1'14 Release - Popup Bug in Firefox

The Kendo UI Team has identified a problem with the Popup in Firefox, which affects all Kendo UI Widgets that use it. The issue only manifests itself when the page is scrolled as inability to open the Popup there.

We have identified the root cause of the problem and all following releases, including internal builds, will be free of this defect.

The corrected minified Popup script is also available for download as attachment to this post. You can load it right after the combined scripts in order to avoid the issue.

There is an easy alternative fix with CSS only. Force your desired overflow on the document element, like this:
.k-ff {
overflow: inherit !important;
}

The selector above will affect only Firefox. Adjust the overflow to your needs (visible, auto, hidden, scroll, inherit).

General Discussions

asked on 20 Mar 2014

5 answers

264 views

[Solved] Problem Cancelling Route

I am working on creating a new application using the Kendo SPA framework. One must-have feature is the ability to cancel navigation to a route, for example - don't allow the user to navigate away if the current has unsaved changes.

According to the documentation, this should be as simple as calling e.preventDefault() in the router's change event. And this does work in the simplest scenario - if you wire up the change event and call preventDefault, the route will be cancelled, you stay on the current view, and the url is reverted back to it's original value.

However, I feel that is overly simplistic. In reality, you would never simply just cancel the route. You need to make a call to see if there are unsaved changes so that you can determine whether or not the navigation is allowed. And this is where my problem lies.

In my scenario, I have a callback that is executed in the router change event that checks to see if the navigation is allowed. If I hit a route that I cannot leave, then I call e.preventDefault and the view does not change (which is good), but the route does not revert back to the original value (which is bad). So now the wrong url is showing in the browser. What's worse is that if I now attempt to navigate to a different route, this will cause an infinite loop where the change event keeps firing and being cancelled, which locks up the browser.

I have created an example in JS Bin that demonstrates this behavior - http://jsbin.com/EXARiTiJ/10. Here are the steps to recreate the issue:

When the page loads, it will first navigate to the Home view
Click on "Orders" to navigate to the Orders view. This will navigate correctly and update the url appropriately.
Click "Products" to navigate to the Products view. Again, this will navigate correctly and update the url.
Click "Orders" to navigate back to the Orders view. The code in the change event will call preventDefault and this will trigger the error condition. The Products view will remain visible, but the url now shows "/orders" - however, it should still show "/products".
Now click "Home" to try to navigate to the Home view. Be warned though, this will now create an infinite loop and lock up the browser.

It seems like this is a bug with the router, but maybe I am missing something. Is there a different way that I should be handling canceling the route navigation? If this is a bug, I would like to know if there is a workaround/fix that can be implemented, since this feature is a must-have for my application.

SPA

answered on 20 Mar 2014

3 answers

320 views

how to use cache inmemory and server filtering

hello,
i'm using cache inmemory and i want to customise server filtering, so taht i will populate grid with remote data on specific number of page.
for example on each 10 page.

Grid

answered on 20 Mar 2014

1 answer

291 views

Programmatically update days to display in MultiDayView

I currently have the following extended MutliDayView I'm using to hide/show days of the week. The days to show are selected from checkboxes on the page.

var customView = kendo.ui.MultiDayView.extend({

name: "customview",

calculateDateRange: function () {

var startDate = this.options.date;

var date = startDate.getDate();

var day = startDate.getDay();

var weekStart = new Date(startDate.setDate(date - day));

var weekDate = weekStart.getDate();

// Array to hold the dates that are displayed

var dates = new Array();

// Array to hold all the days of the week

var weekDays = new Array();

for (var i = 0; i < 7; i++)

{

weekDays[i] = new Date(weekStart.setDate(weekDate + i));

}

// Get Selected Days to show from checkboxes

var checkboxes = document.getElementsByName('weekday');

for (var i = 0; i < checkboxes.length; i++)

{

// Only add days checked

if (checkboxes[i].checked)

{

// DOW

var dayNumber = parseInt(checkboxes[i].value);

dates.push(weekDays[dayNumber]);

}

this._render(dates);

}

});

I have subscribed to the onClick event for checkboxes. I want to add or remove dates from the view. Here is the code

function weekDayClick(cb)

{

// Get current view

var scheduler = $("#scheduler").data("kendoScheduler");

var currentView = scheduler.view();

// If the current view is not "My View", we can just return

if (currentView.title.toLowerCase() != "my view")

return;

// Is My View. If Checked, need to add to view; otherwise remove

var dates = currentView._dates;

var newDates = new Array();

var dow = parseInt(cb.value);

if (cb.checked)

{

// TODO: Add selected day to dates

} else

{

// Remove date from view

for (var i = 0; i < dates.length; i++)

{

if (dates[i].getDay() != dow)

newDates.push(dates[i]);

}

// Render view

currentView.render(newDates);

scheduler.view(scheduler.view(customView));

scheduler.view(scheduler.view().name);

}

However, I cannot get this to work. The only way I can get it to work is change the view from my custom view to another one, make the checkbox changes and then select the custom view again. I have to comment out the event code when using this workaround.

Any suggestions?

Scheduler

answered on 20 Mar 2014