Can the field "id" be of type "string" in data source?

[Dmitry]

Hello,
I'm trying to assign data source to Kendo UI Gantt. The issue that events those have "parentId" are not displayed at all. No exceptions, no messages in console.
Events without "parentId" are displayed in Gantt.

"id" field has type "number" in all examples for Gantt. Can it be of type "string" and how to display subtasks from the data source below?

Json for the data source:
[{"id":"5003d0fb-c6e9-4ddd-aaca-f9871eb51d30_1","title":"Deploy solution","start":"2015-02-08T22:00:00.000Z","end":"2015-02-26T22:00:00.000Z","percentComplete":0.1},{"id":"5003d0fb-c6e9-4ddd-aaca-f9871eb51d30_2","title":"Test deployed solution","start":"2015-02-27T22:00:00.000Z","end":"2015-03-01T22:00:00.000Z"},{"id":"5003d0fb-c6e9-4ddd-aaca-f9871eb51d30_3","title":"Move solution to staging","start":"2015-03-02T22:00:00.000Z","end":"2015-03-17T22:00:00.000Z","percentComplete":0.5},{"id":"5003d0fb-c6e9-4ddd-aaca-f9871eb51d30_4","title":"Subtask 001","start":"2015-02-23T22:00:00.000Z","end":"2015-02-24T22:00:00.000Z","parentId":"5003d0fb-c6e9-4ddd-aaca-f9871eb51d30_1"},{"id":"5003d0fb-c6e9-4ddd-aaca-f9871eb51d30_5","title":"Subtask 001 - 001","start":"2015-02-23T22:00:00.000Z","end":"2015-02-23T22:00:00.000Z","parentId":"5003d0fb-c6e9-4ddd-aaca-f9871eb51d30_4"},{"id":"5003d0fb-c6e9-4ddd-aaca-f9871eb51d30_6","title":"Subtask 002","start":"2015-02-18T22:00:00.000Z","end":"2015-02-19T22:00:00.000Z","parentId":"5003d0fb-c6e9-4ddd-aaca-f9871eb51d30_1"},{"id":"1010b897-cc7f-41be-b2d6-d464345abc05_1","title":"2 Move solution to new site collection","start":"2015-02-08T22:00:00.000Z","end":"2015-02-19T22:00:00.000Z"},{"id":"1010b897-cc7f-41be-b2d6-d464345abc05_2","title":"2 Test moved site collection","start":"2015-02-02T22:00:00.000Z","end":"2015-02-25T22:00:00.000Z"}]

[Bozhidar]

Hello,

You have to also set the "summary" field to inticate that a particular task is a summary(parent). You also have to specify in your datasource declaration the type of the id and parentId fields as string. Here's an example with the modified data:
http://dojo.telerik.com/alifO

Regards,
Bozhidar
Telerik

 

 

[Dmitry]

