Questions on Kendo UI for jQuery Forum

2 answers

833 views

Dropdown list API to return non-string selected value

If my datasource has non string values like in the below example (modified the Basic Usage demo code)

$("#color").kendoDropDownList({

dataTextField: "text",

dataValueField: "value",

dataSource: [

{ text: "Black", value: 1 },

{ text: "Orange", value: 2 },

{ text: "Grey", value: 3 }

],

index: 0,

change: onChange

});

Whenever I change/select another the dropdown option, I try to get the selected item's value using value() method. It always returns a string value.
In this example, it returns "1" or "2" or "3" even if the values are integer and not string.
Is there any other way, I can get the correct values (as integer) ?

DropDownList

answered on 07 Jul 2014

1 answer

130 views

Am I missing something here?

I figured the demos are pretty straight forward but i get the impression I need to specify something that is currently missing.

Can anyone see what I missed?

I had to change the line "var hubStart = connection.start({ jsonp: true });" to "var hubStart = connection.start();" because i got a "jsonp is disabled" error, I read up on it and my understanding was that this was a cross domain feature which I don't need since im only pulling data from a hub on the current app / domain so i took it out.
I also got the impression that this was regression from the COR stuff which is event driven rather than polling (so less advanced forcing a regression).

So here's my MVC view code ...

01.@section scripts

02.{

03.<script>

04. $(function () {

05. var hubUrl = "/signalr/hubs";

06. var connection = $.hubConnection(hubUrl, { useDefaultPath: false });

07. var hub = connection.createHubProxy("submissionHub");

08. var hubStart = connection.start();

09.

10. $("#notification").kendoNotification({

11. width: "100%",

12. position: {

13. top: 0,

14. left: 0

15. }

16. });

17. $("#grid").kendoGrid({

18. editable: true,

19. sortable: true,

20. dataSource: {

21. type: "signalr",

22. autoSync: true,

23. // Handle the push event to display notifications when push updates arrive

24. push: function (e) {

25. var popupNotification = $("#popupNotification").data("kendoNotification");

26. popupNotification.show(e.type, "success");

27. },

28. schema: {

29. model: {

30. id: "SubmissionId",

31. fields: {

32. "SubmissionId": { editable: false },

33. "FirstName": { type: "text" }

34. }

35. }

36. },

37. sort: [{ field: "SubmissionId", dir: "desc" }],

38. transport: {

39. signalr: {

40. promise: hubStart,

41. hub: hub,

42. server: {

43. read: "read",

44. update: "update",

45. destroy: "destroy",

46. create: "create"

47. },

48. client: {

49. read: "read",

50. update: "update",

51. destroy: "destroy",

52. create: "create"

53. }

54. }

55. }

56. }

57. });

58. });

59.

60.

61.</script>

62.}

63.

64.<div id="grid" data-role="grid" style="height: 200px">

65.</div>

And here's my hub code ...
For now it's a just simple "respond with what you get", notice that I have a hard coded static type called "Database", and Database.Submissions just returns a list of submission objects (as if to simulate a database call but from ram)

01.using Microsoft.AspNet.SignalR;

02.using Test_Project.Models;

03.

04.namespace Test_Project.Hubs

05.{

06. public class SubmissionHub : Hub

07. {

08. public void Read()

09. {

10. Clients.All.Read(Database.Submissions.ToArray());

11. }

12.

13. public void Update(Submission submission)

14. {

15. Clients.All.Update(submission);

16. }

17.

18. public void Destroy(Submission submission)

19. {

20. Clients.All.Destroy(submission);

21. }

22.

23. public void Create()

24. {

25. Clients.All.Create(new Submission());

26. }

27. }

28.}

Grid

answered on 07 Jul 2014

1 answer

335 views

Responsive gallery using listview

Hi

in a asp.net mvc project (using bootstrap) I'm using kendo listview to display a number of image thumbnails and use magnific to lightbox the gallery.
The listview gets data via a kendo datasource in which I've set pagesize to x and I've hook up a pager.

This works great on a desktop, however, on an tablet or phone I'd like to reduce the thumbnail sizes (css) and show more thumbnail images (pagesize).

Since I'm new to responsive design, I thought I'd ask if anyone could suggest a good (the best) approach to handle the above scenario.

/Morten

ListView

answered on 07 Jul 2014

1 answer

551 views

Passing selected row values to controller

Hi,

I've got an image and a kendo grid:

<a href="#" id="ic_open" class="tooltip2" title="Abrir">

<span title="">

<img class="toolbar-icons" src="../../Images/open.png"/>

</span>

</a>

...

<div id="datagrid">

@(Html.Kendo().Grid(Model)

.Name("datagrid_Concessoes")

.Columns(columns =>

{

columns.Bound(c => c.Id).Width(70);

columns.Bound(c => c.Code);

columns.Bound(c => c.Description);

columns.Bound(c => c.CreationDate);

columns.Bound(c => c.CreationUser);

})

.HtmlAttributes(new { style = "height: 534px;" })

.Scrollable()

.Sortable()

.Selectable()

.Pageable(pageable => pageable

.Refresh(true)

.ButtonCount(5))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(15)

.Read(read => read.Action("GetConcessoes", "MasterData"))

)

