Questions on Kendo UI for jQuery Forum

1 answer

221 views

How to bind to self-referencing remote data

Dear support & forum,

I'm trying to implement a very simple TreeView on my page that is bound to remote data. The underlying table Groups consists of these fields: Id, ParentId and Name. Using this structure, you can create hierarchies of groups.

Could you please provide working controller and client (razor) code that fetches the data and displays the names of the groups in a nested tree? I didn't manage to get along with your sample code as it doesn't show the whole story: database table, view model, controller and client code.

Thank you very much in advance for helping me with this for clarification!

Best regards,
Rob

TreeView

answered on 22 Mar 2013

4 answers

229 views

[Solved] Using SPA with TypeScript

The TypeScript definition file seems to be incomplete. For example, both kendo.Router and kendo.Layout do not accept any argument. The constructor is missing.

Michael G. Schneider

SPA

answered on 22 Mar 2013

8 answers

571 views

Notification for Ajax request is complete in Kendo Grid

Hi,
I am setting pagesize property of datasource of grid through java script, I need to trap in my java script that the ajax request for pagesize is completed. After just completing this Ajax request I need to fire a print. I need to have all the pages in the grid and the the print should get fire as I want tp print all the data of the grid.

Please find the attach code for the same.

Regards,
Nandan

Grid

answered on 22 Mar 2013

7 answers

248 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

389 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

755 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

180 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

83 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

130 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