Questions on Kendo UI for jQuery Forum

1 answer

121 views

Is there a way to edit a column's sort method after pageload?

Hello, I'm wondering if there is a way to inject a function into the kendo grid to sort a column after page load.

My issue is we are using MVC fluent wrappers to build the site and the option I need isn't available (compare), and I want to know if I can inject a compare method into the column in question.
I've tried setting

$("#ReportsGrid").data("kendoGrid").columns[3].sortable.compare

but that doesn't affect anything at run time.

Any ideas?

Grid

answered on 30 Jan 2014

2 answers

171 views

Updating Kendo ViewModel in a double-click event

Hi,
I have been struggling to get the code below to work and need some advice.
Currently I am testing out the Kendo MVVM and am relatively new to javascript so my apologies upfront if I am missing out on something obvious.

My current goal is to update my viewModel with a new JSON related object after a double-click row event occurs on my grid.

The difficulty that I am having is to assign a value to my viewModel outside of the initial declaration. I want to call a different function and for it have access to the viewModel to update it.

01.Main starting point for Javascript file

02.

03.$(document).ready(function () {

04. console.log("Loading");

05. var viewModel = new TradeViewModel();

06. LoadControls();

07. kendo.bind($("#view"), viewModel);

08.});

09.

10.

11.var TradeViewModel = function() {

12. var self = this;

13.

14. var dateNow = getFormattedDate();

15. self.viewModel = kendo.observable({

16. search: {

17. DateFrom: dateNow,

18. DateTo: dateNow,

19. TradeId: null,

20. TradeStatus: "All",

21. IsVoice: true,

22. IsLive: false,

23. BuyCompany: null,

24. SellCompany: null

25. },

26. tradeDetailsSearch: {

27. LiveTradeId: 0,

28. EngineId: 0,

29. ServerId: 0

30. },

31. tradeData: "SomeData"

32. });

33. self.viewModel.bind("change", function (e) {

34. // This function works and is fine.

35. TradeSearch(param1,param2);

36. console.log(e.field);

37. console.log("Event Binding finished");

38.}

39.

40.var RefreshGrid = function (apiQuery) {

41.

42.var ds = new kendo.data.DataSource({

43. transport: {

44. read: {

45. url: apiQuery,

46. dataType: "json"

47. }

48. }

49. });

50.

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

52. // standard binding to grid etc... this works fine

53. });

54.

55. // This registers a double-click listener, in my case I get the row details back.

56. $(".k-grid-content").dblclick(DoubleClickAction);

57.};

Now this next part is the area that I am having a problem trying to get right.

1.function DoubleClickAction() {

2. var grid = $("#grid").data("kendoGrid");

3. var selectedRow = grid.dataItem(grid.select());

4. console.log("You have double clicked on " + selectedRow.LiveTradeID);

5.

6. // And now the different approaches I have taken to set the viewModel data.

I get an error here and for each of the examples below this because it says viewModel is not defined. I am just not sure how to reference it for this function?

1.//... same function code as above.

2.

3. // I get an error here that says : Uncaught ReferenceError: viewModel is not defined

4. var testTradeData = viewModel.get("tradeData");

5. console.log(testTradeData);

6.};

01.//... same function code as above.

02.

03.// Get JSON data based on Id

04.

05. $.getJSON(apiQuery)

06. // Handle success event.

07. .done(function (jsonData) {

08. if (jsonData.isEmptyObject)

09. console.log("No data received");

10. else {

11. console.log("JSON data: " + jsonData);

12.

13. var mappedTradeArray = $.map($.makeArray(jsonData), function(tradeData)

14. {

15. return new GetTradeDetails(tradeData);

16. });

17. // I can see this correctly works and gets the data.

18. console.log(mappedTradeArray);

19.

20. // ERROR : I get the same:

21. // 'Uncaught ReferenceError: viewModel is not defined error' message

22. viewModel.tradeData =mappedTradeArray[0];

23.

24. // ERROR: I can also try to set it from the documentation

25. // that I have read on this website but get the same error :

26. viewModel.set("tradeData",mappedTradeArray[0]);

27. };

28. });

29.

MVVM

answered on 30 Jan 2014

3 answers

279 views

Performance issues with declarative binding to DropDownList

Hi,

I'm attempting to make a grid (with batch editing mode set) always display the editor for a DropDownList column -- not just when the user clicks in the cell to enter edit mode. It seems that the only way to do this is via declarative binding with a ClientTemplate set for the field.

I've gotten it to work, but performance is quite poor when first initializing the grid, and when scrolling to a new page (with virtual scrolling on). Is there a quicker way to achieve this, or is the initialization process of the kendoDropDownList simply too heavy to be done for this many items at once?

