Questions on Kendo UI for jQuery Forum

7 answers

244 views

[Solved] Unconditionally firing a callback with Router.navigate

It seems, as if Router.navigate would not fire the callback, if the route is already active. I prefered if this were different. Router.navigate should aways fire the callback. This would similar to refreshing a traditional HTML Page, although the anchor's href points to the current page.

Michael G. Schneider

SPA

answered on 22 Mar 2013

1 answer

383 views

Initialization of a ListView

I was trying to initialize a listview with data received from the server in two ways:

Initialization with "data-init" attribute

01....

02.

03.<div data-role="view" data-layout="root" data-id="student" data-init="viewInit">

04. <ul data-role="listview" data-style="inset">

05. </ul>

06.</div>

07.

08.

09.<section data-role="layout" data-id="root">

10. <header data-role="header">

11. <div data-role="navbar">myapp</div>

12. </header>

13.

14. <footer data-role="footer">

15. </footer>

16.</section>

17.

18.<script>

19. var dataSource = new kendo.data.DataSource({

20. transport: {

21. read: {

22. url: "@Url.Action("IndexJson", "Student")",

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

24. dataType: "json",

25. type: "GET"

26. }

27. }

28. });

29. dataSource.read();

30. function viewInit() {

31. $("#listview").kendoMobileListView({

32. dataSource: dataSource,

33. template: $("#datatemplate").text()

34. });

35. }

36.

37.</script>

38.

39.<script type="text/x-kendo-tmpl" id="datatemplate">

40. <div><a data-role="detailbutton" data-style="detaildisclose"></a><h3>${Name}</h3></div>

41.</script>

42.

43.

44. <script>

45. //alert("kendo.mobile.Application");

46. var app = new kendo.mobile.Application(document.body,

47. {

48. transition: 'slide'

49. });

50. </script>

Initialization with "data-source" and "data-template"

01....

02.

03.<div data-role="view" data-layout="root" data-id="student">

04. <ul data-role="listview" data-style="inset" data-source="dataSource" data-template="datatemplate">

05. </ul>

06.</div>

07.

08.<section data-role="layout" data-id="root">

09. <header data-role="header">

10. <div data-role="navbar">myapp</div>

11. </header>

12.

13. <footer data-role="footer">

14. </footer>

15.</section>

16.

17.<script>

18. var dataSource = new kendo.data.DataSource({

19. transport: {

20. read: {

21. url: "@Url.Action("IndexJson", "Student")",

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

23. dataType: "json",

24. type: "GET"

25. }

26. }

27. });

28.</script>

29.

30.<script type="text/x-kendo-tmpl" id="datatemplate">

31. <div><a data-role="detailbutton" data-style="detaildisclose"></a><h3>${Name}</h3></div>

32.</script>

33.

34. <script>

35. //alert("kendo.mobile.Application");

36. var app = new kendo.mobile.Application(document.body,

37. {

38. transition: 'slide'

39. });

40. </script>

The first way, the listview is not being populated, but the second is filling the listview... Why this happen?

ListView (Mobile)

answered on 22 Mar 2013

4 answers

741 views

Vertical Scrolling and Control Over Height

I was fiddling around with the demo and discovered one can set a fixed height on the div containing the selected list items and set overflow to auto to enable vertical scrolling. This allows rudimentary control over the height of the selections area.

Trouble is, the new item selection drops down when the scrollbar on the containing div is clicked. Also the div does not scroll down to the last selected item as items are selected. If we could use the scrollbar without the item selection dropping down and have the div auto-scroll down to the last selected item we'd have a solution!

It'd be awesome to have an example or two controlling demonstrating this, or a similar solution to control how the MultiSelect grows in height.

MultiSelect

answered on 22 Mar 2013

2 answers

175 views

[Solved] Slow rendering of Charts in IE7 / 8

Hello!
I did a quick search but only saw one or two things around this.

The code block at the bottom of this post renders a Kendo Chart with 2 series, each containing 30 data points, and tracks the time taken (in milliseconds) to complete the call to the kendoChart function.

We have a VM running IE7, and another running IE8, for testing purposes. index.html (the code block) resides on my local web server, I remote desktop to a Windows XP VM (on a separate server) which is running either a real copy of IE7, or IE8, and then I browse back to that page on my local web server.

Note that the time shown in milliseconds at the bottom of the page is only tracking the call to kendoChart.

With this page, I've seen times as bad as 10 seconds in true IE7 (not using IE9 browser mode).
IE8 achieves times around 500ms, this is still approximately 5x worse than Firefox or Chrome achieve with great consistency.

