Questions on Kendo UI for jQuery Forum

3 answers

269 views

Gantt chart -split gantt lines / tasks into smaller tasks

Ability to split gantt lines / tasks into smaller tasks.

please help me.how can do?

Gantt

answered on 07 Mar 2016

6 answers

780 views

[Solved] How to make kendo editor draggable

We have a UI, where text and image components can be added and edited within a div, and the final layout should be saved on the server.

I can drag an image using kendoDraggable and handle doubleclick on the image area to make image updates.

When a text component is added, its content is editable via inline kendo editor. But since editor captures clicks and mouse events, there seem to be no easy way to make inline editor draggable to move it around the parent div. Any suggestions are highly appreciated.

Drag and Drop

answered on 05 Mar 2016

3 answers

135 views

[Solved] Can the Timeline view a whole month?

Hello everyone,

I'm new to Telerik I would like to know if there is a way of making the Timeline View show a whole month instead of just one week.

I've been struggeling to find the solution.

Greetings,

Max

Scheduler

answered on 04 Mar 2016

2 answers

155 views

Scheduler business hours / free/busy

Hi I am currently evaluating the Kendo UI. But I couldn't find out how I could implement one of my key requirements:

I have grouped the scheduler for several persons (important is the day/workweek view). Each person may have (depending on the date) a different business start and end time. So maybe person A works from Mon.-Wed. from 10:00 - 17:00 and Thu - Sat from 09:00-16:00 and Person B doesn't work in this week at all and so on. In my previous application I just grayed out the non-business hours individually.

