In-cell adding/ editing for Grid with row hierarchy or detail template

[Pauline]

Hi Kendo UI Team,

I have a grid with dummy data and a client template. I'm attempting to add new records.

<div id="grid">
</div>
<script id="detail-template" type="text/kendo-ui-template">
    <div>
        <p>#: FirstName # #: LastName #'s age is #: Age #</p>
  </div>
</script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#grid").kendoGrid({
            sortable: true,
            editable: "incell",
            toolbar: ["create"],
            columns:[
                {
                    field: "FirstName",
                    title: "First Name"
                },
                {
                    field: "LastName",
                    title: "Last Name"
                }],
            dataSource: {
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            FirstName: {
                                type: "string"
                            },
                            LastName: {
                                type: "string"
                            },
                            Age: {
                                //data type of the field {Number|String|Boolean} default is String
                                type: "number",
                                // used when new model is created
                                defaultValue: 1
                            }
                        }
                    }
                },
                data: [
                    {
                        Id: 1,
                        FirstName: "Joe",
                        LastName: "Smith",
                        Age: 30
                    },
                    {
                        Id: 2,
                        FirstName: "Jane",
                        LastName: "Smith",
                        Age: 20
                    }]
            },
            detailTemplate: kendo.template($("#detail-template").html()),
            dataBound: function ()
            {
                this.expandRow(this.tbody.find("tr.k-master-row").first());
            },
        });
    });
</script>

Right now I can only edit the fields defined as grid columns, but not the field in the detail template. How can I fix this?

[Alexander Popov]

Hello Pauline,

You can use the Grid's detailInit event to initialize a widget for editing the desired field, for example a child Grid. You can find similar example in our Grid hierarchy demo.

Regards,
Alexander Popov
Telerik

[Pauline]

Hi Alexander,

I may be missing something obvious, but the Grid hierarchy example doesn't seem to be editable. When I click on the cells, nothing happens.

[Alexander Popov]

Hi Pauline,

I apologize for misleading you. The example I provided demonstrates Grid hierarchy, however the Grids are not editable. Making them editable is no different from a creating a regular editable Grid. You can see an example configuration here, although the data will not be saved on the server.

Regards,
Alexander Popov
Telerik