Grid Hierarchy Child Grid Add New Record not working

[Luis]

Hi, I'm trying to implement a grid hierarchy with batch operations and the child grid Add New Record is not displaying.  All other operations (update, destroy, read) are working in the child grid.  The parent grid Add New Record does display and works fine, any help is much appreciated.  Here's my code:


// Grid contents
$(document).ready(function () {
var crudServiceBaseUrl = "http://localhost:8080/task-scheduler",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/retrieve/tasks",
type: "GET",
dataType: "json"
},
update: {
url: crudServiceBaseUrl + "/update/task",
type: "PUT",
dataType: "json",
contentType: "application/json"
},
destroy: {
url: crudServiceBaseUrl + "/remove/task",
type: "DELETE",
dataType: "json",
contentType: "application/json"
},
create: {
url: crudServiceBaseUrl + "/create/task",
type: "POST",
dataType: "json",
contentType: "application/json"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
var json = kendo.stringify(options.models);
console.log("JSON Task to Server:", json);
return json;
}
}
},
batch: true,
pageSize: 5,
schema: {
model: {
id: "id",
fields: {
id: { type: "number", editable: false },
name: { type: "string", defaultValue: "Task " },
description: { type: "string", validation: { required: true } },
datatype: { type: "string" },
destination: { type: "string" }
}
}
}
});

$("#tasklist").kendoGrid({
dataSource: dataSource,
pageable: true,
filterable: true,
navigatable: true,
resizable: true,
selectable: "row",
height: 400,
detailInit: detailInit,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
toolbar: [{ name: "create", text: "Create Task" }],
columns: [
//{ field: "id", title: "ID", width: "60px" },
{ field: "name", title: "Name", width: "120px" },
{ field: "description", title:"Description", width: "150px" },
{ field: "datatype", title:"Datatype", width: "100px", editor: datatypeDropDownEditor },
{ field: "destination", title:"Destination", width: "100px", editor: destinationDropDownEditor },
{ command: ["edit", "destroy"], title: "Option", width: "160px" }],
editable: "inline"
});

var datatypeItems = [ { datatypeId: 0, datatypeName: "entity" },
{ datatypeId: 1, datatypeName: "event" },
{ datatypeId: 2, datatypeName: "metric" },
];

function datatypeDropDownEditor(container, options) {
$('<input required data-text-field="datatypeName" data-value-field="datatypeName" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: datatypeItems,
dataTextField: "datatypeName",
dataValueField: "datatypeId",
optionLabel: "simple/entity",
change: function () {
dataItem = this.dataItem(this.selectedIndex);
options.model.datatypeId = dataItem.id;
}

});
}

var destinationItems = [ { destinationId: 0, destinationName: "resource" },
{ destinationId: 1, destinationName: "reference" },
{ destinationId: 2, destinationName: "correlate" }
];

function destinationDropDownEditor(container, options) {
$('<input required data-text-field="destinationName" data-value-field="destinationName" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: destinationItems,
dataTextField: "destinationName",
dataValueField: "destinationId",
optionLabel: "resource",
change: function () {
dataItem = this.dataItem(this.selectedIndex);
options.model.destinationId = dataItem.id;
}

});
}

function detailInit(e) {
incrementId();
var crudServiceBaseUrl = "http://localhost:8080/task-scheduler",
datasource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/retrieve/tasks",
type: "GET",
dataType: "json"
},
update: {
url: crudServiceBaseUrl + "/update/schedule",
type: "PUT",
dataType: "json",
contentType: "application/json"
},
destroy: {
url: crudServiceBaseUrl + "/remove/schedule",
type: "DELETE",
dataType: "json",
contentType: "application/json"
},
create: {
url: crudServiceBaseUrl + "/create/schedule",
type: "POST",
dataType: "json",
contentType: "application/json"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
var json = kendo.stringify(options.models);
console.log("JSON Schedule to Server:", json);
return json;
}
}

},
batch: true,
pageSize: 5,
schema: {
model: {
id: "id",
schedules: {
fields: {
//id: { type: "number", editable: false },
startDateTime: { type: "date" },
endDateTime: { type: "date" },
interval: { type: "string", validation: { required: true }},
event: { type: "string", validation: { required: true }},
status: { type: "string", editable: false }
}
}
}
},
filter: { field: "id", operator: "eq", value: e.data.id }
});

$("<div id='" + id + "'/>").appendTo(e.detailCell).kendoGrid({
dataSource: datasource,
height: 250,
pageable: true,
//filterable: true,
navigatable: true,
resizable: true,
selectable: "row",
toolbar: [{ name: "create", text: "Create Schedule" }],
columns: [
{ field: "schedules[0].startDateTime", title:"Start Date", width: "120px" },
{ field: "schedules[0].endDateTime", title:"End Date", width: "120px" },
{ field: "schedules[0].interval", title: "Interval", width: "120px" },
{ field: "schedules[0].event", title: "Event", width: "120px" },
{ field: "schedules[0].status", title: "Status", width: "120px" },
{ command: ["edit", "destroy"], title: "&nbsp;", width: "160px" }],
editable: "inline"
});
}

var id=0;
function incrementId () {
id += 1;
console.log("Id:", id);
}

});

