Questions on Kendo UI for jQuery Forum

3 answers

81 views

[Solved] 2 Schedulers on the same page...uhhh

Attached is what 2 ajax-fed schedulers on the same page look like...??

Scheduler

answered on 11 Nov 2013

12 answers

2.0K+ views

Kendo Grid - sort on column bound to an object

Hi

I have a kendo grid with sorting enabled. I am trying to sort on a column with a field called "Document_Category"

In the model Document_Category is an object that is comprised of 2 properties: Document_Category_Name (string) and Document_Category_ID (int). I have this field setup as an object this way so I can bind the id to the selected item of a dropdown list in the editor template

How can I can I configure the grid to sort this column by the Document_Category_Name property of the object that the field is bound to.

Is this possible? If not is there another way to bind to a dropdown list?

My code is below; thanks

$("#grid").kendoGrid({

             columns: [
                    { title: " ", template: "#= doclink(data) #", width: 31 },

                    { field: "Document_Category", title: "Category", width: "150px", editor: categoryDropDownEditor, template: "#=Document_Category.Document_Category_Name#" },
                    { field: "DOCUMENT_TITLE", title: "Title" },
                    { field: "DOCUMENT_FILE_NAME", title: "File Name" },
                    { field: "DOCUMENT_DESCRIPTION", title: "Description" },

                    { field: "DOCUMENT_FILE_SIZE", title: "File Size" },
                    { field: "tags", title: "Tags" },
                    { field: "DOCUMENT_CREATION_DATE", title: "Creation Date", format: "{0:dd-MMM-yyyy}" },

                    { command: "destroy", title: "Delete", width: "110px" }
                ],
             pageable: {
                 info: true
             }, // enable paging
             filterable: false, // enable filtering
             sortable: true, // enable sorting
             editable: true, // enable editing
             toolbar: ["save", "cancel"], // specify toolbar commands

             dataSource: {

                 serverPaging: false,
                 serverSorting: false,
                 serverFiltering: false,
                 pageSize: 5,
                 schema: {
                     data: "Data",
                     total: function (res) {
                         return res.total;
                     },
                     model: {
                         id: "DOCUMENT_ID",
                         fields: {

                             DOCUMENT_ID: { editable: false },
                             Document_Category: { editable: true },
                             DOCUMENT_TITLE: { type: "string" },
                             DOCUMENT_DESCRIPTION: { type: "string" },
                             tags: { type: "string" },
                             DOCUMENT_FILE_NAME: { type: "string", editable: false },
                             DOCUMENT_FILE_SIZE: { type: "string", editable: false },
                             DOCUMENT_CREATION_DATE: { type: "date", editable: false }

                         }
                     }
                 },
                 // pageable: true,
                 batch: true,
                 transport: {

                     read: {
                         url: "GetDocuments?category_id=-1",
                         contentType: "application/json; charset=utf-8",
                         type: "POST"
                     },
                     update: {
                         url: "Update", service.
                         contentType: "application/json; charset=utf-8",
                         type: "POST"
                     },
                     destroy: {
                         url: "Destroy",
                         contentType: "application/json; charset=utf-8",
                         type: "POST"
                     },
                     parameterMap: function (data, operation) {


                         if (data.models) {
                             return JSON.stringify({ documents: data.models });
                         } else if (operation == "read") {
                             //Page methods always need values for their parameters

                             data = $.extend({ sort: null, filter: null }, data);

                             return JSON.stringify(data);
                         }
                     }
                 }
             }
         });
     });

     function categoryDropDownEditor(container, options) {

         $('<input data-text-field="Document_Category_Name" data-value-field="Document_Category_ID" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: category_items // array of document categories
                        });
     }

Grid

answered on 11 Nov 2013

1 answer

624 views

[Solved] Accessing Html Attribute in treeview

Hello I have a treeview where I have added a integer Id as a hmtlattribute. This is a MVC4 Kendo UI project.

branch.Add().Text("Item " + child).HtmlAttributes(new { data_foo = childs.MyId })

I am trying to access it from a button click event when a node is selected to pass foo to another view.

