Questions on Kendo UI for jQuery Forum

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

189 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

263 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

90 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

175 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

180 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

295 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

118 views

[Solved] 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

2 answers

166 views

open method doesn't work on ipad

Hello,

the actionsheet isn't visible on ipad.
could you please check the sample if the code is wrong?

thank you
axel

ActionSheet

answered on 28 Jan 2014

4 answers

150 views

[Solved] Setting Pager 'pageSizes' property via data attribute

I'm attempting to set the pageSizes property of the Pager widget via the data attribute "data-page-sizes". It works if I set it to a literal array, such as:

data-page-sizes="[15,30,60]"

But, it doesn't work if I try to set it to a javascript variable, such as:

data-page-sizes="myPageSizes"

How can I set this property to a javascript variable with the data attribute ?

Here's a js.bin example: http://jsbin.com/aruTaWOZ/1/edit

General Discussions