Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Setting Kendo Razor Gantt Height to 100%

8 Answers 457 Views
Gantt
This is a migrated thread and some comments may be shown as answers.
Yevgen
Top achievements
Rank 1
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

Sort by
0
Dimo
Telerik team
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>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
    <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!
 
0
Yevgen
Top achievements
Rank 1
answered on 10 Jul 2015, 01:38 PM
--tbn---2015-07-10-15-34-01.png
Thank you that was helpful. I have one more issue, I can't find where I can change error Message . I have attached a Screenshot
0
Dimo
Telerik team
answered on 14 Jul 2015, 10:59 AM
Hi Yevgen,

You can define custom validation messages in the schema.model.fields configuration section.

http://dojo.telerik.com/AMaha/2

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Yevgen
Top achievements
Rank 1
answered on 15 Jul 2015, 11:34 AM

Hi Dimo,

Thank you for this example, but I use Razor syntax and I can`t find property there  to change validation  message.

Regards 

Yevgen

0
Dimo
Telerik team
answered on 17 Jul 2015, 08:16 AM
Hi Yevgen,

In this case, you can use the edit event to customize the data attributes, which hold the validation messages.

http://docs.telerik.com/kendo-ui/api/javascript/ui/gantt#events-edit

function onEdit(e) {
    $(e.container).find("[name='start']").attr("data-datecompare-msg", "foo");
    $(e.container).find("[name='end']").attr("data-datecompare-msg", "bar");
}


Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Yevgen
Top achievements
Rank 1
answered on 17 Jul 2015, 10:25 AM
Thank you again! It works
0
Chun Chieh
Top achievements
Rank 1
answered on 19 Mar 2017, 04:03 AM

Hi Dimo,

It's really helpful, but how to assign the GanttDataSource as a MVC View?

I've check the mvc way, 

@(Html.Kendo().Gantt<TelerikMvcApp14.Models.TaskViewModel, TelerikMvcApp14.Models.DependencyViewModel>()

how to use this in your sample?

Thanks a lot !


0
Ivan Danchev
Telerik team
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.
Tags
Gantt
Asked by
Yevgen
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Yevgen
Top achievements
Rank 1
Chun Chieh
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or