</div>

I've got this script too:

<script type="text/javascript">

$(function () {

$('.tooltip2').click(function () {

var id = this.id;

$.get('@Url.Content("GetPartialView")',

{ "id": id },

function (data) {

$('#div-for-partial').html(data);

});

</script>

...which passes the element id to the controller.

I want to pass the selected row values to the controller so I can manipulate that information.

Thanks

Grid

answered on 07 Jul 2014

1 answer

128 views

Memory leak by dynamic (online) chart

Hello,

in our application we have built an online chart. The data is updated every two seconds and then displayed as a line. As type we use canvas. We noticed that the memory is not released cleanly and with time continues to run high. We have let our online chart run for three days. The store was in the beginning at about 130MB and then at the end at about 500MB. We have let the demo application on the Kendo UI homepage also for three days running. Here, the memory also increased continuously high. From 138MB to 656MB. Why the memory is running high and why the memory is not released clean?

http://demos.telerik.com/kendo-ui/chart-api/benchmark

Diagram

answered on 07 Jul 2014

1 answer

228 views

Pass Model to column ClientTemplate editor in Kendo Grid

I have a Kendo grid whereas the columns are defined as:

.Columns(columns =>

{

columns.Bound(b => b.Field);

columns.Bound(b => b.OldValue);

columns.Bound(b => b.NewValue);

columns.Bound(b => b.DateImported).Format("{0:dd-MMM-yyyy}");

columns.Bound(b => b.BuildingChangeValidationStatusType).ClientTemplate("#=BuildingChangeValidationStatusType.Value#").Width(250);

columns.Command(command => command.Custom("Update").Click("updateValidation"));

columns.Command(command => { command.Edit(); }).Width(172);

})

The BuildingChangeValidationStatusType client template is defined as:

@model Rep.Models.BuildingChangeValidationViewModel

@(Html.Kendo().DropDownList()

.Name("BuildingChangeValidationStatusType") // Name of the widget should be the same as the name of the property

.DataValueField("Id")

.DataTextField("Value")

.BindTo((System.Collections.IEnumerable)Model.BuildingChangeValidationStatuses)

)

I'm wondering how I might pass the model for the Grid to the client template so that the line:

.BindTo((System.Collections.IEnumerable)Model.BuildingChangeValidationStatuses)

)

would resolve properly. Any ideas?

Grid

answered on 07 Jul 2014

1 answer

222 views

Dynamic Disable Sorting and Filtering in Kendo Grid

Hi,

While adding a new row in Kendo UI Grid, we need to disable the Kendo UI Grid sorting and filter features dynamically.
ADD button will be a separate button, not an default inbuilt button.
Please provide ASAP with the sample code and demo link for this issue fix.

Thanks & Regards,
Haris V

Grid

answered on 07 Jul 2014

2 answers

112 views

TypeScript definition error for Splitter

If this isn't the appropriate place for reporting these errors, please let me know.

I noticed that in kendo.all.d.ts there is at least one error for the Splitter definition.

Instead of

insertBefore(config: any, referencePane: string): void;
insertBefore(config: any, referencePane: Element): void;
insertBefore(config: any, referencePane: JQuery): void;

it should be

insertBefore(config: any, referencePane: string): JQuery;
insertBefore(config: any, referencePane: Element): JQuery;
insertBefore(config: any, referencePane: JQuery): JQuery;

Thanks!

Splitter

answered on 07 Jul 2014

2 answers

348 views

grouping and sorting not working in grid

I have found out that When we group on a particular column and try to sort on a column which is not the grouped column, sorting doesn't work at all...
Is there any configuration I have to set explicitly?

I attached a screen shot of from http://trykendoui.telerik.com/OVIM

Grid

answered on 07 Jul 2014

2 answers

718 views

schema: { total: function(data) { ... } } Not Working?

I feel like I'm taking crazy pills. I've seen this odata workaround in many places, but I can't for the life of me get it to work. I have a simple data source that loads from an odata Web Api v2 endpoint. The endpoint seems to be returning the JSON data appropriately, here's what I'm seeing as a response with only 2 items being returned:

{

"odata.metadata":"http://localhost:40946/odata/$metadata#AlbumThumbnail","odata.count":"2","value":[

{

"ImageId":29,"Title":null

},

{

"ImageId":30,"Title":null

}

]

}

And here's how my data source is defined:

var thumbnailSource = new kendo.data.DataSource({

type: "odata",

transport: {

read: {

url: "/odata/AlbumThumbnail/",

dataType: "json",

data: {

id: 31

}

},

schema: {

data: function (data) {

return data.value;

},

total: function (data) {

return data["odata.count"];

},

model: {

fields: {

ImageId: { type: "number" }

}

});

$(window).load(function () {

thumbnailSource.read();

});

And any time it fetches data I get the usual odata error:
Unable to get property '__count' of undefined or null reference

I've tried setting breakpoints on my data() and total() functions and they're never reached. I can't figure out why the usual internal total function is being called instead of mine. The error occurs in:

function anonymous(d) {

return d.d.__count

}

I can't figure out what I'm missing here?

Data Source

answered on 06 Jul 2014