Questions on Kendo UI for jQuery Forum

3 answers

539 views

We need your feedback, because we are considering changes in the release approach for Kendo UI for jQuery. Please provide your feedback in the comments section below:

1. Is it hard to understand the version numbers of our releases? If yes, what makes them hard to understand them?

2. Would semantic versioning (SemVer) of our releases make it easier to understand our version numbers and what's behind them?

3. If we go with SemVer, we might need to start with version 3000.0.0 as we currently use 2022.x.x. Please share your thoughts about this approach and ideas for what number versioning would work best for you.

General Discussions

answered on 23 Jun 2023

0 answers

2 views

Event text when line wrapped

When a long event.title text wraps onto a second line the text on the second line is not vertically aligned with the start of first line (see screenshot).

Is there a good solution to ensure the second line is aligned with the first?

Scheduler

asked on 01 Jun 2024

0 answers

4 views

Upside Down Tree List

This is an odd request, I know. I have a client asking for a tree list style grid that opens up instead of down when you click on a parent field. They want this so that, when expanded, it matches their excel spreadsheets which have children at the top and subtotals at the bottom of each category followed by grand totals. Basically, think of the whole table body being flipped upside down like this (but it should be a grid with multiple columns):

    Child of 1
    Child of 1
    Child of 1
Parent 1
    Child of 2
        Grandchild of 2a
    Child of 2 (2a)
Parent 2

TreeList

updated question on 31 May 2024

0 answers

6 views

2021.3.1207 Gantt's "Cannot read properties of undefined (reading 'get')" bug without update version

I'm using Kendo UI R3 2021 SP2 (version 2021.3.1207). There is a bug in the Gantt component (https://github.com/telerik/kendo-ui-core/issues/6547). This bug has been fixed in Kendo UI R1 2022 SP1 (version 2022.1.301), but I cannot upgrade to the new version due to rendering issues. How can I fix the Gantt issue while staying on version 2021.3.1207?

Gantt

asked on 31 May 2024

0 answers

3 views

Kendo material css doesn't work with groups in dropdown tree

In my project I use these css

/kendo-material/kendo.common-material.min.css" rel="stylesheet" />
/kendo-material/kendo.material.min.css" rel="stylesheet" />
/kendo-material/kendo.material.mobile.min.css" rel="stylesheet" />

I tried to use group in kendo drop down tree as in this example

https://dojo.telerik.com/iboWAviK

but

I get broken css

Do I need to update the css?

DropDownTree

asked on 31 May 2024

0 answers

4 views

Kendo Issue about hidden columns are showing on the grid with data for some time and disappears

Hii,

While exporting the data to excel the hidden columns appear for some time (some seconds) and disappear in kendo angular js, as I am hiding those column on grid using hidden: true and showing in the excel using showColumn(1), and I am experiencing the stange behavoir that after data exporting to the excel from the grid (includes available column on the grid and hidden columns as well), it shows hidden columns with data for some seconds on the grid and disappear and grid regain its original state, how to fix this behavior?

(Using, Kendo UI, angular Js, Jquery) and tried timeout, showing and hiding loader, css but not worked.

Data Source

Grid

asked on 31 May 2024

1 answer

12 views

ScrollView not anymore working in Firefox

Hello

ScrollView seems not to work anymore in Firefox. You can try it by yourself with KendoUIs sample:

1. Open Firefox

2. Head here: https://demos-poc.telerik.com/kendo-ui/scrollview/index

3. Click the left/right arrow or any dot at bottom of displayed image

-> See tany other image is not displayed.

Firefox shows some warnings but no errors in the Console. Tested on Mac with Firefox 126.0 (64Bit) but also got information it's not working with Firefox on Windows (not sure about Firefox Mobile).

Anyone can confirm this issue/bug?

ScrollView

answered on 30 May 2024

1 answer

9 views

Initialize widgets with data attribute

Sometimes, I find it easier to initialize widgets using data attributes.

However, I often find it difficult to find precise documentation on initialising specific widget properties, and I find myself trying out various attributes combinations.

1) Can all properties/settings for every Kendo UI jQuery widget be initialized using data attributes?

2) Where can I find documentation (API documentation) on initialising every property/setting for each widget using data attributes?

General Discussions

answered on 30 May 2024

0 answers

4 views

What do I have to do to detect changes in a spreadsheet: how to get the dirty flag to work

I am trying to detect whether the rows in a spreadsheet have been changed. Thus far I haven't been able to get the dirty or isDirty flag to work with the dataSource that I am binding to the spreadSheet control.

Here is my dataSource:

            $("#spreadsheet").kendoSpreadsheet({
                columns: 20,
                rows: 200,
                toolbar: true,
                sheetsbar: true,
                dataSource: dataSource,
                width: "100%"
            });

Button control:

I click this button to check for dirty rows in the dataSouce:

            //render and initialize button:
            $("#save-sheet-btn").kendoButton({
                icon: "forward",
                themeColor: "primary",
                click: saveSheet 
            });

Button:

the saveSheet function mapped to the click option looks like this:

        function saveSheet() {

            var currSpreadSheet = $("#spreadsheet").data("kendoSpreadsheet");
            var data = dataSource.data();

            var dirtyItems = $.grep(dataSource.view(), function (e) {

                return e.dirty === true;
            });

            console.log("Modified rows:", dirtyItems);

        };

