Adding a dropdown list in the Action Column instead of using command buttons doesn't work right

[Thomas]

I'm new to Kendo UI/Telerik, but have been a web developer for over 15 years.

Please forgive my title as well, as I could be doing it completely wrong by doing this:

            dataBound:function(){
                $('.toolbar').kendoToolBar({
                    items: [ {
                        type: "splitButton",
                        text: "Edit",
                        click:function(e){
                            var grid = $('#grid').data('kendoGrid');

                            grid.editRow(e.target.parents('tr'))
                        },
                        menuButtons: [
                            { id: "foo", text: "Print", click:function(){alert('print')} },
                            { id: "bar", text: "Delete", click:function(e){
                                    var grid = $('#grid').data('kendoGrid');

                                    grid.removeRow(e.target.parents('tr'))
                                } },
                        ]
                    } ]
                });
            }

But that's what the demo shows. I’m a bit confused as to why this works with a hardcoded data source:

https://dojo.telerik.com/eMUwAqUH

 

I've been piecing together quite a bit on my own, but one thing has me stumped -- this seems like such a common requirement for Grid usage, and yet my searches don't seem give me anything for jQuery UI.

 

But as soon as I swap in my real data source (API call), when I hit Edit, then hit Edit again to save the change, the entire box disappears.

 

I took a short video:

https://www.loom.com/share/9d894316b4364efbae18c01e8ede9db4

This is a pretty big deal for me because all of my data tables are going to be API driven, and I want to use a dropdown for the action columns NOT individual buttons. A lot of the time I’m going to have more than just “Edit and Delete” so a dropdown makes more sense.

 

Any help would be appreciated, I'm sure you can literally swap out the dataSource and columns with a sample one, and you should get the exact same error. I'm running on the latest version of Edge, but same thing happens in Chrome.

[Thomas]

Saw my video link didn't work, try this one:

https://www.loom.com/share/9d894316b4364efbae18c01e8ede9db4

Also, my code is below.

        var crudServiceBaseUrl = current_full_url + "?api=1&kendo_ui=1",
            dataSource = new kendo.data.DataSource({
                transport: {
                    read:  {
                        url: crudServiceBaseUrl,
                        dataType: "json",
                        type: "GET"
                    },
                    update: {
                        url: crudServiceBaseUrl,
                        dataType: "json",
                        type: "PUT"
                    },
                    destroy: {
                        url: crudServiceBaseUrl,
                        dataType: "json",
                        type: "DELETE"
                    },
                    create: {
                        url: crudServiceBaseUrl,
                        dataType: "json",
                        type: "POST"
                    },
                    parameterMap: function(options, operation) {
                        if (operation == 'read') {
                            return {
                                options
                            };
                        }
                    }
                },
                pageSize: 25,
                page: 1,
                total: 0,
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true,
                schema: {
                    model: {
                        id: "id",
                        fields: {
                            id: { editable: false, nullable: false },
                            provider_id: { editable: false, nullable: false },
                            name: { type: "string", validation: { required: true } },
                            description: { type: "string", validation: { required: true } },
                            logo: { type: "string", validation: { required: false } },
                            keywords: { type: "string", validation: { required: false } },
                            updated_at: { editable: false, nullable: false }
                        }
                    },
                    data: function(response) {
                        return response.provider_companies;
                    },
                    total: function(response) {
                        return response.totalRecords;
                    },
                    errors: function(response) {
                        if ( response.failure ) {
                            console.log("Errors", response.msg)
                            return response.msg;
                        }
                    },
                }
            });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            filterable: true,
            pageable: true,
            sortable: true,
            height: 550,
            toolbar: ["create", "search"],
            columns: [
                { field: "name", title: "Name" },
                { field: "description", title: "Description" },
                { field: "logo", title: "Logo" },
                { field: "keywords", title: "Keywords" },
                { template: "<div class='toolbar'></div>" }
            ],
            editable: "inline",
            dataBound:function(){
                $('.toolbar').kendoToolBar({
                    items: [ {
                        type: "splitButton",
                        text: "Edit",
                        click:function(e){
                            var grid = $('#grid').data('kendoGrid');

                            grid.editRow(e.target.parents('tr'))
                        },
                        menuButtons: [
                            { id: "foo", text: "Print", click:function(){alert('print')} },
                            { id: "bar", text: "Delete", click:function(e){
                                    var grid = $('#grid').data('kendoGrid');

                                    grid.removeRow(e.target.parents('tr'))
                                } },
                        ]
                    } ]
                });
            }
        });

I should note that if I use the command buttons instead, it works fine with both inline and popup. Currently I'm liking popup more because I have hidden values that I can show via the template, which is awesome. 

But without the dropdown in the Action column, I'm afraid it's going to look cluttered with a bunch of buttons, so getting this to work is my top choice. 

Appreciate any help!

[Thomas]

Nevermind, after another 5 hours of messing with it, I got it all working.