Hello.

we are testing the kendo ComboBox as part of our widget system , in order to integrate with angular we included kendo.directive modules.

the Original issue i wanted to solve was how to disable the angular binding on key press up and down .

Our directives are ES6 Classes and we using the kendo combo box directive , the problem here is its seems that the combo-box create another input element on the page and don't copy other attributes we added like angular ng-keydown , when  i used the post compile method to find the new kendo input element then adding the missing properties and then $recompile the input the browser was unresponsive.

 Using the kendo auto-complete directive was good because it's don't replace the original object.

   _getElementHtml() {
                var mapper = this.mapper;
                var item = mapper ? 'item' : 'item.key';
                var mdId = this.$attrs.mdId + (this.listIndex ? "-" + this.listIndex : "");
                var html = [];

                html.push("<div class='idi-combo-box'>");
                html.push("<span ng-show='$this.filterText'>{{$this.filterText}}</span>");
                var kendoType = this.isServerAutoComplete() ? 'auto-complete' : 'combo-box';

                html.push("<input kendo-" + kendoType + " k-on-open='onOpen(kendoEvent)'  k-options='comboConfig'  k-data-source='comboList'  k-on-select='onSelection(kendoEvent)' ");
                html.push(" type='text' ng-show='!$this.filterText' id='" + mdId + "'");
                html.push(" ng-model='kendoInput' ");
                html.push(" tooltip-placement='bottom' ");
                html.push(" tooltip='{{$this.tooltip}}' ");
                html.push(" ng-keydown='$this._onKeyDown($event)'");
                html.push(" ng-keypress='$this._onKeyPress($event,$this)'");
                html.push(" ui-mask='{{::$this.mask}}'");

                html.push((this.$attrs.readOnly ? 'readonly="readonly" ' : ''));

                html.push("/>");
                html.push("</div>");

                return html.join('');
            }

thanks in advance,

elad.

I can not able to bind value in detailInit function in coloumn template: "<input ng-model='data.itemId' />", title: "item Id". data.itemId not working in children grid

 vm.gridOptions1 = {
            dataSource: {
                batch: true,
                data: [{
                    id: 1,
                    name: "Abra",
                    items: [{
                        itemId: 10,
                        sku: "ABC123"
                    }, {
                        itemId: 11,
                        sku: "DEF567"
                    }]
                }, {
                    id: 2,
                    name: "Kadabra",
                    items: [{
                        itemId: 20,
                        sku: "ABC678"
                    }, {
                        itemId: 21,
                        sku: "GHI567"
                    }]
                }]
            },
            detailInit: vm.detailInit,
            editable:true,                      
            navigatable:true,     
            columns: [{
                field: "id",
            }, {
                // field: "name",
                template: "<input type='text' ng-model='dataItem.name' />", title: "name"
            }, ]
        }

        function detailInit(e) {
            var dataTest = e.data.items;
            var grid = this;
            $("<div/>").appendTo(e.detailCell).kendoGrid({
                dataSource: dataTest,
                editable: true,
                columns: [{
                    // field: "itemId"
                     template: "<input ng-model='data.itemId' />", title: "item Id"
                }, {
                    field: "sku"
                      // template: "<input ng-model='dataItem.sku' />", title: "sku"
                } ],
                save: function() {
                    grid.one("dataBinding", function(e) {
                        e.preventDefault();
                    });
                }
            });
        }

I know this question has been asked many times but I was unable to find an answer, please help.
1. I need to update a value of the column "ProductName" that is not editable. I need to do it when I change (select) value in the dropdown Category

2. Keep the grid row in edit mode because I will change other fields in the row

3.  And then click Update button to update the grid row. Or cancel - to restore the original values in the row

Thank you!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css">

    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.min.css">
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jszip.min.js"></script>
</head>
<body>
  
<script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div id="example">
  <div id="grid"></div>
    <script>

        var dataSource = new kendo.data.DataSource({
            pageSize: 20,
            data: products,
            autoSync: false,
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true }, editable: false },
                        Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
                        UnitPrice: { type: "number", validation: { required: true, min: 1} }
                    }
                }
            }
        });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            height: 430,
            toolbar: ["create"],
            columns: [
            { field:"ProductName",title:"Product Name" },
            { field: "Category", title: "Category", width: "160px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
            { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
            { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
            editable: "inline"
        });

        function categoryDropDownEditor(container, options) {
            $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
                    }
                },
                select: function() {
                    var grid = $("#grid").data("kendoGrid"),
                        model = grid.dataItem(this.element.closest("tr"));

                    model.ProductName = "changed";
                }
            });
        }
        </script>
