kendo-ui: ver. 2018.2.516

I want to select value in  headerTemplate then iterate throught all data in templates and if select in template contains same value change it. I can’t find any information how to do it

Could someone help me?

columns: [{
    title: "task",
    headerTemplate:
'<select kendo-drop-down-list k-options="$ctrl.multiSelect(dataItem)"></select>',
    field: "task_id",
template:
 '<select kendo-drop-down-list k-options="$ctrl.templateSelect(dataItem)"></select>',
    width: "240px"
}

Anyone by chance have any luck implementing fontawesome pro icons in a diagram? I was shown how to use the fontawesome free library icons like this:

... but this doesn't work:

FontAwesome Icon Cheatsheet: https://fontawesome.com/cheatsheet/pro/regular

Help me code How to get value id from dataSource by row and change to current value default (1)

in line:  var date = dataSource.get(1);
            console.log(date.ProductName)

My full source:

<div id="grid"></div>

    <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 } }
                            }
                        }
                    }
                });
          
            $("#grid").kendoGrid({
                dataSource: dataSource,
              selectable: true,
                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: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
                editable: "inline",
              edit: function () {

                  var date = dataSource.get(1);
                  console.log(date.ProductName)

                } 
            });
        });
    </script>

Hi,

I'm using Kendo spreadsheet as part of my page and its placed at the bottom of the page. Whenever we load the spreadsheet the page automatically scrolls to bottom. Please find the sample below. Is there a way to disable scroll ?

https://dojo.telerik.com/UCoVIPey

I want to use dataSource.get () to get the corresponding id where the default id number = 1. Everyone help me, please.

   <!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/editing-inline">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
    
    

</head>
<body>
    <div id="example">
    <div id="grid"></div>

    <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 } }
                            }
                        }
                    }
                });

            $("#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: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
                editable: "inline",
             
              edit: function (e) {
                  var id = e.sender.dataItem(e.container).ProductID;
                  var data = dataSource.get(1); //How do I get the corresponding id instead of the default 1
                          console.log(data.ProductName);
                }
              
                
            });
        });

        function customBoolEditor(container, options) {
            $('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
        }
    </script>
</div>


    

</body>
</html>

See the following example: https://dojo.telerik.com/EboZUXif.

Expanding / collapsing a child panel causes the parent panel to expand / collapse as well.

Kind regards,
Ron

OK SO this is a little hard to actually explain but- I have a multiselect with a datasource and validation rules, not unlike this demo here. For some reason, it's failing validation even though it has a value. What is going wrong/how can I fix it/what further details do I need to provide?

Thank you, I apologize for the poor explanation.