Questions on Kendo UI for jQuery Forum

3 answers

276 views

I need to implement vertical grids using kendo which is tied to the data models retrieved through a service call on DataSource read. In other words, the columns need to be displayed as rows and when I do an Add Record it should add a new column to the flipped or vertical grid and sync it with the server. How can I achieve that using Kendo Grid? I am using the angular implementation of Kendo.

Grid

answered on 13 Jan 2016

3 answers

643 views

[Solved] Import/paste data in Kendo Grid

Kendo Grid currently provides the export to excel feature out of the box. I need to be able to import data as well and also copy/paste data into the grid with validation. Can you provide me with an example as to how I can achieve these two: 1) Import from file and 2)copy/paste. I am using the angular implementation.

Grid

answered on 13 Jan 2016

1 answer

288 views

In TreeList, how to retain the sort order of child rows and sort only the parent rows?

Hi,

I have a requirement where i need to sort only the parent rows in the treeList, while the child rows retain the default ascending order.

1. Is there a way i can use compare method to retain sort order of child rows?

2. I also have to sort the parent rows for all pages in the treeList. I have implemented pagination using the method mentioned in this thread. How can sorting on entire data set be achieved?

I have used the sort hack mentioned in the thread:

// sort hack!

var originalSortFn = kendo.data.TreeListDataSource.fn.sort;

kendo.data.TreeListDataSource.fn.sort = function (e) {

if (arguments.length > 0) {

myODataSource.sort(e);

}

return originalSortFn.apply(this, arguments);

};

But, this hack code sorts the content in the displayed page first, then takes the entire data set. As a result, we see the data getting bound twice to the treeList, first time with the sort data of current page and then with the sorted data for entire data set. How can this be avoided? I want the data to be bound only once, after the sorting of entire data set?

I don't have a working jsfiddle example for this problem.

Thanks in advance.

TreeList

answered on 13 Jan 2016

8 answers

438 views

Scheduler recurrence editor default Days checkbox in Weekly mode

When creating a new recurring weekly event, the current day's checkbox is checked by default. For example, if today is Thursday, and I click on a Tuesday to create a weekly event, the Thursday checkbox will be checked. Is there an event I can handle when "Weekly" is selected to clear the checkboxes?

Scheduler

answered on 12 Jan 2016

5 answers

273 views

[Solved] Event changes length while moving

Let's say I have an event that goes from 9:00-10:00, and takes up 2 slots on the scheduler. When I drag that event to a different time, the faded image (while dragging) extends 3 slots, and appears to display over 8:30-10:00, but it will show 9:00-10:00 on the event, and when I release it does in fact save at 9:00-10:00.

I don't think there is really anything too crazy about the properties of my grid, so I'm curious if this is something that has happened before that someone might be able to assist with? Here is the code for my grid just in case:

var scheduler = $("#scheduler").kendoScheduler({

date: start,

startTime: start,

endTime: end,

height: 435,

width: 1310,

editable: {

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

destroy: false,

window: {

title: "Edit Task"

}

},

footer: false,

dataBound: function (e) {

CreateDropArea(this);

SetColors(e);

},

views: [

{ type: "timeline", majorTick: 60, columnWidth: 50, eventHeight: 40, selected: true },

{ type: "timelineWeek", majorTick: 60, columnWidth: 50, eventHeight: 40 }

],

timezone: "America/Phoenix",

group: {

resources: ["Assigned"],

orientation: "vertical"

},

resources: [

{

field: "AssignedTo",

name: "Assigned",

dataSource: {

transport: {

read: function(options) {

var resources = GetResources();

options.success(resources);

}

},

title: "Assigned To"

}

],

dataSource: {

batch: true,

transport: {

read: function (options) {

var meetings = GetMeetings();

options.success(meetings);

},

update: function (options) {

UpdateMeeting(options.data.models);

},

create: function (options) {

CreateMeeting(options.data.models);

},

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" },

isAllDay: { type: "boolean", from: "IsAllDay" }

}

}).data("kendoScheduler");

Scheduler

answered on 12 Jan 2016

2 answers

178 views

[Solved] Chart generates in Chrome, Errors in IE11

- Here is the error, only thrown in IE
SCRIPT5007: Unable to get property 'getTime' of undefined or null reference
File: kendo.all.min.js, Line: 71, Column: 8937

- I'm using v 2015.3.1111

- The div containing the charts is not drawn (display: none) while generating the charts

- Here is my JS to generate the chart:

$(chartId).kendoChart({

title: {

text: data.DataSet.ChannelData[i].ChannelName

},

series: [{

name: "Data",

visibleInLegend: false,

tooltip: {

template: "value: #= value.y #, time: #= FormatDate(value.x) #",

visible: true

},

type: "scatterLine",

xField: "Time",

yField: "Value",

data: formattedData,

markers: {

visible: false

}

}],

chartArea: {

width: (data.Columns == 3 ? 358 : (data.Columns == 2 ? 537 : 1074))

},

xAxis: [{

type: "date",

baseUnit: "seconds"

}],

yAxis: [{

axisCrossingValue: [-50000]

}],

pannable: true,

zoomable: true,

});

Charts

answered on 12 Jan 2016

3 answers

177 views

Initial state

Hello ,

When my web app loads the drawer is appearing for the first few miliseconds and than closes immediatly.

How can I make the drawer be closed when the app loads and not wait for it to close ?

Currently , the user see the drawer opens and than closes

Thx

Sagi

Drawer (Mobile)

answered on 12 Jan 2016

5 answers

268 views

autoScroll doesn't work in IE and FireFox

Hallo. I was trying to set auatoScroll in Sortable. All is working fine in Chrome, but won't work in IE or FF.
The markup for Sortables is below:

<div id="mainPanel" class="@leftSize" data-area-columns="@columnsFit[0]">

<div id="dashboardPanel1" class="dashboardPanel">

div id="addWidgetButtron1_@Model.Id" class="blankText" ng-click="addWidgetClicked(@Model.Id,1)">Drag your widgets here or <

a data-toggle="modal" data-target="#add-widget-modal">add a new widget</a></div>

<div dashId="@Model.Id" areano="1" class="tabContent"

kendo-sortable k-connect-with="'#ListView_2_@Model.Id, #ListView_3_@Model.Id'"

kendo-list-view="ListView_1_@Model.Id" id="ListView_1_@Model.Id"

k-options="widgetsListOptions(@Model.Id,1)">

</div>

@if (Model.Layout != DashboardLayout.Column1)

{

<div class="@centerSize" data-area-columns="@columnsFit[1]">

<div id="dashboardPanel2"class="dashboardPanel">

<div id="addWidgetButtron2_@Model.Id" class="blankText" ng-click="addWidgetClicked(@Model.Id,2)">Drag your widgets here or <a data-toggle="modal" data-target="#add-widget-modal">add a new widget</a></div>

<div id="ListView_2_@Model.Id" dashId="@Model.Id" areano="2" class="tabContent"

kendo-sortable k-connect-with="'#ListView_1_@Model.Id, #ListView_3_@Model.Id'"

kendo-list-view="ListView_2_@Model.Id" k-options="widgetsListOptions(@Model.Id,2)">

</div>

}

"widgetsListOptions" is below:

function widgetsListOptions(dashboardId, areaNo) {

return {

dataSource: new kendo.data.DataSource({

//removed from this post because too long and not related.

}),

template: function (e) {

var t = $templateCache.get('widgetTemplate' + e.widgetType + '.html');

return t;

},

change: function (e) {

$scope.widgetAreaChanged(e);

},

placeholder: function (element) {

return element.clone().addClass("placeholder");

},

hint: function (element) {

return element.clone().addClass("hint")

.height(element.height())

.width(element.width());

},

cursor: "move",

autoScroll:"true",

}

};

Chrome video: http://screencast.com/t/kxfy9RFiDt
IE(the same in FF) video: http://screencast.com/t/yz3TqRuIhGA

was used Kendo 2015.2.902, ASP .Net MVC, angular, bootstrap styles.

Sortable

answered on 12 Jan 2016

1 answer

221 views

Showing a notification after refreshing the datasource

Im doing something like this inside the success block of an ajax call. The grid data is refreshed, but the alert ( as a test) as well as my pop up notification are not shown. Is this expected behavior, or am I doing something wrong.

success: function (result) {

var statementBatchDS = $('#StatementBatch').data().kendoGrid.dataSource;

statementBatchDS.data(result.Data);

//test

//var popupNotification = $("#popupNotification").data("kendoNotification");

//popupNotification.show("Batch post error", "error");

alert('made it and name=' + $("#popupNotification").attr('id'));

var d = new Date();

popupNotification.show(kendo.toString(d, 'HH:MM:ss.') + kendo.toString(d.getMilliseconds(), "000"), "error");

}

Grid

answered on 12 Jan 2016

1 answer

147 views

Unable to reset the edited field to its Original value

When i edit the end date field and set to the some new date, onSave it does not retain its original value using .set method,

Or any other field for that case, if i edit and onSave if i try set the old value It will not set , (will not reflect in the UI)

$scope.ganttOptions = {

dataSource: $scope.ganttDataSource,
dependencies: $scope.ganttDataDependency,
columns: [
{ field: 'id', title: "Task ID", width: 50, sortable: true},
{ field: "title", title: "Title", width: 100, sortable: true, editable: true },
{ field: "days", title: "Duration", type: "number", width: 50, editable: true},
{ field: 'start', title: "Start", sortable: true, format: "{0:MM/dd/yyyy}", width: 100, editable: true },
{ field: 'end', title: "End", sortable: true, format: "{0:MM/dd/yyyy}", width: 100, editable: true },
{ field: 'percentComplete', title: '%', width: 50, editable: true},
],
views: [
"day",
"week",
{ type: "month", selected: true },
],
add: onAdd,
edit: onEdit,
cancel: onCancel,
save: onSave,
};