Questions on Kendo UI for jQuery Forum

1 answer

858 views

how to get treeview node's parent node's parent ?

I know we can get treeview node's parent by this.parent(e.node). But how to get parent's parent?

Thank you.

TreeView

answered on 29 Jan 2014

1 answer

944 views

Temporarily disable edit functionality on a grid

Is there a way to temporarily disable the edit functionality on the grid? I tried setting editable to false on a previously editable grid, but it didn't pick up the new configuration change.

Grid

answered on 29 Jan 2014

4 answers

142 views

Splitter Resize Problem In 2013.3.1119

I have a splitter in a window and resize the splitter to fit the window like this...

//open window
window.data("kendoWindow").open();

//ensure splitter is sized correctly
splitter.trigger("resize");

this code works in 2013.1.419

when i upgraded to the latest version (2013.3.1119) this no longer works. any ideas?

Splitter

answered on 29 Jan 2014

1 answer

321 views

Using with a large data source

I need to use MultiSelect with a large data source (15K+ items) and am trying to figure out if this is possible with reasonable performance. I've enabled server-side filtering, but the control still tries to pull down the entire list of items on initialization. Part of my dilemma is that one client has 10K+ items that are all in the format of: 12345***** where the first 5 characters are always the same. I think ideally the control would have some sort of virtualization where it could pull down a page of data at a time while the user scrolls through it.

Are there any tips for working with the control using large data sources?

MultiSelect

answered on 29 Jan 2014

3 answers

89 views

White flash on startup

I'm running it in the context of an Android app, and when I go to the kendo page part it flashes white first, then goes to the correct style/dark background. Is there any way to not flash white when starting up?

General Discussions

answered on 29 Jan 2014

7 answers

228 views

IE 11 Vertical Scroll Issue with Kendo-Template/tabstrip

I've got a Kendo UI Grid with row details displaying tabs, using the kendo-template and tabRowDetails.   I've got a div in the tab that contains text with over-flow-y: scroll so that the user can scroll through the text in the row detail without having to take up the whole page. The scrolling works fine with Firefox, Chome, and Safari, but the vertical scroll does not work with IE11(scrolling with mouse wheel works ok).   The scrolling lags when clicking on the scroll bar and dragging...

The html looks like:
<div id="example" class="k-content">
     <div id="grid"></div>
     <script type="text/x-kendo-template" id="template">
         <div class="tabstrip">
             <ul class="tabRowDetails">
                 <li class="k-state-active tabformat" onclick="TabClicked(this)">
                         Visit
                </li>
                         etc.............
          </ul>
        <div class="pageViewDetailsTop tabGeneral">
         
         <table>
            <tr>
                 <td>
                 </td>
                <td style="border-left: none;">
                           -----> scrolling div here......
                 </td>
          </tr>
        ............

Grid

answered on 29 Jan 2014

1 answer

150 views

Hierachy listening on click of dropdown arrow

How does one listen on clicks on the dropdown arrow that's generated by the hierachy grid?

Grid

answered on 29 Jan 2014

1 answer

147 views

Resize event feature is not displayed for Scheduler events

We use the Scheduler widget like the following:

<div id="scheduler" style="height:500px"></div>

$("#scheduler").kendoScheduler({

editable: {

confirmation: false

},

resources: ko.observable([

{

field: "displayMode",

dataSource: [

{ text: "Regular-Other-Future", value: 111, color: "#93D095" },

...

]

}

]),

add: function (e) {

e.preventDefault();

// Custom adding implementation

},

edit: function (e) {

e.preventDefault();

// Custom editing implementation

},

remove: function (e) {

e.preventDefault();

// Custom removing implementation

},

moveStart: function (e) {

e.preventDefault(); // Prevent drag-and-drop

},

move: function (e) {

e.preventDefault(); // Prevent drag-and-drop

},

moveEnd: function (e) {

e.preventDefault(); // Prevent drag-and-drop

},

views: [{ type: "day", showWorkHours: true }, { type: "week", showWorkHours: true, selected: true }, "month", "agenda"],

timezone: "Etc/UTC",

date: new Date(),

dataSource: self.dataSource // self.dataSource is KO observable, which is assigned later with kendo.data.SchedulerDataSource()

});

There is no ability for events resizing - when cursor is over an event, cross icon appears but no marks for resizing (as result no resizeStart/resize/resizeEnd events are fired). Please look at the attached screenshot.

How to make the event resizing feature to be active? It looks like by default it should be available but in our case it is even just not visible.

Thank you in advance!

Scheduler

