Questions on Kendo UI for jQuery Forum

3 answers

92 views

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

236 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

152 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

153 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

236 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

1 answer

141 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

148 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

223 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

3 answers

91 views

Waterfall Chart

It seems Kendo UI does not support Waterfall chart. Is that right?

Is there any trick to implement this kind of chart with the other available charts?

Thanks in advance.

General Discussions

answered on 29 Jan 2014