$("#btn").click(function () {

var treeview = $("#treeview").data("kendoTreeView");

var treeSelect = treeview.select();

var passId = treeSelect.attr("foo");

window.location = "@Url.Action("Index","Content")" + "?MyIntegerParameter=" + passId;*

});

Here is the element from Chrome

<li class="k-item" data-foo="30" data-uid="7f3430d0-4b01-4b08-b4be-1264d3ff16d3" role="treeitem" aria-selected="true" id="treeview_tv_active">

<div class="k-top">

<span class="k-in k-state-selected">This Is The Text</span>

</div>

</li>

How can I access this from the button click and send it in the Action?

TreeView

answered on 11 Nov 2013

9 answers

223 views

The upload button turns blue and remains so.

Hi,

Can someone guide me to resolve following issue/bug.

http://eesea.antheminfotech.net/countries

Upload button: (Countries, Location type and Terminal type)
a.      In any of the page, click new
b.      Click upload and choose any image
c.      Click cancel
d.      Bug: The upload button turns blue and remains so.

Upload

answered on 11 Nov 2013

3 answers

133 views

View with reload=true and a data-model set throws error on 2nd visit.

The error thrown is: Uncaught TypeError: Cannot call method 'closest' of undefined.
I have created a simple app to reproduce the behavior.

Attached is the full project with kendo and jQuery dependencies, but I am including the source for search relevance.

index.html

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link href="styles/kendo.common.min.css" rel="stylesheet" />

<link href="styles/kendo.default.min.css" rel="stylesheet" />

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />

<script src="js/lib/jquery/jquery.min.js"></script>

<script src="js/lib/kendo/kendo.all.js"></script>

</head>

<body>

<div data-role="layout" data-id="myLayout">

<div data-role="header">

<div data-role="navbar">

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

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

<a id="btnOK" class="nav-button" data-align="right" data-role="button" href="page2.html">Next</a>

</div>

<div data-role="view" data-title="Test App" data-layout="myLayout">

Welcome to the app

</div>

<script>

var app = new kendo.mobile.Application(document.body,

{

transition: 'slide'

});

</script>

</body>

</html>

page2.html

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>

<body>

<script src="js/app/page2.js"></script>

<div data-role="view" data-layout="myLayout" data-model="p2Model" data-reload="true">

<ul data-role="listview" data-template="listItem" data-bind="source: dsList"></ul>

</div>

<script id="listItem" type="text/x-kendo-template">

#: FirstName # #: LastName #

</script>

</body>

</html>

js/app/page2.js

var p2Model;

if (p2Model == null)

{

p2Model = kendo.observable({

dsList: new kendo.data.DataSource({

data: [{id: 1, FirstName: "Bilbo", LastName: "Baggins"}, {id: 2, FirstName: "Malcolm", LastName: "Reynolds"}]

})

});

}

I set the reload="true" attribute on the root view in page2.html because my desire is to have the page refresh with changes made to the underlying model (p2Model) as well as update the datasource's data. When page2 is visited the first time, everything works as expected. But if you hit the back button in the app, and then visit page2 again, the error is thrown.
What is interesting to note is that if the singleton behavior of the p2Model is removed and it is reconstructed on each page2 visit, then it also works as expected.
However, I desire to have some persistent attributes of the p2Model that could be set while visiting page2 and would not be lost when the page is revisited.
Ideally I could use something like a requireJS module for this, but I have not seen any examples on how to leverage it with remote views.

Are there any examples or best practices on how to leverage modular javascript in remote views? In the Kendo Music Store tutorial it seems to imply that Kendo will automatically load the .js module with the same name as a view (http://docs.kendoui.com/tutorials/Mobile/Kendo%20Mobile%20Music%20Store/kendo-mobile-music-store-organization#js-file-per-view) but I have not observed this working with a remote view like page2.html. Or perhaps my understanding of requireJS is incorrect.

Thanks

General Discussions

answered on 11 Nov 2013

1 answer

132 views

[Solved] Changing tooltip format of ohlc

Hi,

On the demo page for stock chart, I see the values of ohlc values with .2 digit precision. eg: 73.84, 74.56... How can I change that sample to show values in 4 digit precision. eg: 73.8400, 74.5697...

Thanks in advance,

Charts

answered on 11 Nov 2013

1 answer

509 views

Default to business hours?

1) Is there a way to default to "Business Hours"?

