My kendo grid not refreshing after a edit or create a new row.I have called a angularJs service for CRUD operation.

Here's the controller

app.controller("roadInventoryCtrl", function ($scope, services) {


    $scope.gridOptions = {
        columns: [
            {
                field: "RoadCode",
                title: "Road Code",
                width: "",
                attributes: { class: "ob-right" }
            },
            {
                field: "RoadTypeId",
                title: "Type",
                readonly: true,
                width: "",
                attributes: { class: "ob-right" }
            },
            {
                field: "SerialNo",
                title: "Serial",
                width: "",
                attributes: { class: "ob-right" }
            },
            {
                field: "Name",
                width: "38%"
            },
            {
                field: "Length",
                filterable: false,
                attributes: { class: "ob-right" }
            },
            {
                field: "CrestWidth",
                title: "Crest width",
                filterable: false,
                attributes: { class: "ob-right" }
            },
            {
                field: "EmbkHeight",
                title: "Embk height",
                filterable: false,
                attributes: { class: "ob-right" }
            },
            {
                field: "Remarks",
                filterable: false
            },
            {
                command: [
                    {
                        name: "edit",
                        template: "<a data-toggle='tooltip' data-placement='left' title='edit' class='k-grid-edit k-grid-update red-tooltip'  style='width: 26px; height: 26px; vertical-align: middle; text-align: center; cursor:pointer'><span style='margin: 4px;' class='glyphicon glyphicon-edit'></span></a>",
                        text: " "

                    },
                    {
                        name: "destroy",
                        template: "<a if-role-permission=\"['PERMISSION_WORKFLOW_DEFINITION_DELETE']\" class='k-grid-delete'  style='width: 26px; height: 26px; vertical-align: middle; text-align: center; cursor:pointer' ><span style='margin: 4px;' class='glyphicon glyphicon-remove-circle target' title='delete'></span></a>",
                        text: " "
                    }, {
                        name: "map",
                        template: "<a class='k-grid-delete'  style='width: 26px; height: 26px; vertical-align: middle; text-align: center; cursor:pointer' ><span style='margin: 4px;' class='glyphicon glyphicon-map-marker target' title='map' ></span></a>",
                        text: " "
                    }, {
                        name: "info",
                        template: "<a class='k-grid-delete'  style='width: 26px; height: 26px; vertical-align: middle; text-align: center; cursor:pointer' ><span style='margin: 4px;' class='glyphicon glyphicon-info-sign target' title='info' ></span></a>",
                        text: " "
                    }, {
                        name: "pic",
                        template: "<a class='k-grid-delete'  style='width: 26px; height: 26px; vertical-align: middle; text-align: center; cursor:pointer' ><span style='margin: 4px;' class='glyphicon glyphicon-picture target' title='picture'></span></a>",
                        text: " "
                    }
                ],
                title: "",
                width: "11%"

            }
        ],

        //editable: true,
        editable: 'inline',
        toolbar: ["create"],
        pageable: true,

        dataSource: {
            pageSize: 25,
            transport: {
                read: function(e) {
                    services.getRoadInventroy()
                        .then(function success(response) {
                            e.success(response.data);
                        }, function error(response) {
                            alert('something went wrong');
                            console.log(response);
                        });
                },
                update: function(e) {
                    services.updateRoadInventory(e)
                        .then(function success(response) {
                            e.success(response.data);
                        }, function error(response) {
                            console.log(response);
                        });
                },

                destroy: function(e) {
                    services.destroyRoadInventory()
                        .then(function success(response) {
                                e.success(response.data);
                            }, function error(response) {
                                console.log(response);
                            }
                        );

                },
                create: function(e) {
                    services.createRoadInventory(e)
                        .then(function success(response) {
                                console.log(response);
                            },function error(response) {
                                console.log(response);
                            }
                        );
                }
            },
            schema: {
                model: {
                    id: "RoadCode",
                    fields: {
                        RoadCode: {
                            editable: false
                        }
                     
                    }
                }
            }
        },
        sortable: true,
        serverPaging: true,
        serverSorting: true,
        scrollable: true,
        dataBound: function () {
            this.expandRow(this.tbody.find("tr.k-master-row").first());
        },

        selectable: "row",

        filterable: {
            extra: false,
            operators: {
            string: {
                startswith: "Starts with",
                contains:"Contains"
                   
             },
             number: {
             }
           }
        }


        }



});

How can i solve this. 

Hello,

We are trying to replicate this style of chart:  https://www.amcharts.com/demos/stacked-bar-chart-with-negative-values/  

Is it possible to accomplish this with Kendo UI?

We don't need two bars on the same line, but we would have a bar that extends into either a postive or negative x-axis with a 0 starting point. The positive/negative would represent a series (such as male/female) in the above example.   We would also want to show the labels of the Value axis on the outside end of the bar, and the value label on the inside end (such as showing the "age" category label next to the bar, with the value inside the bar with above example).

 

Thanks.

 

Hello,

 I have a strange behavior of the scheduler widget.  It doesn't display correctly ( see pic attached).

It used to work before. I've checked all the css and js reference. Everything seems ok. I don't know where to look.

Anybody have a clue?

Hi,

I'm considering buying Kendo UI for a project. In the first part of the project I only need the Excel and PDF generation stuff from Kendo UI and later on I need the charts too. Then I saw that Kendo UI Core includes the Excel and PDF stuff (https://github.com/telerik/kendo-ui-core) and therefore I think I'll start by using just Kendo UI Core.

