Make read-only rows on KendoUI TreeList

Question

Make read-only rows on KendoUI TreeList

976 views Asked by Bjo At 14 September 2024 at 04:03

I'm making a KendoUI TreeList table and I need some rows to be read-only.

As the option does not exist by default, I'm trying to do this following this tutorial Here which works great on a KendoGrid, but not on my treelist.

I'm defining a template that creates an Edit button just for the rows that I marked as "readonly".

The buttons show up but nothing happens when I click on it... Has anyone an idea about why?

Here is the sample that I made : http://dojo.telerik.com/EXupO/2

Thank you for your help!

Original Q&A

There are 1 answers

**Jayesh Goyani** · Accepted Answer · 2015-06-23 11:32:42

Please try with the below code snippet. I have changed code of edit-template script.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.429/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.429/js/jszip.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>
<body>

    <div id="example">
        <div id="treelist"></div>
    </div>

    <script id="edit-template" type="text/x-kendo-template">
    # if (!data.readonly) { #
        <button data-command="edit" class="k-button k-button-icontext k-grid-edit"><span class="k-icon k-edit"></span>Edit</button>
    # } #
    </script>

    <script>
        $(document).ready(function () {

            var editTemplate = kendo.template($("#edit-template").html());

            var grid = $("#treelist").kendoTreeList({

                dataSource: {
                    data: [{ DomainId: 1, Name: "Test", ReportsTo: null, readonly: true },
                            { Name: "Categorie1", ReportsTo: 1, a: "10", b: "5" },
                            { Name: "Categorie2", ReportsTo: 1, a: "10", b: "5" },
                            { Name: "Categorie3", ReportsTo: 1, a: "10", b: "5" },
                    ],


                    batch: true,
                    schema: {
                        model: {
                            id: "DomainID",
                            fields: {
                                parentId: { field: "ReportsTo", nullable: true, editable: false },
                                DomainID: { field: "DomainId", type: "number", editable: false },
                                Name: { validation: { required: true }, editable: false },
                                a: { type: "number", editable: true },
                                b: { type: "number", editable: true },
                            },
                            expanded: true
                        },


                    }
                },
                editable: true,
                columns: [

                  { field: "Name", title: "Domain", width: 400, editable: false },
                  { field: "a", title: "1", filterable: false, sortable: false },
                  { field: "b", title: "2", filterable: false, sortable: false },
                  { field: "readonly", title: " ", width: 100, template: editTemplate, editor: function () { } }

                ],
                editable: "popup",
                pageable: true,

            });


        });


    </script>

</body>
</html>

Let me know if any concern.

TechQA.

Make read-only rows on KendoUI TreeList

There are 1 answers

Related Questions in KENDO-UI

Related Questions in KENDO-UI-GRID

Popular Questions

Popular Tags

Trending Questions