This is a migrated thread and some comments may be shown as answers.

Setting Kendo Razor Gantt Height to 100%

8 Answers 542 Views

Gantt

This is a migrated thread and some comments may be shown as answers.

Yevgen asked on 08 Jul 2015, 12:40 PM

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.

8 Answers, 1 is accepted

answered on 10 Jul 2015, 06:44 AM

Hello Yevgen,

For the time being, the Gantt does not officially support 100% height (or similar setups), and that's why the widget has a default pixel height of 600px, which you need to remove after the widget is initialized. Here is an example.

http://docs.telerik.com/kendo-ui/using-kendo-in-responsive-web-pages#individual-widget-resizing

<!DOCTYPE html>

<html>

<head>

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

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

<title></title>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.silver.min.css" />

<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>

<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>

<style>

html,body,#gantt

{

height: 100%;

margin: 0;

padding: 0;

overflow: hidden;

border-width: 0;

}

</style>

</head>

<body>

<div id="gantt"></div>

<script>

$(document).ready(function() {

var serviceRoot = "http://demos.telerik.com/kendo-ui/service";

var tasksDataSource = new kendo.data.GanttDataSource({

transport: {

read: {

url: serviceRoot + "/GanttTasks",

dataType: "jsonp"

},

update: {

url: serviceRoot + "/GanttTasks/Update",

dataType: "jsonp"

},

destroy: {

url: serviceRoot + "/GanttTasks/Destroy",

dataType: "jsonp"

},

create: {

url: serviceRoot + "/GanttTasks/Create",

dataType: "jsonp"

},

parameterMap: function(options, operation) {

if (operation !== "read") {

return { models: kendo.stringify(options.models || [options]) };

}

},

schema: {

model: {

id: "id",

fields: {

id: { from: "ID", type: "number" },

orderId: { from: "OrderID", type: "number", validation: { required: true } },

parentId: { from: "ParentID", type: "number", defaultValue: null, validation: { required: true } },

start: { from: "Start", type: "date" },

end: { from: "End", type: "date" },

title: { from: "Title", defaultValue: "", type: "string" },

percentComplete: { from: "PercentComplete", type: "number" },

summary: { from: "Summary", type: "boolean" },

expanded: { from: "Expanded", type: "boolean", defaultValue: true }

}

});

var dependenciesDataSource = new kendo.data.GanttDependencyDataSource({

transport: {

read: {

url: serviceRoot + "/GanttDependencies",

dataType: "jsonp"

},

update: {

url: serviceRoot + "/GanttDependencies/Update",

dataType: "jsonp"

},

destroy: {

url: serviceRoot + "/GanttDependencies/Destroy",

dataType: "jsonp"

},

create: {

url: serviceRoot + "/GanttDependencies/Create",

dataType: "jsonp"

},

parameterMap: function(options, operation) {

if (operation !== "read") {

return { models: kendo.stringify(options.models || [options]) };

}

},

schema: {

model: {

id: "id",

fields: {

id: { from: "ID", type: "number" },

predecessorId: { from: "PredecessorID", type: "number" },

successorId: { from: "SuccessorID", type: "number" },

type: { from: "Type", type: "number" }

}

});

var gantt = $("#gantt").kendoGantt({

dataSource: tasksDataSource,

dependencies: dependenciesDataSource,

views: [

"day",

{ type: "week", selected: true },

"month"

],

columns: [

{ field: "id", title: "ID", width: 60 },

{ field: "title", title: "Title", editable: true, sortable: true },

{ field: "start", title: "Start Time", format: "{0:MM/dd/yyyy}", width: 100, editable: true, sortable: true },

{ field: "end", title: "End Time", format: "{0:MM/dd/yyyy}", width: 100, editable: true, sortable: true }

],

showWorkHours: false,

showWorkDays: false,

snap: false

}).data("kendoGantt");

gantt.wrapper.css("height", "");

gantt.resize();

});

</script>

</body>

</html>

Regards,
Dimo
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 21 Mar 2017, 07:39 AM

Hello Chun Chieh,

If you are facing an issue not related to the original thread subject (setting the Gantt's height to 100%), please open a new thread and provide details on the issue and the steps needed for reproducing it.

As for configuring the MVC Gantt's DataSource you can see the following documentation article, which explains and demonstrates how to bind it. If you are interested in a particular feature and how it is configured, you can also review the source code of our demos, which showcase different functionality of the component.

Regards,
Ivan Danchev
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.