Is that possible with the kendo scheduler? What I saw was that I may only define exactly one from-to time interval, which aplies to all resources/persons on all business day... :-(

Scheduler

answered on 04 Mar 2016

1 answer

251 views

Date time stamp on excel export

I would like to have a header or footer section on and excel export that simply has the date time stamp of the export. Ideally, it would also include a report title.

Thanks

Grid

answered on 04 Mar 2016

7 answers

809 views

Grid Excel Export

Hi,

I have the grid looking exactly as desired,currency format right aligned and the documentation states that

Column Templates

Kendo UI Grid doesn't use column templates during Excel export - it exports only the data. The reason is simple - a column template may contain arbitrary HTML which can't be converted to Excel column values.

The format option is not used during export. Check Column Format for more info.
The template option is not used during export. Check Column Templates for more info.

my code

columns: [
{command: ["edit"], title: " ", locked: true, width: "80px"},

{field: "invAmt", width: 120, template: "#= kendo.toString(invAmt, 'C') #" , title: "invAmt", filterable: {cell: {showOperators: false}},
aggregates: ["sum"], aggregates: ["sum"],
groupHeaderTemplate: "Total Count: #=sum#",

footerTemplate: "<div class='ra'>#= kendo.toString(sum, 'C') #</div>",
groupFooterTemplate: "<div class='ra'>#= kendo.toString(sum, 'C') #</div>"
},
{field: "paidAmt", width: 120, template: "<div class='ra'>#= kendo.toString(paidAmt, 'C') #</div>" , title: "<div class='ra'>paidAmt</div>", filterable: {cell: {showOperators: false}},
aggregates: ["sum"], aggregates: ["sum"],
groupHeaderTemplate: "Total Count: #=sum#",
footerTemplate: "<div class='ra'>#= kendo.toString(sum, 'C') #</div>",
groupFooterTemplate: "<div class='ra'>#= kendo.toString(sum, 'C') #</div>"
},
{field: "savings", width: 120, template: "<div class='ra'>#= kendo.toString(savings, 'C') #</div>" , title: "<div class='ra'>savings</div>", filterable: {cell: {showOperators: false}},
aggregates: ["sum"], aggregates: ["sum"],
groupHeaderTemplate: "Total Count: #=sum#",
footerTemplate: "<div class='ra'>#= kendo.toString(sum, 'C') #</div>",
groupFooterTemplate: "<div class='ra'>#= kendo.toString(sum, 'C') #</div>"
},

yet the following gets exported to excel.

<div class='ra'>invAmt</div>
333
250
500
0
0
0
0
<div class='ra'>$1,083.00</div>
<div class='ra'>$1,083.00</div>

I guess I'm reading it wrong?

TIA
John

Grid

answered on 04 Mar 2016

3 answers

493 views

Use AngularJS directive in tab content

How do I get the test directive to render as a directive when tab3 or tabN are rendered?

The directive will in reality be more complex, this is a simplified example.

<!DOCTYPE html>

<html ng-app="app">

<head>

<title>WithDataSource</title>

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

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

<script src="~/Scripts/kendo/js/jquery.min.js"></script>

<script src="~/Scripts/angular.js"></script>

<script src="~/Scripts/kendo/js/kendo.all.min.js"></script>

</head>

<body>

<div ng-controller="MainCtrl">

<test></test>

<div kendo-tab-strip="tabstrip2" k-options="tabStripOptions"></div>

<p>

<input type="button" ng-click="add()" value="add" />

<input type="button" ng-click="remove()" value="remove" />

<input type="button" ng-click="selectFirst()" value="select first" />

</p>

<test></test>

</div>

<script>

angular.module('app', ['kendo.directives']);

angular.module('app').directive('test', function() {

return {

restrict:'AE',

template: '<h1>test123</h1>'

}

});

angular.module('app').controller('MainCtrl', function ($timeout, $scope) {

$scope.name = 'some name';

var data = new kendo.data.ObservableArray([

{ name: 'tab1', content: '<h3>tab1</h3>' },

{ name: 'tab2', content: '<h3>tab2</h3>' },

{ name: 'tab3', content: '<test></test>' } // directive

]);

$scope.tabStripOptions = {

animation: false,

dataTextField: 'name',

dataContentField: 'content',

dataSource: data

};

$scope.add = function () {

$timeout(function() {

data.push({ name: 'tabN', content: '<test></test>' }); // directive

},0,true);

};

$scope.remove = function () {

data.pop(data.length - 1);

};

$scope.selectFirst = function () {

$scope.tabstrip2.select(0);

};

$scope.$on('kendoWidgetCreated', function (ev, widget) {

console.log('kendoWidgetCreated');

if (widget === $scope.tabstrip2) {

$scope.tabstrip2.select(1);

}

});

$scope.$on('kendoRendered', function (ev) {

console.log('kendoRendered');

console.log(ev);

});

</script>

</body>

</html>

Thanks folks ...

TabStrip

answered on 04 Mar 2016

1 answer

369 views

Auto binding columns from datasource, and adding formatting

Hello!

With a kendo grid, if you don't specify the columns it will automatically bind everything in the datasource without any kind of formatting etc.

I have a situation where I desire this behavior (I have a variable datasource, with different columns for different situations) but I would like to be able to specify certain properties, like width, hidden:true/false etc.

Is it possible to specify column properties while still auto-binding from the datasource, and not defining which fields go to which column?

This would be very useful.

Thanks!

Grid

answered on 04 Mar 2016

1 answer

190 views

Treeview is not pasing the id to controller when expanding leaf

I have an MVC Treeview identical to the Treeview Binding Remote Data code sample as well as the one if the video Kendo UI for ASP.NET MVC TreeView but I cannot seem to get the Id to be passed to my controller when the tree is expanded.

The examples show the id being passed in the querystring.

@(Html.Kendo().TreeView()

.Name("my-Tree-View")

.DataTextField("Name")

.DataSource(dataSource => dataSource

.Read(read => read

.Action("GetSourcesByID", "source")

))

)

My initial results look like this and my Tree appears to be properly displayed:

[{"Id":"AK","Name":"AK","hasChildren":true},{"Id":"AL","Name":"AL","hasChildren":true},{"Id":"AR","Name":"AR","hasChildren":true},...]

In case it matters here is my controller:

public ActionResult getSourcesByID(string id)

{

IList<TreeViewModel> sourceVM = new List<TreeViewModel>();

if (id == null)

{

var QueryStates = from source in context.states

select new

{

state = source.state1 ,

};

foreach (var prod in QueryStates)

{

sourceVM.Add(new TreeViewModel { Id = prod.state, Name=prod.state, hasChildren=true });

}

} else

{

var Query = from source in context.sources

where source.state == id

select new

{

sourceid = source.sourceid,

state = source.state,

sourcename = source.sourcename

};

foreach (var prod in Query)

{

sourceVM.Add(new TreeViewModel { Id = prod.sourceid.ToString() , Name = prod.sourcename, hasChildren=false });

}

return Json(sourceVM, JsonRequestBehavior.AllowGet);

}

What else do I need to do to force it to send the ID?

Brad

TreeView

answered on 03 Mar 2016

5 answers

152 views

Fileter and Paging

I have grid with paging and filtering. Filtering use to work correctly. But as soon as I added paging , Filter does not work.. I will get processing circle if click on filter on the grid. Please see the image attached

Grid

answered on 03 Mar 2016