Questions on Kendo UI for jQuery Forum

1 answer

122 views

We are using treeview as a user hierarchy with remote data via ajax; if there are several people working on the treeview at the same time, moving users around, what happens if, for example, 'User B' moves someone around in the UI if they have already been moved (without knowledge) that 'User A' had moved them elsewhere.. Our assumption is that the last user to make an edit would be authoritative; confirm or deny? Also, is there some error checking that we can plug into this?

TreeView

answered on 22 Jan 2015

3 answers

171 views

TreeList's toolbar.template property ignored

Hi!

The TreeList's toolbar.template property is ignored, at least it doesn't behave like grid's toolbar.
The toolbar configuration is the same for the grid and the treelist:

toolbar: [

{

name: 'test',

template:'<button ng-click="test()">Hi, this is the button template! {{1+3}}</button>'

}]

In the grid, the template works as expected, but in the treelist, the template is ignored, only a button with "test" label is shown.

For a demo, please look at this dojo.

TreeList

answered on 22 Jan 2015

1 answer

204 views

Material Theme Virtual Scrolling Flicker

Hello -

I'm noticing a CSS artifact or issue with the Material Theme when using the virtual scrolling feature with remote data in the grid.

To see the issue, view: http://demos.telerik.com/kendo-ui/grid/virtualization-remote-data

Change the theme (using the theme changer) to: Material Black Theme

Now, rapidly scroll down in the grid. The grid will "live load" new records due to the virtual scrolling.

However, you will notice that while loading, the grid will show alternate row styles and then they will disappear once the data appears.

It seems like the Grid's alternate row style is appearing during live load when it should not.

Has anybody found a way to prevent this flicker and alternate row styles from appearing so the grid rows always look the same?

Grid

answered on 22 Jan 2015

1 answer

289 views

Display Grid Data Based on Offset

