Questions on Kendo UI for jQuery Forum

2 answers

259 views

Hi !

When I use a custom template as shown below, my translations (via messages option) no longer work for generated code (example: recurrenceRule).

Do you have an idea ?

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

<div class="k-edit-label"><label for="title">Type</label></div>

<div data-container-for="typeId" class="k-edit-field">

<select id="typeId" data-bind="value:typeId" data-role="dropdownlist" data-value-field="value" data-text-field="text" style="width: 100%"></select>

</div>

<div class="k-edit-label">

<label for="start">Début</label>

</div>

<div data-container-for="start" class="k-edit-field">

<input type="text"

data-role="datetimepicker"

data-interval="15"

data-type="date"

data-bind="value:start,invisible:isAllDay"

name="start"/>

<input type="text" data-type="date" data-role="datepicker" data-bind="value:start,visible:isAllDay" name="start" />

<span data-bind="text: startTimezone"></span>

<span data-for="start" class="k-invalid-msg" style="display: none;"></span>

</div>

<div class="k-edit-label"><label for="end">Fin</label></div>

<div data-container-for="end" class="k-edit-field">

<input type="text" data-type="date" data-role="datetimepicker" data-bind="value:end,invisible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />

<input type="text" data-type="date" data-role="datepicker" data-bind="value:end,visible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />

<span data-bind="text: endTimezone"></span>

<span data-bind="text: startTimezone, invisible: endTimezone"></span>

<span data-for="end" class="k-invalid-msg" style="display: none;"></span>

</div>

<div class="k-edit-label"><label for="recurrenceRule">Récurrence</label></div>

<div data-container-for="recurrenceRule" class="k-edit-field">

<div id="recurrenceEditor" data-bind="value:recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor"></div>

</div>

<div class="k-edit-label"><label for="description">Note</label></div>

<div data-container-for="description" class="k-edit-field">

<textarea name="description" class="k-textbox" data-bind="value:description"></textarea>

</div>

</script>

edit: function(e) {

var typeId = e.container.find("#typeId").data("kendoDropDownList");

typeId.dataSource.data(e.sender.resources[0].dataSource.data());

var recurrenceEditor = e.container.find("[data-role=recurrenceeditor]").data("kendoRecurrenceEditor");

recurrenceEditor.setOptions({

start: e.event.start

});

},

editable: {

template: $("#editor").html()

}

Thanks,

Scheduler

answered on 08 Sep 2015

1 answer

171 views

[Solved] Performance issue with more than 2000 records

Hello all,

Could you please help my with performance issue.

in our project we have more then 2000 records and ~20 columns (without paging because it is project needed).

When we try reorder column or scrolling down our grid it is take a lot of time on any operation.

We cant use virtual scroll because he sync changes(like implicit paging).

Our requirement are multi-editing any row on grid and sync by button (save all)

I am understand that when we move column we are changed DOM model and rendering it is expensive operation, but maybe you have some mechanism to improve performance?

Thanks

Grid

answered on 08 Sep 2015

1 answer

145 views

Best practice to bind observable data to a view and globals

Hello Guys,

I have minified my example. I have some views with its viewmodel and globals.

Here is a part of my view:

<div >

<div id="UrlIndex" align="center" class="v-center">

<label for="icon-right">

<h4>Enter the URL</h4>

</label>

<span class="k-textbox k-space-right" style="width:70%" >

<input class="k-textbox" type="text" id="icon-right" data-bind="value: url" />

<a href="#" class="k-icon k-i-search"></a>

</span>

</div>

Here is the viewModel for this View:

(function () {

var app;

window.Books = kendo.observable({

url:"Enter the url",

data: new kendo.data.DataSource({

transport: {

read: this.get("url")

},

schema: {

data: "books"

}

}),

test: function(){

}

});

kendo.bind($("#UrlIndex"), window.Books);

document.addEventListener("deviceready", function () {

navigator.splashscreen.hide();

app = new kendo.mobile.Application(document.body,{layout: "main-layout"});

}, false);

window.app = app;

}());

This is the way i did the namespace and the viewmodel. Is there a better way to do this ? And another problem is that the binding to the view of

kendo.bind($("#UrlIndex"), window.Books);

only works if it is inside the device-ready function. Can you tell me what is the right, efficient and common way to do this. Can u give an example how to works with namespaces and observables. If I wrap the document ready function at the beginning it still is not binding.

Another problem is this:

read: this.get("url")

It doesnt get the url, how is the right way. Thank you.

General Discussions

answered on 08 Sep 2015

5 answers

296 views

Horizontal grouping not sizing correctly

I want to use Horizontal Grouping on the scheduler, but I find as the number of resources grows, the cell widths are resized smaller to fit all columns into the view.

In the code below I have added 10 meeting rooms to show my problem.

How can I set a minimum width of the resource column so that all the event cells are readable?

I have added a horizontal scrollbar in my example, but I still need to set a min width.

Thanks

<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/scheduler/resources-grouping-horizontal">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.silver.min.css" />

<script src="//kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.timezones.min.js"></script>
<style>
.k-scheduler-layout {
table-layout: fixed;
}

.k-scheduler-layout > tbody > tr > td:first-child
{
width: 80px;
}

.k-scheduler-content .k-scheduler-table,
.k-scheduler-header .k-scheduler-table
{
width: 2000px
}
</style>
</head>
<body>
<div id="example" class="k-content">