answered on 29 Jan 2014

5 answers

232 views

Listview with endless scrolling shows only one item

I have a problem with creating a listview. I have a category page from where i navigate to a messages page specific to the chosen category. The messages view is a listview with and endless scroll in it. The problem is that I always only see one item in the listview and when i try to update the listview i get a TypeError undefined has no properties.

I have attached the code below, Im really stuck on what to do?

categories.html

01.<div id="category" data-role="view" class="NoBack" data-init="getCategories" data-show="categoryShow" data-title="Categories">

02. <header data-role="header" data-id="defaultHeader">

03. <div data-role="navbar" data-id="firstNavbar">

04. <a class="nav-button" data-role="backbutton" data-align="left">Back</a>

05. <span data-role="view-title"></span>

06. </div>

07. <div data-role="navbar" data-id="secondNavBar">

08. <ul id="buttongroup" data-role="buttongroup" data-index="0" data-select="redirect">

09. <li>View Categories</li>

10. <li>View All</li>

11. </ul>

12. </div>

13. </header>

14. <div>

15. <ul data-role='listview' data-style='inset' data-source="categoryListDS" data-template="categoryTemplate" data-select-on="up">

16. </ul>

17. </div>

18. <script id="categoryTemplate" type="script/x-kendo-template">

19. <a id="#: id#" title="#: title#" onclick="updateMessages(id,title);return false;">

20. <img src="#: icon#"/>#: title#</a>

21. </script>

22.</div>

messages.html

01.<div id="messageList" data-role="view" data-title="Secrets">

02. 

03. <ul id="messageList" data-role="listview" data-source="messagesDS" data-endless-scroll="true" data-template="messagesTemplate">

04. </ul>

05.

06.

07. <script type="text/x-kendo-template" id="messagesTemplate">

08. <a id="#:id#" href="messageDetails.html?id=#:id#&message=#:message#">

09. <p>#:message#</p>

10. </a>

11. </script>

12.</div>

Snippet of JS associated with the problem

01.var messagesDS = new kendo.data.DataSource({

02. data: [],

03. pageSize: 60,

04.});

05.

06.

07.function clearMessages(){

08. messagesDS.data([]);

09.}

10.

11.// Updates the messages and shows them to the user

12.// TODO: make the language dynamic

13.function updateMessages(id, title) {

14.

15. clearMessages();

16.

17. var data = {

18. 'language': "en",

19. 'api_version': '2'

20. };

21. var categoryId = id.split('-').pop();

22. categoryId = typeof categoryId !== 'undefined' ? categoryId : "";

23.

24. var url = SERVER_NAME;

25. if (categoryId === "") {

26. url += '/secret/all';

27. }

28. else {

29. url += '/secret/category/' + categoryId;

30. }

31. url += '?callback=?';

32.

33. $.getJSON(url, data, function(json) {

34. $.each(json.messages, function() {

35. messagesDS.add({id: this.id, message: this.message, machineTimestamp: this.machine_timestamp, humanTimeStamp: this.human_timestamp, comments: this.number_comments})

36. });

37. });

38. app.application.navigate('messages.html');

39.}

General Discussions

answered on 29 Jan 2014

1 answer

75 views

Selectable Multiple Post

I have a grid where I want to select multiple rows and post back a list of IDs back to an action. I've tried various ways but I'm not successful. Here's my code.

@Html.Kendo().Grid(Model).Name("events").Columns(columns =>
    {
        columns.Bound(c => c.EventID).Width(140).Title("Name").Hidden(true);
        columns.Bound(c => c.EventName).Width(140).Title("Name");
        columns.Bound(c => c.EventStatus).Width(120).Title("Status");
        columns.Bound(c => c.EventStartDate).Width(140).Format("{0: MM-dd-yyyy}").Title("Start Date");
        columns.Bound(c => c.EventEndDate).Width(140).Format("{0: MM-dd-yyyy}").Title("End Date");
        columns.Bound(c => c.RegisteredParticipants).Width(120).Title("Registered");
    }).HtmlAttributes(new { style = "height: 400px;" }).Scrollable().Sortable().Selectable(s => s.Mode(GridSelectionMode.Multiple)).DataSource(d => d.Server().Model(m => m.Id(c => c.EventID))
)

//Action
   [HttpPost]
     public ActionResult EmailEvents(IEnumerable<int> events)
     {

         if (events != null)
         {
             if (events.Any())
             {
                 EmailEventParticipants(events);
             }
         }
return View();
     }

Grid

answered on 29 Jan 2014