Setting Kendo Razor Gantt Height to 100%

9 posts, 0 answers
  1. Yevgen
    Yevgen avatar
    6 posts
    Member since:
    Oct 2013

    Posted 08 Jul 2015 Link to this post

    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.

  2. Dimo
    Admin
    Dimo avatar
    8391 posts

    Posted 10 Jul 2015 Link to this post

    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!
     
  3. Yevgen
    Yevgen avatar
    6 posts
    Member since:
    Oct 2013

    Posted 10 Jul 2015 in reply to Dimo Link to this post

    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
  4. Dimo
    Admin
    Dimo avatar
    8391 posts

    Posted 14 Jul 2015 Link to this post

    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!
  5. Yevgen
    Yevgen avatar
    6 posts
    Member since:
    Oct 2013

    Posted 15 Jul 2015 Link to this post

    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

  6. Dimo
    Admin
    Dimo avatar
    8391 posts

    Posted 17 Jul 2015 Link to this post

    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!
     
  7. Yevgen
    Yevgen avatar
    6 posts
    Member since:
    Oct 2013

    Posted 17 Jul 2015 Link to this post

    Thank you again! It works
  8. Chun Chieh
    Chun Chieh avatar
    1 posts
    Member since:
    Nov 2016

    Posted 18 Mar in reply to Dimo Link to this post

    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 !


  9. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1181 posts

    Posted 21 Mar Link to this post

    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.
Back to Top