Setting Kendo Razor Gantt Height to 100%

7 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
    8331 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. Kendo UI is VS 2017 Ready
  4. 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
  5. Dimo
    Admin
    Dimo avatar
    8331 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!
  6. 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

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

    Posted 17 Jul 2015 Link to this post

    Thank you again! It works
Back to Top
Kendo UI is VS 2017 Ready