Thank you for the explanation. But I have another issue. "Subtask 001 - 001" is not displayed correctly. It must be child task of  "Subtask 001" but it is displayed as child task of "Deploy solution task" (screenshot/attachment #1).
"Subtask 001" has triange at the left, indicating that it is a parent task. Clicking the triangle causes the error in IE 10: SCRIPT28: Out of stack space kendo.all.min.js, line 11 character 3223; in the latest Chrome - "Uncaught RangeError: Maximum call stack size exceeded".

If I paste the same data source in your example here everything is working fine.

There are angular 1.3.0 and jQuery 1.8.2 scripts on page.

What could be the issue reason? Our Kendo UI version is v2014.2.1008.

Data source is the following:
[{"id":"1010b897-cc7f-41be-b2d6-d464345abc05_1","title":"2 Move solution to new site collection","start":"2015-02-08T22:00:00.000Z","end":"2015-02-19T22:00:00.000Z"},{"id":"1010b897-cc7f-41be-b2d6-d464345abc05_2","title":"2 Test moved site collection","start":"2015-02-02T22:00:00.000Z","end":"2015-02-25T22:00:00.000Z"},{"id":"5003d0fb-c6e9-4ddd-aaca-f9871eb51d30_1","title":"Deploy solution","start":"2015-02-08T22:00:00.000Z","end":"2015-02-26T22:00:00.000Z","percentComplete":0.1,"summary":true},{"id":"5003d0fb-c6e9-4ddd-aaca-f9871eb51d30_2","title":"Test deployed solution","start":"2015-02-27T22:00:00.000Z","end":"2015-03-01T22:00:00.000Z"},{"id":"5003d0fb-c6e9-4ddd-aaca-f9871eb51d30_3","title":"Move solution to staging","start":"2015-03-02T22:00:00.000Z","end":"2015-03-17T22:00:00.000Z","percentComplete":0.5},{"id":"5003d0fb-c6e9-4ddd-aaca-f9871eb51d30_4","title":"Subtask 001","start":"2015-02-23T22:00:00.000Z","end":"2015-02-24T22:00:00.000Z","parentId":"5003d0fb-c6e9-4ddd-aaca-f9871eb51d30_1","summary":true},{"id":"5003d0fb-c6e9-4ddd-aaca-f9871eb51d30_5","title":"Subtask 001 - 001","start":"2015-02-23T22:00:00.000Z","end":"2015-02-23T22:00:00.000Z","parentId":"5003d0fb-c6e9-4ddd-aaca-f9871eb51d30_4"},{"id":"5003d0fb-c6e9-4ddd-aaca-f9871eb51d30_6","title":"Subtask 002","start":"2015-02-18T22:00:00.000Z","end":"2015-02-19T22:00:00.000Z","parentId":"5003d0fb-c6e9-4ddd-aaca-f9871eb51d30_1"}]

[Bozhidar]

Hi,

Did you add the "schema" declarations from the dojo sample in your project? If you did and the issue is still reproduced, could you paste in your relevant code, so that we can take a closer look?

Regards,
Bozhidar
Telerik

 

 

[Dmitry]

I added schema of cause.
Data source is taken from my previous post. The same example works here fine. In our environment it does not work.

My code looks like this:

var _listWidth = "30%";

        if (_ganttSettings.SplitterPosition && _ganttSettings.SplitterPosition > 0)

            _listWidth = _ganttSettings.SplitterPosition.toString() + "%";

        var _format = "{0:g}";

        if (_ganttSettings.DateFormat && !_isEmpty(_ganttSettings.DateFormat))

            _format = "{0:" + _ganttSettings.DateFormat + "}";

        var _showWeekends = false;

        if (_ganttSettings.ShowWeekends != null)

            _showWeekends = _ganttSettings.ShowWeekends;

        _kendoGantt = jQuery("#kGantt").kendoGantt({

            dataSource: _kendoDSArray,

            schema: {

                model: {

                    id: "id",

                    fields: {

                        id: { from: "id", type: "string" },

                        parentId: { from: "parentId", type: "string", defaultValue:null},

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

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

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

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

                    }

                }

            },

            columns: [{ field: "title", title: "Title" }, { field: "start", title: "Start Date", format: _format }, { field: "end", title: "End Date", format: _format }],

            views: [{ type: "day", selected: _ganttSettings.Timescale == "day" ? true : false }, { type: "week", selected: _ganttSettings.Timescale == "week" ? true : false },

                { type: "month", selected: _ganttSettings.Timescale == "month" ? true : false }],

            listWidth: _listWidth,

            showWorkDays: !_showWeekends

        });


[Dmitry]

Hello, the solution was in placing array data to the constructor of "kendo.data.GanttDataSource"


_kendoGantt = jQuery("#kGantt").kendoGantt({

            dataSource: new kendo.data.GanttDataSource({

                data: _kendoDSArray,

                schema: {

                    model: {

                        id: "id",

                        fields: {

                            id: { from: "id", type: "string" },

                            parentId: { from: "parentId", type: "string", defaultValue: null },

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

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

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

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

                        }

                    }

                }

            }),

            dependencies: _dependencies,

            columns: [{ field: "title", title: "Title" }, { field: "start", title: "Start Date", format: _format }, { field: "end", title: "End Date", format: _format }],

            views: [{ type: "day", selected: _ganttSettings.Timescale == "day" ? true : false }, { type: "week", selected: _ganttSettings.Timescale == "week" ? true : false },

                { type: "month", selected: _ganttSettings.Timescale == "month" ? true : false }],

            listWidth: _listWidth,

            showWorkDays: !_showWeekends

        });