<div id="scheduler"></div>
</div>
<script>
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
"day",
{ type: "week", selected: true },
"month",
"timeline"
],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "//demos.telerik.com/kendo-ui/service/meetings",
dataType: "jsonp"
},
update: {
url: "//demos.telerik.com/kendo-ui/service/meetings/update",
dataType: "jsonp"
},
create: {
url: "//demos.telerik.com/kendo-ui/service/meetings/create",
dataType: "jsonp"
},
destroy: {
url: "//demos.telerik.com/kendo-ui/service/meetings/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { from: "MeetingID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
roomId: { from: "RoomID", nullable: true },
attendees: { from: "Attendees", nullable: true },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
},
group: {
resources: ["Rooms"]
},
resources: [
{
field: "roomId",
name: "Rooms",
dataSource: [
{ text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
{ text: "Meeting Room 201", value: 2, color: "#f58a8a" },
{ text: "Meeting Room 303", value: 3, color: "#6eb3fa" },
{ text: "Meeting Room 404", value: 4, color: "#f58a8a" },
{ text: "Meeting Room 501", value: 5, color: "#6eb3fa" },
{ text: "Meeting Room 601", value: 6, color: "#f58a8a" },
{ text: "Meeting Room 703", value: 7, color: "#6eb3fa" },
{ text: "Meeting Room 80", value: 8, color: "#6eb3fa" },
{ text: "Meeting Room 901", value: 9, color: "#f58a8a" },
{ text: "Meeting Room 113", value: 10, color: "#6eb3fa" },
],
title: "Room"
},
{
field: "attendees",
name: "Attendees",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
],
multiple: true,
title: "Attendees"
}
]
});
});
</script>

</body>
</html>

Scheduler

answered on 08 Sep 2015

1 answer

102 views

Combining client and server side paging

Hi,

Is there a way to use client side paging for a grid, but not get all the pages at once, or server side paging but getting more than one page at a time. For example, when first loading the page, get the first 3 pages out of 10

Thank you in advance.

Grid

answered on 08 Sep 2015

1 answer

98 views

How to detect column reorder outside of parent field

Hi,

I am looking at a scenario similar to this: http://dojo.telerik.com/owiRE

This allows the user to drag columns around within its parent field.

I would like to detect when the user attempts to drag the field outside of its parent so we can restructure the 'groups' - is this possible?

Thanks,

Anthony

Grid

answered on 08 Sep 2015

5 answers

764 views

[Solved] Resized event (resize ends)

Is there a resized or resizeEnd event on window?
I am saving width and height in localStorage, but I want to do that only when window is resized, not continuously when window is resizing.

Window

answered on 07 Sep 2015

3 answers

133 views

Can't enter edit mode (iPhone 6)

I experience hard time to focus the field using iPhone 6.

First in my project, than in your demo http://demos.telerik.com/kendo-ui/datetimepicker/index

After multiple tests, I found how to get it done, but It's not UX friendly.

Tap and hold on the field until the label get selected.

Than tap under the selected zone to get the focus in the field.

iOS 8.4.1

Safari

Thank you

DatePicker

answered on 07 Sep 2015

1 answer

449 views

Get values from telerik multiselect in C# instead of javascript

I have the following multi select from telerik on my asp.net mvc project

<div class="demo-section user-selection">

<h3 class="title">Select customers</h3>

@(Html.Kendo().MultiSelect()

.Name("customers")

.DataTextField("givenName")

.DataValueField("description")

.Placeholder("No users selected")

.Events(events => events.Change("TestFunc"))

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetCustomers", "Home");

});

})

.Height(300)

//.HtmlAttributes(new { style = "width: 400px" })

.HeaderTemplate("

<div class=\"dropdown-header\">" +

"

<span class=\"k-widget k-header\">Photo</span>" +

"

<span class=\"k-widget k-header\">Contact info</span>" +

"

</div>")

.ItemTemplate("

<span class=\"k-state-default\">

<img class=\"userPhoto\" src=\"" + Url.Content("http://yarris.design/images/userCentered.png") + "\" />

</span>" +

"

<span class=\"k-state-default\">

<h3>#: data.givenName #</h3>

<p>#: data.description #</p>

</span>")

.TagTemplate("

<img class=\"tag-image\" src=\"" + Url.Content("http://yarris.design/images/userCentered.png") + "\" alt=\"\" />" +

"#: data.givenName #")

)

</div>

Everytime someone is selected i want to do some operations, right now im reading the selected with this javascript

function TestFunc() {

var multiselect = $("#customers").data("kendoMultiSelect");

// get data items for the selected options.

var dataItem = multiselect.dataItems();

console.log(dataItem);

}

I would like to know how can i read it in my HomeController.cs instead.

MultiSelect

answered on 07 Sep 2015

1 answer

213 views

How to make timeline event always fill width of day

I would like to design a timeline with one major tick per day (with one minor tick), where events always fill width of the day column (even if they are not all-day events).

Here is a snippet I wrote to show this scenario, and you'll see the 8 am - 5pm does not fill width but rather width depends on event hours: http://dojo.telerik.com/@jacob/ENAzo

Is there a configuration to always make event fill the tick column? If not, is there an easy class override I can make to do this? (I am on trial now, so I don't have access to non-minimized source code.)

Thanks.

Scheduler

answered on 06 Sep 2015