Questions on Kendo UI for jQuery Forum

8 answers

646 views

Setting Kendo Razor Gantt Height to 100%

Hi,

I want to set Kendo Razor Gantt Height to 100%. But This only occurs when I resize my window, otherwise is my Gantt not 100%

<script type="text/javascript">

$(document).ready(function () {

changeWidth();

});

window.onresize = function (event) {

changeWidth()

}

function changeWidth() {

var element = document.getElementById("gantt");

var height = 0;

var body = window.document.body;

if (window.innerHeight) {

height = window.innerHeight;

} else if (body.parentElement.clientHeight) {

height = body.parentElement.clientHeight;

} else if (body && body.clientHeight) {

height = body.clientHeight;

}

element.style.height = ((height - element.offsetTop - 150) + "px");

console.log(height);

}

<script>

Please let know what am i missing. Thanks in advance.

Gantt

answered on 21 Mar 2017

1 answer

114 views

European use comma

Is it possible to let the spreadsheet input cell accepts comma's instead of decimal in use of formulars ?

ex =E3*1,1 which trigger my validation that use the function ISNUMBER. =E3*1.1 works fine. So I believe that the ISNUMBER function only accepts US numberformat ?

Spreadsheet

answered on 21 Mar 2017

2 answers

168 views

Stacked bar chart, data displaying in wrong category, first series

In the attached files, categories are the Group field, and bars are stacked according to the Response field.

Values for the 2-Neutral and 3-Agree groups display correctly in the right category. Values for the first group of 1-Disagree are in the wrong order. They should be 12.5, 16.2, 19.8, 24.8 and 24.7. The second value shows at the bottom of the chart in the fifth 5-20+ years category, instead of in the second 2 to less than 5 years category.

Can you help me resolve this problem?

Thanks very much for your help.

Chris

Charts

answered on 20 Mar 2017

4 answers

184 views

Stacked Line Series with Complex Data

I am looking to display several series on a line chart. Each series comes from a different datasource, but I have normalized them client-side to ensure there are the correct number of values for the category axis. I am trying to bind to a custom value field in the series. Below is one example of my attempt and I think illustrates well what I am trying to do. Is this possible?

01.<!DOCTYPE html>

02.<html>

03.<head>

04. <meta charset="utf-8"/>

05. <title>Kendo UI Snippet</title>

06.

07. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/>

08. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/>

09. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/>

10. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"/>

11.

12. <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

13. <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>

14.</head>

15.<body>

16.

17.<div id="chart"></div>

18.<script>

19. var data = [

20. {name:'Series 1',

21. //data:[-1, 1, null, 1.2, .8, null, 2, -2],

22.

data:[{Id:1, Value:-1, Year:2010}, {Id:2, Value:2, Year:2011}, {Id:3, Value:null, Year:2012}, {Id:4, Value:4, Year:2013}],

23. field:'data.Value',

24. color:'red'

25. },

26. {name:'Series 2',

27. data:[{Id:1, Value:1, Year:2010}, {Id:2, Value:3, Year:2011},{Id:3, Value:5, Year:2012}, {Id:4,Value:7, Year:2013}],

28. field:'data.Value',

29. color:'green'

30. },

31. ]

32.$("#chart").kendoChart({

33. dataSource: {

34. data: data

35. },

36. seriesDefaults: {

37. type: "line",

38. missingValues:'interpolate',

39. stack:true,

40. field:'data.Value'

41. },

42. series: data

43.});

44.</script>

45.</body>

46.</html>

Charts

answered on 20 Mar 2017

1 answer

895 views

How to disable specific fields in a dynamically generated grid

Hi,

I'm try disabled fiels in the dynamically grid, find a exaple in kendo demo but i can't goal.

This is exaple:

<script>