</div>
</body>
</html>

Hi,

I would like to validate the dropdown list dataSource in resouces:

Hello,

Is it possible to change the series background color when it is below some value for example 0.

I am trying to achieve something like the attached image.

Using Angular 4.

Thank you!

Hi,

I've been working with the async upload and have a requirement to get the chunk version working as per the example at http://demos.telerik.com/kendo-ui/upload/chunkupload

I've got this working as per the demo and uploading to a local file system and I can step through the code to see how this works. However the file storage is SQL Server Filestream (which I have working with the standard async version) and it needs to handle much larger files (2+ GB) so I need to chunk upload to prevent it timing out and to give the user an indication of progress.

So, based on the demo included above I need to implement the SQL calls to upload the chunks in the foreach loop in the ChunkSave method but I'm not sure how to acheive this taking into account I need to wrap the chunks in a transaction so that I know if it's succeeded or failed. In addition I need to save additional values against each file so I'm not sure how I would acheive this (have a check in the foreach loop to see if these values have already been set maybe?).

I've not been able to find any examples using the Kendo control so if anyone could offer some advice or point me to some examples that would be very much appreciated.

Thanks,

Mark

I have a Kendo UI spreadsheet and defined validations to columns. Validations are working when I enter data manually in the sheet. But if I do a Copy paste from Excel, the validations are not working. Any help on this is highly appreciated

            $(function () {
                $("#spreadsheet").kendoSpreadsheet({
                    //                excel: {                
                    //                    // Required to enable saving files in older browsers
                    //                    proxyURL: "//demos.telerik.com/kendo-ui/service/export"
                    //                },   
                    columns: 25,
//                    headerHeight: 0,
//                    headerWidth: 0,
                    toolbar: false,
//                    formulabar: false,
                    sheetsbar: false,
                    sheets: [
                    {
                        rows: [
                            {
                                height: 30,
                                cells: [
                                    {
                                        value: "Column1", background: "rgb(204,204,204)", textAlign: "center", color: "rgb(255,0,0)", bold: "true", fontName: "Arial"
                                    },
                                    {
                                        value: "Column2", background: "rgb(204,204,204)", textAlign: "center", color: "rgb(255,0,0)", bold: "true", fontName: "Arial"
                                    },
                                    {
                                        value: "Column3", background: "rgb(204,204,204)", textAlign: "center", color: "rgb(255,0,0)", bold: "true", fontName: "Arial"
                                    }
                                ]
                            }
                        ],
                        columns: [
                            {
                                width: 80
                            },
                            {
                                width: 115
                            },
                            {
                                width: 115
                            }
                        ]
                        },
                        {
                            name: "ListValues",
                            rows: [ //A2:A1001
                                    {
                                    cells: [
                                                {
                                                    value: 'I'
                                                },
                                                {
                                                    value: 'C'
                                                }
                                            ]
                                    }
                                    ]
                        }
                ]
                    });

                    //Get the column range
                    var range = $("#spreadsheet").data("kendoSpreadsheet").activeSheet().range("A2:A1001");

                    //Apply the validation rule
                    range.validation({
                        dataType: "list",
                        from: "ListValues!A$1:B$1",
                        allowNulls: false,
                        type: "reject",
                        titleTemplate: "Invalid Value",
                        messageTemplate: "Column1 valid values are 'C' and 'I'."
                    });
            });

We have discovered that the Skip and Take parameters that are used for paging, are treated as expression constants inside the Kendo.Mvc librabry.

For this reason, each page will generate a slightly different query because these two numbers are IN the query versus begin a query parameter.

Most DBMS systems who use optimized query plans, will not be able to re-use these plans for different pages, which is a performance waste.

Here are some blogs also describing our issue:

• https://anthonychu.ca/post/entity-framework-parameterize-skip-take-queries-sql/
• https://visualstudiomagazine.com/articles/2016/12/06/skip-take-entity-framework-lambda.aspx

I also attached a screenshot of the Skip and Take implementation of the Kendo.Mvc Queryable Extensions library.

Our software is based on .NET 4.6 and we have no near-future plans to going to .NET Core.

Is there a workaround for this performance issue?