I am creating a grid using AngularJS. The data is added correctly, but I can not configure the size of the columns. I'm setting the width in the code, but it does not seem to work.
Code:
<div kendo-grid 
                         k-data-source="frigobarGridOptions" 
                         k-selectable="'row'"
                         k-pageable='{ "pageSize": 5, "pageSizes": true }'
                         k-columns='[
                            { "field": "ItemId", "title": "Id", width: "130px"},
                            { "field": "Descricao", "title": "Descrição", width: "250px"},
                            { "field": "Quantidade", "title": "Quantidade", width: "100px" }
                      ]'>
</div>

Follow the screenshot of the grid.

Currently i'm running into an issue with the visibility of one column in my Kendo Grid while using AngularJS in combination with odata-v4.
When the grid initially loads all data is shown for each column, but after either an add or update action, the column showing the type doesn't display the value anymore, spefically for that record.
We resolve the odata type to a more readable version with a scope variable that contains the possible types

Our Model and options definion for the grid, they both get send to a function that combines and sets required default settings for our data grid:

In our model we have to use "from: "['@odata.type']", to get the data to the Type field out of the odata-v4 attribute. We also have to use the formatting with the square brackets, if we don't use this the code won't work. I've also tried using a template for the values but I couldn't manage to get it to work that way either. With some research i also discovered that the return might be an issue with not giving all data but i also get the fully filled record returned from the server see below

To summarize, the @odata.type value is being shown in the grid column on an initial load, but after the a crud action, the type for the effected row disappears.

I am dynamically hiding a command button on dataBound. When editing I edit that row then switch to another row to edit the hidden button is displayed.

How can I keep this hidden button?

  <script>
                $(document).ready(function () {
                    var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read:  {
                                    url: crudServiceBaseUrl + "/Products",
                                    dataType: "jsonp"
                                },
                                update: {
                                    url: crudServiceBaseUrl + "/Products/Update",
                                    dataType: "jsonp"
                                },
                                destroy: {
                                    url: crudServiceBaseUrl + "/Products/Destroy",
                                    dataType: "jsonp"
                                },
                                create: {
                                    url: crudServiceBaseUrl + "/Products/Create",
                                    dataType: "jsonp"
                                },
                                parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                                    }
                                }
                            },

                            batch: true,
                            pageSize: 20,
                            schema: {
                                model: {
                                    id: "ProductID",
                                    fields: {
                                        ProductID: { editable: false, nullable: true },
                                        ProductName: { validation: { required: true } },
                                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                        Discontinued: { type: "boolean" },
                                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                    }
                                }
                            }
                        });
gridCommands =[{
                        name: "edit",
                        text: " ",
                        mode: "inline"},
                                      {
                          name:"destroy",
                          text: " "},
                                   {
                          name: "exportproduct",
                          text:"Export",
                          click: ExportProduct}
                          ];
                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        pageable: true,
                        height: 550,
                        toolbar: ["create"],
                        columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
                            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
                            { field: "Discontinued", width: "120px", editor: customBoolEditor },
                            { command: gridCommands, title: "&nbsp;", width: "250px" }],
                        editable: "inline",
                        dataBound: function (e) {
                            var columns = e.sender.columns,
                                dataItems = e.sender.dataSource.view();

                            for (var i = 0; i < dataItems.length; i++) {
                                var product = dataItems[i].get("ProductName");
                                if (product === "Chang") {
                                    var row = e.sender.tbody.find("[data-uid='" + dataItems[i].uid + "']");
                                    var cell = row.children().eq(4);
                                    var btn = cell.children().eq(2);
                                    btn.hide();
                                }

                            }
                     
                       }
                    });
                });

                function customBoolEditor(container, options) {
                    var guid = kendo.guid();
                    $('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
                    $('<label class="k-checkbox-label" for="' + guid + '"></label>').appendTo(container);
                }
              function ExportProduct(container) {
                alert(container.name);
              }
        </script>

I have developed a workflow builder tool using RADDiagram and I am, for the most part, quite happy with the result.  That said, I would like try to add a bit more polish to the finished product by adding "arrows" to the tooltip callout pointing to the selected shape (see attached image).  Is this mod possible?  FWIW, I have tooltips working now but they are simply rounded rectangles.

Thanks.

Hello,

installed couple of a11y extensions to Chrome, tested some of pages using Kendo widgets and got bunch of ARIA errors reported. Not sure what is the actual problem for all of them, but when read through specs, I found that e.g. aria-valuenow attribute should not be present if empty and furthermore should be used mainly for numeric values, see https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow for details.

On the other hand, is it even necessary to have this attribute for form fields such as password, e-mail or plain textbox?

I am finding that the tooltip shown is not what is produced by the tooltip.template.

https://dojo.telerik.com/utAxum

I have added export to pdf button in my graph. On click, Following error occurs:

"TypeError: a[6] is undefined"

Kindly assist

Hello, I have a problem with my code.

In mi command i try to use a template whit a "If" statement, but doesn't work, what is wrong? 

command:
                            {
                                text: "Work",
                                click: function (e) {
                                    angular.copy(this.dataItem($(e.currentTarget).closest("tr")), vmOrd.DataRel);
                                    $scope.$broadcast('loadData', vmOrd.DataRel);                                   
                                    $scope.$apply();
                                },
                                template: '#if(Quantity != 0){# <a href="\\#" class="k-button k-button-icontext k-grid-Work"><span class="fa fa-2x fa fa-pencil-square-o text-default"></span></a> # } else {# <a href="\\#" class="k-button k-button-icontext k-grid-Work"><span class="fa fa-2x fa fa-pencil text-default"></span></a> #} #',
                            },