Questions on Kendo UI for jQuery Forum

1 answer

760 views

Height for TabStrip with Grid and remote data

I want to have a TabStrip whose tab content consumes all remaining screen height. The content of all tabs is AJAX loaded, and at least one has a Grid, which is fed with a remote data source. It looks like I need to explicitly set a pixel height for a container somewhere up the chain from the TabStrip's (since something has to be other that 100%), perhaps set the height of the "k-content" containers, recalculate the Grid height when it is loaded, and potentially have specific scrolling options for the grid. I've found pieces of the solutions, but is there any demo that has this all in one place? I'm having trouble getting it to work, and I'm not sure I know all the correct things needed, and their timing.

Currently the grid seems to be sizing only the k-grid-header, with the k-grid-content div set to 1px. I think this may be that the grid is sizing itself before the remote data is available. I seem to remember a suggestion that I might need to resize the grid during the dataBound event?

If there is a demo with this combination, or the steps required, it would be very helpful.

TabStrip

answered on 13 Jan 2016

3 answers

282 views

[Solved] Implementing Vertical Grids

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

653 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

300 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

451 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

277 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

184 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

183 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

275 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

225 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