IE7 VM, min: ~3000ms, max: ~10000ms, quite inconsistent.
IE8 VM, between ~500 and 600ms consistently
Firefox and Chrome on the VMs, between ~100 and 200ms.
Local machine IE7 & 8, using IE9's Browser Mode setting, ~100 to 150ms.

Are the any recommendations or "best practices" that I've not been able to dig up so far, with regards to Kendo Chart and older IE versions?
Is there anything I can do to improve the render time in IE7 or IE8.

index.html

<!doctype html>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css" type="text/css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css" type="text/css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.dataviz.min.css" type="text/css" />

</head>

<body>

<div id="chart"></div>

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>

<script type="text/javascript">

var getTestData = function (numberOfItems) {

var arrayOfData = [];

for (var count = 0; count < numberOfItems; count++) {

arrayOfData.push({"Period":count,"ExPrice":0.3,"CumPrice":0.7})

}

return arrayOfData;

};

var arrayOfChartData = getTestData(30);

var $priceHistoryGraphElement = $("#chart");

var before = new Date();

$priceHistoryGraphElement.kendoChart({

theme: $(document).data("kendoSkin") || "default",

chartArea: { background: "" },

dataSource: { data: arrayOfChartData },

seriesDefaults: { type: "line" },

series: [

{ field: "ExPrice" },

{ field: "CumPrice" }],

categoryAxis: { field: "Period", labels: { rotation: 285, margin: { left: -15}} }

});

var after = new Date();

document.write("kendoChart call took " + Math.abs(after - before) + "ms to complete.");

</script>

</body>

</html>

Charts

answered on 22 Mar 2013

6 answers

2.1K+ views

How do I refresh a Kendo UI combo box?

I have an ASP.Net MVC Kendo UI combobox that is databound to a table with 1000's of records. I've set the MinLength property to 5 so I only return relevant results. The problem is, the user might need to change the text value all together. Is there a way to tell the control to refresh?

Here's the code for the control...

@(Html.Kendo().ComboBoxFor(x => x.Product)
                    .Name("Product")
                    .DataTextField("Name") // Display value
                    .DataValueField("Id") //Return value
                    .MinLength(5)
                    .AutoBind(false)
                    .Suggest(true)
                    .Filter(FilterType.Contains)
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("Products", "Home").Data("onGetProducts");
                        });
                    })
                )

This is also a post on stackoverflow.

http://stackoverflow.com/questions/15318992/how-do-i-refresh-a-kendo-ui-combo-box/15319094?noredirect=1#15319094

ComboBox

answered on 22 Mar 2013

2 answers

74 views

How to properly update a row after the update button is clicked (and a json response comes back with the data to be updated)?

When I edit a bunch of fields in a row, I click update and it sends the data to my php server. The php server sends back some json data and I want the same row to update.

For example:

I update a row and it has some fields in it like projectscore, adjustment and weight. The server saves the data and sends back the project total so it can be properly updated in the table. right now this is the json postback
{"id":"1","ptotal":75}

id is the id of the row (specified in the table, this is working), and ptotal is the column name of the column I need updated

How do I update the column in the table from the response from the server after an update or a create?

This is a server side php, client side kendo system (the table is a nested table in a hierarchy setup)

Grid

answered on 21 Mar 2013

1 answer

128 views

SPA Without Fragments

I realize this isn't part of the documentation, and I haven't glanced through the sourcecode yet to see if there is anything undocumented to allow this...

Is it possible, or are there plans to make possible, the ability to use the SPA additions to the framework without url fragments? Namely, a switch for the SPA framework that is able to use a combination of Pushstate, querystrings, and well-defined pages to create an ajax-driven pseudo-SPA similar to what we see in the KendoUI demo website that uses normal page-loads for those using older browsers?

SPA

answered on 21 Mar 2013

2 answers

453 views

proper css to set column-header background color

I have assigned a class to the column-header of a particular column. I use the following CSS to set the style:

th.foo {background-color: #339933 !important;
color: white !important}

This works correctly in IE9 and Safari, but only the font-color changes in Chrome; the background color does not change. So I believe the selector is correct. Does anyone know what is causing the Chrome issue?

Grid

answered on 21 Mar 2013

8 answers

873 views

[Solved] Query Caching

I've been heavily relying on the following: http://code.google.com/p/jquery-jsonp/

Can the Kendo DS do this as well by any chance? The performance gained from the cache is AMAZING.

Data Source

answered on 21 Mar 2013

1 answer

221 views

Animate Column Hide/Show

Want to make a mobile website a little snazzier for a potential client. The page contains only a kendoGrid, and if in Portrait mode, only 1 column shows; in Landscape mode, all columns are shown.

I'd like to have the showColumn/hideColumn functions to animate the column widths instead of using the show() and hide() jQuery functions.

Are there plans or a workaround to make this happen?

Grid

answered on 21 Mar 2013