My scenario:
* Assume a Kendo Grid with virtual scrolling
* Backend data source contains 10,000 records
* Programmatically (triggered by another user action), want to show records 5,000-5,050 in the grid
* Want the virtual scrollbar in Kendo Grid to show that we are "halfway" in the data
* Want the user to be able to scroll up to see records < 5,000 (thereby triggering an ajax data call to load records 4,950 - 4,999, etc.)
* Want the user to be able to scroll down to see records > 5,050 (thereby trigger an ajax data call to load records (5,051 - 5,100, etc.)
* IDEALLY, do not want to load any more data into the Grid then necessary (for DOM and browser performance reasons).

Perhaps, I'm missing a function or option on the Grid, but we'd like to initially show the grid such that it displays data at a specific offset in our data set.

Is this possible? I noticed that when using virtual scrolling, the JSON object returned by the server is:

{
results: [... data records here...],
total: 10,000
}

The total property tells Kendo that the scrollbar should "indicate" there's 10,000 records in the datasource.

We'd like to show the data starting at row 5,000. Thus, I think the JSON object returned from the server would be:

{
results: [... data records here...],
total: 10,000
offset: 5,000
}

This would tell the Kendo ui grid that it should "show" the scrollbar 50% vertically scrolled and then display the results data.

Does this capability exist now in the Grid? If not, has anybody achieved this?

Grid

answered on 22 Jan 2015

3 answers

218 views

Toolbar splitbutton popup position

Hi there,

Please take a look at the attached image. The popup that opens for the split button does not exactly position to bottom right of the splitbutton arrow. Why does this happen? If anyone knows how to fix this, please let me know.

Thanks in advance,
Nisarg Patel

Toolbar

answered on 22 Jan 2015

2 answers

361 views

[Solved] TreeList/TreeListDataSource custom parameters in request

Hey guys,

I know the treeList is in its first public iteration and still coming up with updates and fixes. I wanted to know if there was any way of passing other parameters when requesting the child records of a treelist. For example:

Root
Child1
Child2 <-- When Making This Request is there a way to pass extra parameters such as { rootid: Root, parentid: Child1 }

I made a fiddle where I attempted to pass extra data regarding the hierarchy on expand, however I don't get my rows to display after the datasource fetches said data.

http://dojo.telerik.com/uxiXE

I'm sure there's some hook I'm missing or a function call i'm not making. Any suggestions?

Thanks

TreeList

answered on 22 Jan 2015

9 answers

2.5K+ views

Grid checkbox editor issue with incell editing

I am following the post at:

http://www.kendoui.com/forums/kendo-ui-web/grid/display-boolean-field-as-checkbox.aspx

This tells me to use a template to make a boolan value display as a checkbox instead of the words 'true' or 'false'.
I want the default editor (checkbox) to still function while using 'incell' editing.

The problem is that with the template shown above, I can't get the cell to edit when I click on the checkbox shown by the template. Instead, I have to click somewhere else in the cell to enable 'editing' of the cell and then the default editor is showed and I can change the text box.

How can I have a checkbox display that allows the user to perform 'incell' editing with a checkbox and not have the odd behavior of having to click somewhere in the cell (but not on the checkbox) to enable edit mode before the checkbox can be modified?

The following JS fiddle shows the problem:

http://jsfiddle.net/cn172/EntQX/2/

In this fiddle, click on a checkbox in the grid, but nothing happens. Now click somewhere inside a 'bool val' cell that isn't the checkbox and you'll see the checkbox transform into an editor. This behavior is confusing to users.

Grid

answered on 22 Jan 2015

1 answer

160 views

Treelist documentation

Hi!

Some suggestions for the TreeList's documentation:

addRow
http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#methods-addRow
Parameter list is missing from the "head" of the method definition (that you can add a new row under an existing row)

.d.ts type definition:

class TreeList extends kendo.ui.Widget{

//...

//the current method definition:

addRow(): void;

//I think it should be something like this:

addRow(parentRow?: any): void;

Toolbar

interface TreeListOptions.toolbar

//the current typing is the following:

toolbar?: TreeListToolbarItem[];

//according to the API docs, it should be something like this (this requres TypeScript 1.4 Union Types):

toolbar?: string | Function | TreeListToolbarItem[];

TreeList

answered on 22 Jan 2015

2 answers

1.1K+ views

[Solved] Disable/Enable Validation

I'm trying to disable and enable validation depending on the user selection. On my solution i would like to only validate if the user enters a start or end date. So far if you look at part of my solution code(copied to kendo ui dojo http://dojo.telerik.com/uyOHa ) i have some of the validation working. I will put down a couple of scenario on how i need it to work.

scenario 1(working)

User doesn't enter dates, Validation not needed

scenario 2(working)

User enters a start or end date. This will validate the text boxes.

scenario 3(NOT WORKING)

User enters start and end date. Click Search. Then Clear both date fields and validation is how showing for these two text boxes. I wish to have the validation hidden at this point. The only way i can do this so far is by clearing the text boxes then hitting search again.

Thanks in advance!

Validation

answered on 22 Jan 2015

2 answers

186 views

TreeView and SignalR

Hi!

I would like to use SignalR as data source of a MVVM TreeView, so I took the Grid SignalR example and I tried to modify it but I couldn't get it to work.

Here is what I got so far (app.js):

01.var viewModel;

02.

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

04.

05. var hubUrl = "signalr/hubs";

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

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

08. var hubStart = connection.start({jsonp: true});

09.

10. viewModel = kendo.observable({

11. allEvents: new kendo.data.HierarchicalDataSource({

12. type: "signalr",

13. autoSync: true,

14. push: function (e) {

15.

16. },

17. schema: {

18. model: {

19. id: "Id",

20. fields: {

21. "Id": {type: "number"},

22. "Name": {type: "string"},

23. "HasChildren": {type: "boolean"}

24. },

25. hasChildren: "HasChildren",

26. children: "Children"

27. }

28. },

29. transport: {

30. signalr: {

31. promise: hubStart,

32. hub: hub,

33. server: {

34. read: "read",

35. update: "update"

36. }

37. }

38. }

39. })

40. });

41.

42. kendo.bind($("body"), viewModel);

43.

44.

45.});

The HTML is pretty simple:

01.<body>

02.

03.<div id="content">

04.

05. <div data-role="treeview"

06. data-text-field="Name"

07. data-bind="source: allEvents"></div>

08.

09.</div>

10.

11.<script type="text/javascript" src="app.js"></script>

12.

13.</body>

And this is my Hub:

01.public class EventHub : Hub

02. {

03. public IEnumerable<Branch> Read()

04. {

05. return new List<Branch>

06. {

07. new Branch("Test branch 1", 1, new List<Branch> {new Branch("Test event 1", 2)}),

08. new Branch("Test branch 2", 3)

09. };

10. }

11.

12. public void Update(Branch branch)

13. {

14. Clients.Others.update(branch);

15. }

16. }

17.

18. public class Branch

19. {

20. public Branch()

21. {

22. Children = new List<Branch>();

23. }

24.

25. public Branch(string name, long id)

26. : this()

27. {

28. Name = name;

29. Id = id;

30. }

31.

32. public Branch(string name, long id, IEnumerable<Branch> children)

33. : this(name, id)

34. {

35. Children = children;

36. }

37.

38. public IEnumerable<Branch> Children { get; set; }

39. public string Name { get; set; }

40. public long Id { get; set; }

41. public Boolean HasChildren

42. {

43. get { return Children != null && Children.Any(); }

44. }

45. }

The first level ("Test branch 1" and "Test branch 2") is shown, but as soon as I click on the expand arrow, I get a javascript error. I would be happy if you could tell me where the problem is here or - even better - post a full example of a TreeView in combination with SignalR.

Thanks!

TreeView

answered on 22 Jan 2015