Here is a jsfiddle that shows the issue:

http://jsfiddle.net/e983a/1/

Thanks,
Nick

Grid

answered on 30 Jan 2014

7 answers

1.0K+ views

Is it possible to bind the sorting/grouping of a column to a different property than its display property?

Specifically this would be useful for grouping and sorting dates.
Take 5/1/2013 at 12:00 PM and 5/1/2013 at 1:00 PM

I'd like to provide an object with .DateTime that I can format against.

#= kendo.toString(CreateDate.DateTime, 'M/d/yyyy hh:mm tt') #

I'd also like to provide a separate property within the object to use for grouping, which would probably be an integer like 20130501, as well as another integer for sorting such as 201305012500.

I'm not having much luck so far in the fluent MVC wrapper.

I can bind to my strongly typed object that I called a 'GridDate', and have my ClientRowTemplate displaying GridDate.DisplayValue, which I format within the property.
I tried overriding GridDate's ToString to return a format of yyyyMMdd, but it spin-freezes when I try to group the column.

I'm out of ideas, need help.

Grid

answered on 30 Jan 2014

3 answers

289 views

Kendo UI Grid saveRow method doesn`t sync data and doesn`t close the row

Here is the [updated Fiddle][1] to test.
I am trying to setup grid with the in-line editing. Why saveRow method doesn`t affect update function in transport definition and doesn`t exit row from edit mode ?

Also please try to change var "can_edit" to false; Why this option doesn`t affect the field "day1"

[1]: http://jsfiddle.net/Casufi/zK489/18/

Grid

answered on 30 Jan 2014

3 answers

149 views

Numeric X-axis behaving like date axis (not scatter)

Hi

Numeric scale could be set to aggregate by a number of rounded units just like baseUnit=fit/maxDateGroups does.
Does Kendo plan to provide this kind of functionality?
We would need to draw area charts on numeric scale and use shared tooltips.

A side note: "scatter" option is currently missing from series type documentation:
http://docs.kendoui.com/api/dataviz/chart#configuration-series.type

V

Charts

answered on 30 Jan 2014

5 answers

248 views

kendo.Router change event should be more clever in the url the event returns

In the following scenario the url passed in the change event (e.url) is wrong.

If you have an index.html page with several routes like in the samples, for example /, /view1, /view2, ..., normally e.url in the change event returns /, /view1, /view2, ...

Let's say now that this page is is tracked by AddThis (or any service which works by adding tracking codes as hash values), when you call index.html#.Ut-VwxDFJ9N, the route returned by the router's change event is .Ut-VwxDFJ9N instead of /, which is wrong.

The router keeps a list of routes which it could use to check the route returned in the url property change event (e.url).

SPA

answered on 30 Jan 2014

3 answers

56 views

Model for Drawer access in related views

I'm in a situation where I need to be able to access the model I have bound to the Drawer accessable to all the views it relates too. I've tried the below. Thanks in advance.



//in the view like this

app.filterService.viewModel.structureId



//model for filter



(function (global) {

  

    var FilterModel,

app = global.app = global.app || {};



    FilterModel = kendo.data.ObservableObject.extend({



        structures: kendo.observable({ items: GetStructures()}),

        structureId: 49118,



        days: kendo.observable({

            items: [

                { id: 7, name: "Past 7 Days" },

                { id: 30, name: "Past 30 Days" },   

                { id: 60, name: "Past 60 Days" },

                { id: 90, name: "Past 90 Days" }]

        }),

        day: 7

    });

   

    app.filterService = { viewModel: new FilterModel() };

    console.log(app.filterService.viewModel.structureId);

}

)(window);

Drawer (Mobile)

answered on 30 Jan 2014

1 answer

79 views

IE 8 Can't sort or filter in server side mode

I can't get much visibility to this ,but using any of the public or internal builds of Kendo grid, in IE 8 with a data source that is set to server side it doesn't even send out the server side request after sorting or filtering (so says Fiddler)

It works perfectly on Chrome, Firefox, Safari and IE 10/11.

Looks like a bug?

Grid

answered on 30 Jan 2014

3 answers

105 views

virtualViewSize on mobile list

There is no documentaton for the virtualViewSize property of the MobileListView. There is only a demo... which fails to answer many questions, such as... how does this work? I"m working of local data not odata so the demo doesn't show how i would set up paging for local data.

http://demos.telerik.com/kendo-ui/mobile/listview/local-virtualization.html

General Discussions

answered on 30 Jan 2014