$("#grid").kendoGrid({

columns: [

{ field: "name" },

{

field: "salary",

editable: function (dataItem) {

return dataItem.name === "Jane";

}

],

editable: true,

dataSource: [ { name: "Jane", salary: 2000 }, { name: "Bill", salary: 2000 } ]

});

</script>

This is my code, in the generateColumns method i want to do that:

loadGridDetails(url: string, nameGrid: string) {

$("#" + nameGrid).empty();

$.getJSON(url)

.done(data => {

let columns = this.generateColumns(data[0]);

$("#" + nameGrid).kendoGrid({

dataSource: {

data: data,

pageSize: 10,

dataValueField: "key",

dataTextField: "value"

},

scrollable: false,

pageable: {

input: true,

numeric: false

},

sortable: true,

navigatable: true,

columns: columns,

editable: true,

resizable: true

});

let grid = $("#" + nameGrid).data("kendoGrid");

//grid.columns[1].attributes = { editable: false };

grid.hideColumn(grid.columns[0]);

grid.hideColumn(grid.columns[2]);

})

.fail((jqxhr, textStatus, error) => {

let err = textStatus + ", " + error;

alert("Respuesta fallida: \n" + url + "\n " + err);

});

}

generateColumns(dataItem) {

let columns = [];

for (var propt in dataItem) {

debugger;

columns.push({

field: propt

});

}

columns.push({

command: [{

className: "btn-danger",

name: "destroy",

text: "Eliminar"

}], attributes: {

"class": "text-center"

}

});

return columns;

}

Grid

answered on 20 Mar 2017

1 answer

227 views

Performance issue on spreadsheet data validation

Hello,

I'm having slow performance in spreadsheet validation.

var sheets = $("#spreadsheet").data("kendoSpreadsheet").sheets();

var colPromiseDate = sheets .activeSheet().range("C2:C" + sheets.activeSheet()._rows._count);
colPromiseDate.format("MM/dd/yyyy");
colPromiseDate.validation({
dataType: "date",
showButton: true,
allowNulls: true,
type: "reject",
comparerType: "between",
from: "01/01/2000",
to: "01/01/2099",
titleTemplate: "Date validaton error",
messageTemplate: "Invalid Date"
});

I had debug the script, only this part will affect the performance of the page.

My spreadsheet have 200 rows which get from kendo grid data source, so I can't do it in sheets.rows.cell validation.

FYI, I have tried to use for loop to put in validation on each cell, but the result is still the same.

Please advice..

Thanks.

Regards,

Su Pei

Spreadsheet

answered on 20 Mar 2017

1 answer

426 views

Line Chart with Date Axis and ChartAxisBaseUnit.Fit

I have a line chart which can be configured to show data from the last month, last 3 months, ... , last 2 years, last 10 years, etc.
In my SQL query I filter the data to return only the last X months and provide this data to the Kendo chart.
I am using ChartAxisBaseUnit.Fit so I can return data over weeks, months, years and the date axis is adjusted accordingly.

It is now March 16th, if I return 6 months of data the chart will show Months (September to March) on the data axis.
The problem is that we are only half way through March so the line drops off as we do not have all the data for that month yet.
What I could do is filter the data in SQL to only return complete months... i.e. filter the data from 1st September to 1st March.

However, if I return data over a longer period of time the chart will automatically show Years on the date axis.
In this case I don't want to show 2017 at all so I want to ignore any data from Jan and Feb 2017 causes.

Hopefully you get the problem... if date axis is showing years, months, weeks then I only want to show data for the last complete year, month, week.
I have seen there is a MaxDateGroups property that can be set to control the number of items shown but that does not really help.
Eventually I want the user to be able to select a custom date range and show a line chart with automatically scaled date axis.
However, I don't want the line chart to suddenly drop down at the end because we are on the first day of the month, etc.

I am hoping I am just missing something simple here and there is some property which I can set?
If not how have other people got around this problem? I would expect this is a common issue.

Charts

answered on 20 Mar 2017

1 answer

142 views

Spreadsheet Auto Filter

Hi,

Sometimes the filter button does not highlight that a filter is active. You can see from the screenshot that some rows are filtered. (Missing row numbers indicate this). The filter column is H, however the filter button has not changed colour.

I have tested with column B and the filter column changes for this column.

Thanks

Marc

Spreadsheet

answered on 20 Mar 2017

1 answer

4.8K+ views

Null date column

Hi

I've done some searching but can't find a solution to this.

Essentially, I have a settlement date column in my grid, however, this column can be null because the settlement date may not have been set yet.

How do I show a date if there's a date entered, blank string if there's no date entered yet?

I'm using JSON data in my datasource. I couldn't find a way to bring NULL dates in JSON so I'm currently bringing in the NULL dates as 01/01/0001 (which, by searching, seems to be the earliest date in JSON).

My column at the moment is:

columns: [

{ field: "SettlementDate", width: "150px", title: "Settlement Date", format: "{0:d/MM/yyyy}", filterable: { ui: "datetimepicker" } }

]

I want to allow batch editing of the grid.

Any suggestions or direction from someone who overcame a similar problem would be appreciated.

Thanks, Alison

Grid