Questions on Kendo UI for jQuery Forum

4 answers

128 views

Spreadsheet Auto Filter Ordering

When adding filters to the header row, the items inside the filter window are not ordered - is there a way to do this?

In your example, https://demos.telerik.com/kendo-ui/spreadsheet/sorting-filtering, you can see this is the case.

Thanks!

Marc

Spreadsheet

answered on 10 Jan 2017

4 answers

1.2K+ views

Set focus in editor

I display the Kendo editor in a Kendo window. After displaying it, I would like to set focus on the editor. I have being trying variations of:
kendoEditor.element.focus();
kendoEditor.element.select('body').focus();

No luck so far. Any suggestions?

Editor

answered on 10 Jan 2017

2 answers

113 views

Cancelling Edit on Recurrence Ocurrence removes event from UI

When I edit/cancel an single occurrence of a recurring event, the event is removed from the UI. When I edit the series and cancel, nothing is removed (everything works as expected).

Scenario:

I have a standard scheduler with a daily recurring event (recurrence rule = "FREQ=DAILY;UNTIL=20170201T045959Z")
I'm working on month view
I double click to edit this event on January 6
I choose "Edit current occurrence"
I make no changes
I click cancel

Result:

The event occurence is removed from January 6th ONLY. The rest of the events remain

I've searched the threads and the internet with no solutions.

I have a datasource.transfer configured
the datasource model is configured, IDs are set (ID,taskId, etc)

I would love to share code but company policy prevents it. Can anyone shed any light on this or point me in the right direction??

Thanks.

Scheduler

answered on 10 Jan 2017

1 answer

198 views

AngularJS - Tick marks disappear when set min / max values for slider

When using the slider with AngularJs, if I try to set a min or max value for the slider, the tick marks disappear - not sure if I'm doing something wrong or it's a bug...

<!DOCTYPE html>

<html>

<head>

<base href="http://demos.telerik.com/kendo-ui/slider/angular">

<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>

<title></title>

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css" />

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css" />

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.mobile.min.css" />

<script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>

<script src="//kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>

<script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>

</head>

<body>

<div id="example" ng-app="KendoDemos">

<div class="demo-section k-content" ng-controller="MyCtrl">

<div>

<h3>Ticks...</h3>

<input kendo-slider ng-model="value" />

</div>

<br><br>

<div>

<h3>No Ticks...</h3>

<input kendo-slider ng-model="value" k-options="options" />

</div>

<script>

angular.module("KendoDemos", [ "kendo.directives" ])

.controller("MyCtrl", function($scope){

$scope.value = 0;

$scope.options = {

max: 100

}

})

</script>

</body>

</html>

Slider

answered on 10 Jan 2017

1 answer

211 views

x axis and multiple series with different x values

Hi

Take a look at this example:

http://dojo.telerik.com/IQuLu

I want a chart with 2 linjes, the value of the first line should be "hard coded" to 14-17. The other line is dynamic and the values will always be between 14 and 17.

As you can see in the example the chart is doing some weird stuff with the x-axis.

Can you help me understand why the chart is doing this?

Charts

answered on 09 Jan 2017

1 answer

80 views

Getting the selected row

When I have a grid with selectable: true, how do I know the last row user have selected in change event?

Note that I don't want - and I should'n - have to bind any other event in the dom to achieve that. Can I make it only with widget's native change event ?

Thank you.

Grid

answered on 09 Jan 2017

1 answer

210 views

How to initialize many kendoUI widgets without the browser displaying core html

Hi,

What is the best way to go about initializing many kendoUI widgets on a single page without the browser flashing the code html before rendering the widget?

Below is a simplification of my page structure.

thanks in advance,
Grant

<html>

<head>

<script type="text/javascript">

$(function() {

//1. Initialize Grid DataSource

//2. Initialize Grid

//3. Initialize view Window

//4. Initialize form Window

//5. Initialize 3-4 buttons

//6/ Initialize kendo validator

});

</script>

</head>

<body>

<div id="grid"></div>

<div id="window-view"></div>

<div id="window-form"></div>

</body>

</html>

General Discussions

answered on 09 Jan 2017

4 answers

188 views

How does the DataSource.Transport.Read property populate the datasource when Read is set as a function

In the example below, taken from the Kendo site, how does the dataSource itself get populated?

var dataSource = new kendo.data.DataSource({

transport: {

read: function(options) {

// make JSONP request to http://demos.kendoui.com/service/products

$.ajax({

url: "http://demos.kendoui.com/service/products",

dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests

success: function(result) {

// notify the data source that the request succeeded

options.success(result);

},

error: function(result) {

// notify the data source that the request failed

options.error(result);

}

});

}

});

dataSource.fetch(function() {

console.log(dataSource.view().length); // displays "77"

});

Nothing in this example seems to indicate how the data source would get populate if the ajax call succeeds?

Data Source

answered on 09 Jan 2017

2 answers

147 views

Delete Option in Header

I'm trying to add a delete option in the header of the dropdownlist.

$scope.layoutOptions = {

headerTemplate: '<div data-ng-if="selectedLayout.id < 0" class="dropdown-header k-widget k-header"><a href="" data-ng-click="deleteLayout(instance)">Delete {{selectedLayout.description}}?</a></div>'

}

This are my options (inside an AngularJs controller). Is there any way to pass the selected value (dataItem) to my function deleteLayout?

DropDownList

answered on 09 Jan 2017

5 answers

148 views

Adding Gantt Task from AngularJs controller & Highlighting it

Hello,

This is My gantt config Object

$scope.ganttOptions = {

dataSource: tasksDataSource,
views: ["day",{type: "week", selected: true},"month"],
footer: false,
columns: [
{field: "title", title: "Title", editable: true},
{field: "assignedTo", title: "Assigned To", editable: true}
],
toolbar: [
{name: "append"},
{name: "pdf"}
],
height: 400,
add:addTask

}

How to add Custom Task and Highlight it?

I am using this function

function addTask(e){
var number= Math.floor((Math.random() * 5000) + 1);

e.preventDefault()

if(e.task.parentId){

var customTaskObject = {
"id": number,
"parentId":e.task.parentId,
"title": "Sample Child Task",
"start": e.task.start,
"end": e.task.end,
"summary": false,
"expanded": true,
"PercentComplete":"",
"originalTaskObject":"",
"orderId": e.task.orderId
}

}

else{
console.log("No Parent Selected")
parentTaskId=0;
var customTaskObject = {
"id": number,
"parentId":null,
"title": "Sample Task",
"start": e.task.start,
"end": e.task.end,
"summary": false,
"expanded": true,
"PercentComplete":"",
"originalTaskObject":"",
"orderId": e.task.orderId,
}

$scope.gantt.dataSource.add(customTaskObject)
}

The Above code is adding the Task only in the last position even after selecting "Add Above" option.

What is the issue here? and how to highlight the latest added task (I tried Select method by getting index value..but it is not highlighting the correct task).

PS:Without e.preventDefault() method it is working absolutely fine,but i want to add Task through controller with custom field names.

Gantt

answered on 09 Jan 2017