2) Could we maybe get some sort of notification or SOMETHING that there might be events hidden in the collapsed area? Like if my business hours are 9-5, but the event is at 6...user is totally unaware.

Scheduler

answered on 11 Nov 2013

1 answer

151 views

Kendo datepicker doesnt show up

using this way to load kendo datepicker:
<input data-bind="kendoDatePicker: { value: myDate}" class="k-widget" />

Doing this, it loads only the textbox with a side icon - clicking on icon doesn't open the date/calendar. Any particular reason ??

Grid

answered on 11 Nov 2013

1 answer

353 views

scheduler block the date slot from editing

dear sir,

i'm new to scheduler and i want the scheduler will block some date,time slot based on the date-time from back-end table
and here we did not allowed to insert or update the data on that particular slot

please give the worked JSBin sample for the above thread

like the image below

thanks & regards

-santhosh.B

Scheduler

answered on 11 Nov 2013

5 answers

507 views

Null reference when updating an event in the scheduler

Hello,

We experience a script error randomly when moving events with drag and drop within the scheduler.
The Visual explanation is that the event we have started to move - dont "release" from the mouse and are stuck with the cursor. As you can see in the attached file, the problem occur in the kendo.web.min.js library.

The current configuration run on Win 8.1 , IE11 and on the kendoui.complete.2013.2.918.commercial release.

Our datasource:

dataSource = new kendo.data.SchedulerDataSource({

sync: function () {

this.read();

},

batch: true,

transport: {

read: {

url: m_serverUrl + "/ActivityPointerSet",

dataType: 'json'

},

parameterMap: function (options) {

var parameter = {

$filter: filterstring,

$select: 'ActivityTypeCode,ActivityId,Subject,ScheduledEnd,ScheduledStart,StatusCode,OwnerId'

};

return parameter;

}

},

schema: {

model: {

id: "ActivityId",

fields: {

taskId: { from: "ActivityId" },

title: { from: "Subject", defaultValue: "No title", validation: { required: true} },

start: { type: "date", from: "ScheduledStart" },

end: { type: "date", from: "ScheduledEnd" },

//startTimezone: { from: "StartTimezone" },

//endTimezone: { from: "EndTimezone" },

StatusCode: { from: "StatusCode" },

roomId: { from: "ActivityTypeCode" },

description: { from: "StatusCode" },

recurrenceId: { from: "RecurrenceID" },

recurrenceRule: { from: "RecurrenceRule" },

recurrenceException: { from: "RecurrenceException" },

ownerId: { from: "OwnerId", defaultValue: 1 },

isAllDay: { type: "boolean", defaultValue: false }

}

},

parse: function (data) {

return data.d.results;

},

type: "json"

},

serverSorting: true,

serverFiltering: true

});

return dataSource;

}

The Scheduler initialisation method

function ISV_Abs_InitKendoScheduler() {

var datasource = ISV_Abs_GetSchedulerDataSource();

$("#scheduler").kendoScheduler({

date: new Date(),

editable: {

confirmation: "Are you sure you want to delete this Sales Call?"

},

startTime: new Date("2013/6/13 07:00 AM"),

navigate: scheduler_navigate,

remove: scheduler_remove,

resizeStart: scheduler_resizestart,

save: scheduler_save,

moveStart: scheduler_movestart,

views: [

"day",

{ type: "week", selected: true },

"month",

"agenda"

],

edit: function (e) {

Xrm.Utility.openEntityForm(e.event.roomId, e.event.taskId, null);

e.preventDefault();

return false;

},

dataSource: dataSource,

resources: [

{

field: "roomId",

dataSource: [

{ text: "Sales Call", value: "abs_salescall", color: "#7ea700" },

{ text: "Appointment", value: "appointment", color: "#0094E5" }

],

title: "Activity Type"

}]

});

}

function scheduler_movestart(e) {

if (e.event.description.Value == 2 || e.event.description.Value == 3) {

alert("Cannot update a canceled or completed Activity");

e.preventDefault();

return false;

}

I very happy for any help on this mather.

Best Regards

Scheduler

answered on 11 Nov 2013