[Petur Subev]

Hello Luis,

Your JavaScript seems quite correct. Are there any errors in the console of the browser? Can you reproduce the problem in a JsBin example?

http://jsbin.com/ofifaq/1/edit


Kind Regards,
Petur Subev
Telerik

[Luis]

Hi Petur,

The only error I get is related to the schedules[0] data but that is due to no schedules exist yet in the first row of data.  Need to know how to check for this when there's no schedules to prevent the error. On the second row it has schedules and there are no errors.  As I mentioned earlier, all other operations work except the "Add New Record" button where it does not display the new record for editing, but no errors display in the console. When I try to select the new record button nothing happens?? 

Error from the first data row due to no schedules exist yet:
TypeError: data.schedules[0] is undefined

Also, not sure how to increment the schedules[0].startDateTime and the rest of the schedules data within the columns area if schedules have additional data.  And the dates show up in milliseconds instead of a date format "dd/MM/yyyy hh:mm:ss". I tried to add the format within the field area as "{ field: "schedules[0].startDateTime", title:"Start Date", format: "{0:yyyy-MM-dd hh:mm:ss}", width: "120px" }" but it stills shows up in milliseconds "1372201813000".

Thanks,
Luis

[Petur Subev]

Hello Lius,

Now I noticed that this particular field schedules is a nested array field according to your code - is that right? Such model definition is not correct. Editing nested objects/array is not supported - just flat model with base types like shown here.

model: {
    id: "id",
    schedules: {
        fields: {
            //id: { type: "number", editable: false },
            startDateTime: {
                type: "date"
            },
            endDateTime: {
                type: "date"
            },
            interval: {
                type: "string",
                validation: {
                    required: true
                }
            },
            event: {
                type: "string",
                validation: {
                    required: true
                }
            },
            status: {
                type: "string",
                editable: false
            }
        }
    }
}

Always provide default values (check example from documentation) for nested objects - otherway the template will thrown an exception.

Regards,
Petur Subev
Telerik

[Luis]

Hi Peter,
I went ahead and changed the code to a flat model and updated my service accordingly and it now works!  The only item left is that the date conversion gives me an error: 

 Uncaught TypeError: Object 1372429217000 has no method 'indexOf'

If I use type: "date" then I get the error, but if I use type: "number" it shows up as the date in milliseconds 1372429217000 within the grid.  Is there a method to convert the milliseconds input to a date format  as "yyyy-MM-dd hh:mm:ss" ?

Here's my updated code for the detailInit section:
function detailInit(e) {
                incrementId(e);
                var crudServiceBaseUrl = "http://localhost:8080/task-scheduler",
                datasource = new kendo.data.DataSource({
                    transport: {                        
                           read:  {
                               url: crudServiceBaseUrl + "/retrieve/schedules/" + e.data.id,
                            type: "GET",
                            dataType: "json" 
                        },
                        update: {
                            url: crudServiceBaseUrl + "/update/schedule",
                            type: "PUT",
                            dataType: "json",
                            contentType: "application/json"                           
                        },
                        destroy: {
                            url: crudServiceBaseUrl + "/remove/schedule",
                            type: "DELETE",
                            dataType: "json",
                            contentType: "application/json"
                        },
                        create: {
                            url: crudServiceBaseUrl + "/create/schedule",
                            type: "POST",
                            dataType: "json",
                            contentType: "application/json"                          
                        },                       
                        parameterMap: function(options, operation) {
                            if (operation !== "read" && options.models) {
                                var json = kendo.stringify(options.models);
                                console.log("JSON Schedule to Server:", json);
                                return json;
                            }
                        }
                        
                    },
                    batch: true,
                    pageSize: 5,
                    schema: {
                        model: {
                               id: "id",
                            fields: {
                                id: { type: "number", editable: false },
                                startDateTime: { type: "date" },
                                endDateTime: { type: "date" },
                                interval: { type: "string", validation: { required: true }},
                                event: { type: "string", validation: { required: true }},
                                status: { type: "string", editable: false }
                            }                                
                        }
                    }
                });
                
                $("<div id='" + val + "'/>").appendTo(e.detailCell).kendoGrid({
                    dataSource: datasource,                                                                      
                    height: 250,                
                    pageable: {
                        refresh: true,
                        pageSizes: true
                    },
                    resizable: true,
                    selectable: "row",                    
                    toolbar: [{ name: "create", text: "Create Schedule" }],
                    columns: [
                        { field: "startDateTime", title: "Start Date",
                            format: "{0:yyyy-MM-dd hh:mm:ss}", width: "120px" },
                        { field: "endDateTime", title: "End Date",
                            format: "{0:yyyy-MM-dd hh:mm:ss}", width: "120px" },
                        { field: "interval", title: "Interval", width: "120px" },
                        { field: "event", title: "Event", width: "120px" },
                        { field: "status", title: "Status", width: "120px" },
                        { command: ["edit", "destroy"], title: "&nbsp;", width: "160px" } ],
                        editable: "inline"                                               
                });
                
            }

[Vladimir Iliev]

Hi Luis,

 
I would suggest to use the schema "parse" function in which to parse the dates before passing the server response to the grid. 

Kind Regards,
Vladimir Iliev
Telerik