I am trying to avoid sending back the entire sheet structure or data source when I want to save the spreadsheet contents, as the dataSource in the real program could get very large (1000 + records)..and only send back the rows that have been edited... that is why I am trying to detect them copy them to a smaller structure and send them in a request body (HTML POST).

How I have been testing it:

(1) Page loads, initializing in a jQuery: $(document).ready(function () {}) block.
(2) Change a cell value.
(3) Click the save button
(4) View the onclick function consol.log(...) and look within the array for any indication that the row dirty flag has been tripped.

Thus far the array is empty.... so what am I missing? I am not using any of the transport options, and maybe I should? also I usually have to grab the data from a .NET Web API... and the response comes back in the form of a JSON array similar to the below Dojo page.

As you can see the initialization of the spreadSheet, dataSource and button in this example is pretty bare bones... I only like to initialize kendo ui widgets/components with the bare minimum I have to. So. there are options missing. My full example code is located here:

Spreadsheet: Dirty Flag Test | Kendo UI Dojo (telerik.com)

Thanks again for your help and patience!
George

Data Source

Spreadsheet

asked on 29 May 2024

1 answer

6 views

Unable inline editing in kendo ui grid for jquery without hitting the controller method.

I have a jQuery grid where i enabled inline editing for some fields, but I want to edit multiple rows and allow to get data updated locally, and on any button click it should it the method/api. But if I set the autosync property to false I can not update the record in the grid.

@{
    Layout = null;
}

<link href="https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.1.100/styles/kendo.default-v2.min.css" />
<script src="~/Scripts/kendo.all.min.js"></script>

<div id="example">
    <div id="grid"></div>
    <script>
        $(document).ready(function () {
            var crudServiceBaseUrl = "/Kendo",
                dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: crudServiceBaseUrl + "/IndexGrid",
                            dataType: "json"
                        },
                        update: {
                            url: crudServiceBaseUrl + "/UpdateUserDetails",
                            type : "POST",
                            dataType: "json"
                        },
                        //destroy: {
                        //    url: crudServiceBaseUrl + "/detailproducts/Destroy",
                        //    dataType: "jsonp"
                        //},
                        parameterMap: function (options, operation) {
                            debugger;
                            if (operation !== "read" && options.models) {
                                return { models: kendo.stringify(options.models) };
                            }
                        }
                    },
                    batch: true,
                    pageSize: 20,
                    autoSync: true,
                    //aggregate: [{
                    //    field: "TotalSales",
                    //    aggregate: "sum"
                    //}],
                    //group: {
                    //    field: "Category.CategoryName",
                    //    dir: "desc",
                    //    aggregates: [
                    //        { field: "TotalSales", aggregate: "sum" }
                    //    ]
                    //},
                        schema: {
                        model: {
                            id: "UserLink",
                            fields: {
                                UserLink: { editable: false, nullable: true },
                                UserName: { type: "string", editable: true },
                                Mobile: { type: "number", editable: true },
                                Email: { type: "string", editable: true },
                                DOB: { type: "date", editable: true },
                                CourseOpt: { type: "string", editable: true, nullable: true },
                            }
                        }
                    }
                });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                columnMenu: {
                    filterable: false
                },
                height: "100%",
                editable: "popup",
                pageable: true,
                sortable: true,
                navigatable: true,
                resizable: true,
                reorderable: true,
                groupable: true,
                filterable: true,
                dataBound: onDataBound,
                toolbar: ["excel", "pdf", "search", "create", "save", "cancel"],
                pdfExport: function (e) {
                    const width = e.sender.wrapper.width();
                    e.sender.wrapperClone.width(width);
                    e.sender.wrapperClone.addClass('k-clone');
                },
                columns: [
                    {
                        field: "UserName",
                        title: "UserName",
                        width: 300
                    },
                    {
                        field: "Mobile",
                        title: "Mobile"
                    },
                    {
                        field: "Email",
                        title: "Email ID",
                        width: 130,
                    },
                    {
                        field: "DOB",
                        title: "DOB",
                        editor: datePickerEditor,
                        width: 125
                    }, {
                        field: "CourseOpt",
                        title: "CourseOpt",
                        editor: clientCourseEditor,
                        width: 200,
                    },
                    { command: ["edit", "destroy"], title: "&nbsp;", width: 120 }],
                      saveChanges: function (e) {
                        // Manually sync changes
                        dataSource.sync();
                    }
            });
        });

        function clientCourseEditor(container, options) {
            $('<input required name="CourseOpt">')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataTextField: "Title",
                    dataValueField: "CourseLink",
                    dataSource: {
                        transport: {
                            read: {
                                url: "/Kendo/CourseDtls",
                                dataType: 'json'
                            }
                        }
                    }
                });
        }

        function datePickerEditor(container, options) {
            $('<input data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDatePicker({
                    format: "dd/MM/yyyy"
                });
        }

        function onDataBound(e) {
            debugger;
            var grid = this;
            grid.table.find("tr").each(function () {
                var dataItem = grid.dataItem(this);
                kendo.bind($(this), dataItem);
            });
        }

        //function returnFalse() {
        //    return false;
        //}
    </script>
</div>