Questions on Kendo UI for jQuery Forum

1 answer

386 views

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

115 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

308 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

183 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

190 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

266 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

96 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

1 answer

177 views

Kendo MVC Grid through Stored procedure returning Dynamically created Columns

Am trying to use Linq (VB.net) to populate grid with data returning from MS SQL Stored procedure.
1) Every thing works fine if SP returns fixed numbers of colums ex -

Create procedure testp1 as
begin
select * from tab_a
end

2) How ever things dont work if SP returns dynamically created column names ex -

Create procedure testp2 as
begin
select 'T'+ltrim(str(day(getdate()-2),2)),'T'+ltrim(str(day(getdate()-1),2)),'T'+ltrim(str(day(getdate()),2))
end

Is there a way to populate data grid for SP like second one given above?

Grid

answered on 29 Jan 2014

1 answer

186 views

Exceptions during drag-and-drop operations in Scheduler

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()

});

We need to have custom drag-and-drop handlers, but moveStart/move/moveEnd work unstable, sometimes it's impossible to drop the event (it sticks to mouse cursor) and exceptions are thrown from inside Kendo code after several D&D actions. We tried to block drag-and-drop operations (by calling preventDefault event methods, as you can see in the code above), but this does not help: if aggressively try to drag an event, exception appears again - but expected behavior is nothing should happen since the beginning of drag operation is prevented.

The question is how to properly implement the moveStart/move/moveEnd handlers to have stable working in both cases (with custom logic and just to block the D&D feature)?

Thank you very much in advance!

Scheduler

answered on 29 Jan 2014

1 answer

300 views

Timezone clarification

I have a product where the users of the application are in different timezones and need to display scheduled entered by that user to other user's timezone. I currently have the scheduler's timezone configured to "Etc/UTC".

The dates saved to the SQL database always equal the dates entered into the scheduler, regardless of the browser's or server's timezone. It doesn't make sense to me if the incoming time is in UTC time or what???

How am I to convert the times to the appropriate timezone? I do know what timezone the user is in, as it is part of the user's profile and its not dependent on the browser.

Thanks,
Chris

Scheduler

answered on 29 Jan 2014