Cannot add new rows to detail Grid (previous title: dsgfdsgdsga)

[None]

I have a hierarchical kendo ui grid that is successfully displaying items from my database, but for some reason the "Add New Record" button in the detail grid doesn't add a new row or fire any event, nor does it pull any error, and I am at a loss as to how to go about debugging this.
Each Log entity can have many LogAppends, and the children of a Log are rendering properly in the detail grid.
Here is my grid html:

 

<div kendo-grid k-options="registrationOptions" k-data-source="logginggridData" k-columns="gridColumns" k-selectable="true">
            <div k-detail-template>
                <kendo-tabstrip>
                    <ul>
                        <li class="k-state-active">Append Logs</li>
                    </ul>
                    <div>
                        <div kendo-grid k-options="detailGridOptions(dataItem)"></div>
                    </div>
                </kendo-tabstrip>
            </div>
        </div>

$scope.detailGridOptions = function(dataItem) {
        return {
            dataSource: {
                transport: {
                    read: {
                        url: "api/logappends/",
                        dataType: "json",
                        contentType: "application/json"
                    },
                    update: {
                        url: "api/logappends/",
                        type: "post",
                        dataType: "json",
                        contentType: "application/json"
                    },
                    create: {
                        contentType: "application/json",
                        url: "api/logappends/",
                        type: "post",
                        dataType: "json",
                        data: function(data) {
                            console.log("CREATING TEST DATA");
                            console.log(data.models[0]);
                            return data.models[0];
                        }
                    },
                    parameterMap: function(options, operation) {
                        if (operation == "update") {
                            return JSON.stringify(options.models[0]);
                        }
                        if (operation == "create") {
                            return JSON.stringify(options.models[0])
                        }
                        if (operation == "destroy") {
                            return JSON.stringify(options.models[0]);
                        }
                    }
                },
                error: function(e) {
                    // handle error
                    console.log(e);

                },
                schema: {
                    data: function(data) { //specify the array that contains the data
                        console.log("DATA RETURN TEST");
                        console.log(data);
                        return data || [];
                    },
                    model: {
                        id: "LogAppendId",
                        fields: {
                            LogAppendId: {
                                editable: true,
                                nullable: false,
                                type: "number"
                            },
                            DateAppended: {
                                type: "date"
                            },
                            Type: {
                                type: "string"
                            },
                            Comments: {
                                type: "string"
                            }
                        }
                    }
                },
                pageSize: 5,
                filter: {
                    field: "LogId",
                    operator: "equal",
                    value: dataItem.LogId
                }
            },
            scrollable: false,
            sortable: true,
            pageable: true,
            toolbar: ["create"],
            editable: "inline",
            autoBind: true,
            batch: true,
            height: 550,
            filterable: true,
            columns: [{
                field: "LogAppendId",
                title: "ID",
                width: "56px"
            }, {
                field: "Comments",
                title: "Comments",
                width: "240px"
            }, {
                field: "Type",
                title: "Type",
                width: "110px"
            }, {

                field: "DateAppended",
                title: "Date Appended"
            }, {
                command: ["edit", "destroy"],
                title: " ",
                width: "250px"
            }]
        };
    };

 

Any help would be appreciated. Thank you.

[None]

Wow, my title utterly failed. Sorry!

[Dimiter Topalov]

Hello Matt,

You can check the following example of detail Grid with CRUD operations, and AngularJS:

http://dojo.telerik.com/IviGI

The following resources can help you implement this or similar approach that best suits the specific requirements:

Demo with Master/Details Grid with AngularJS:

http://demos.telerik.com/kendo-ui/grid/angular

How-to that demonstrates updating detail grid records:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/edit-master-row-data-in-detail-template

Detailed information, illustrated by code samples, about setting up transport for CRUD operations:

http://docs.telerik.com/kendo-ui/framework/datasource/crud#crud-data-operations

The following additional articles about DataSource directives and Grid settings in the context of an AngularJS application can also prove useful:

http://docs.telerik.com/kendo-ui/AngularJS/data-source

http://docs.telerik.com/kendo-ui/AngularJS/the-grid-widget

I hope this helps.

Regards,
Dimiter Topalov
Telerik

[None]

Thank you so much! Could you please change my title to something more useful? Sorry, it doesn't seem like I can edit it.

[None]

Also, my problem was this code. It seems by using filter in this way, it prevents the row from being added.

filter: {
    field: "LogId",
    operator: "equal",
    value: dataItem.LogId
}

[None]

Is it not possible to call "add New Record" on the detail data source when "filter" is being used? 

[Dimiter Topalov]

Hello Matt,

The described behavior is not related to the Master/Detail hierarchy. It is caused by the fact that when a filter is applied, and the newly created item does not meet the filtering criteria, it automatically gets filtered out, and is thus not visible, or available for editing.

You can check out the following forum discussion for a more detailed explanation, and the suggested workarounds:

http://www.telerik.com/forums/add-button-not-working-while-applying-filters-on-the-grid-column#CAWTZXTsckmzHIxsrsb2CA

Let us know if you have other Kendo UI-related questions or issues.

Regards,
Dimiter Topalov
Telerik