But I can't find the Workbook and drawDOM stuff anywhere in the Kendo UI Core I've downloaded using Bower. I've downloaded the full trail of Kendo UI Professional and it includes files like kendo.excel.min.js and kendo.pdf.min.js which I can't find anywhere in the Core version. Where can I find the Excel and PDF stuff in Kendo UI Core?

Thanks, Niels

Lets say I have a list of 1000 items and I am trying to navigate through the grid using keyboard arrows UP/DOWN.When I reach the last item on the page and use keyboard DOWN arrow doesn't load the next items in the grid nor the UP arrow loads the previous data. Thanks

I have a Kendo grid with inline editing. When I edit a row, and then click update, the changes show, but then when I edit the same row again and then click cancel, all the changes are removed, including the first edit. How can I make the data save after each 'Update'?

 Also can someone explain the difference between update:{} and save:{}? Thanks.

I have a grid that uses detailInit, right now I am able to change color of the row to blue when the row's given ID is equal to 0, its at this point that I need to hide the detail indicator as well, I have tried a few different things but haven't been able to successfully remove the indicator. Here is the code for my grid, and you can see where I am adding the color blue to the row and I have a comment there where I am trying to remove the detail indicator

$("#CatalogGrid").kendoGrid({
        dataSource: {
            data: catalogData
        },
        schema: {
            model: {
                id: "globalGroupID",
            }
        },

        columns: [
           { field: "globalGroupLevel", title: "globalGroupLevel", hidden: true },
           { field: "globalGroupName", title: "Group Name", width: 350 },
           { field: "isRequired", title: "*", width: 20 },
           { field: "optionName", title: "Option Name" },
           { title: "Description" },
           { title: "Price" }
        ],

        change: function (e) {
            onSelectedRowClick();
        },
        scrollable: true,
        pageable: false,
        selectable: "row",
        height: 500,
        dataBound: function (e) {
            var data = this.dataSource.data();

            $.each(data, function (i, row) {
                if (row.get("globalGroupLevel") == 0) {
                    var element = $('tr[data-uid="' + row.uid + '"] ');
                    element.addClass("colored-row");
// Trying to remove detail indicator when globalGroupID is equal to 0
                    element.removeClass("k-icon k-minus");
                }
            });

        },
        detailInit: detailInit,
        detailExpand: function (e) {
            groupID = this.dataItem(e.masterRow).get("globalGroupID");
        },
    });
}
var groupID;

function detailInit(e) {
    var masterRow = e.masterRow;
    var globalID = e.data.globalGroupID;

    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            transport: {
                read: URLParams.GetTheGlobalGroupOptions + "?id=" + e.data.globalGroupID + "&sectionid=" + isThereASectionID
            },
        },
        scrollable: false,
        selectable: "row",
        filterable: "row",
        filter: { field: "globalGroupID", operator: "eq", value: e.data.globalGroupID },
        change: function (e) {

            // get detail row
            var detailRow = this.dataItem(this.select());
            var optionName = detailRow.get("OptionName") // Change this stuff to populate into the correct columns
            var optionID = detailRow.get("OptionID");

            $("#CatalogGrid").getKendoGrid().dataItem(masterRow).set("optionName", optionName);

            ShowAndHideGroups(0);

            ProcessGlobalOption(optionID, globalID);

            //ShowAndHideGroups(0);
        },
        columns: [
            { field: "OptionID", title: "Option ID", hidden: true },
            {
                field: "OptionName", title: "Option Name", filterable: {
                    cell: {
                        showOperators: false,
                        operator: "contains"
                    }
                }
            },
            { field: "OptionDescription", title: "Description" },
            { field: "OptionPriceComment", title: "Price" }
        ]
    });
}

I have a Kendo UI map working great in Chrome, Firefox, and Safari, but not Internet Explorer 11.  There are 3 layers being loaded: a "tile" layer from opencyclemap for the background images, a "shape" layer via geoJSON file of the world countries, and a "marker" layer.  The strange thing is that the "tile" layer and the "marker" layer load fine, but the geoJSON "shape" layer never loads, and the "shapeCreated" event never fires.  This event fires fine on other browsers.  Is there something I can look for in order to debug what I've messed up on in the Kendo UI framework?  I just tested the example maps you have in the same IE browsers and the geoJSON maps work fine, so I'm thinking it's something that I'm doing wrong with the loaded data?

 This is the same file/map as a previous post but a different problem.

Having issues recreating the demo example of importing a spreadsheet.  The demo references a saveUrl and I cannot determine what that is used for.

In addition, I tried the Dojo example of the fromFile method and could not get it to work.  When I select a file, nothing happens.  Is the change event not getting fired?

I am using Chrome as my browser.  Any help would be appreciated.  Basically trying to load a simple Excel file into the spreadsheet widget.

 

Thanks, Rick

Hi,

Please help me to get my templates which I load in MVVM in different tabs fine, until I load tabs and their respective content divs dynamically using tabStrip.

I should be able to load separate templates with in tabs but I am not sure how to go about it pulling from remote JSON.

Please have a look at the link below. I've tried to add my data as arrays in the project they are all remote JSON files.

The example

I would appropriate if you could show me in the example how can I load different templates with different datasource in different tabs. In the example I am using tabsDataSource and tileDataSource.

Thanks.

Savas