This is a migrated thread and some comments may be shown as answers.

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

3 Answers 278 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Pauline
Top achievements
Rank 1
Pauline asked on 27 Oct 2013, 02:11 AM
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?

3 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 29 Oct 2013, 11:57 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pauline
Top achievements
Rank 1
answered on 30 Oct 2013, 05:46 AM
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.
0
Alexander Popov
Telerik team
answered on 31 Oct 2013, 02:31 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Pauline
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Pauline
Top achievements
Rank 1
Share this question
or