Questions on Kendo UI for jQuery Forum

1 answer

234 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:

UPDATED:

Spreadsheet |Save If Dirty | Kendo UI Dojo (telerik.com)

Thanks again for your help and patience!
George

Data Source

Spreadsheet

updated question on 03 Jun 2024

1 answer

169 views

[Solved] The comboBox value selected doesn't always match what the client entered.

The selected value in the comboBox may not always reflect what the client entered due to a timing issue. For instance, if the client enters a value and presses enter before the filtering process is completed, they may not receive the intended value. Instead, they may receive the top value in the filtered results.

Does anyone know a dependable solution to resolve this issue?

ComboBox

Filter

answered on 03 Jun 2024

1 answer

174 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

1 answer

132 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>

Grid

answered on 29 May 2024

1 answer

128 views

tabs characters lost on workbook to excel

We have some cells with tabs (\t) character we need to export to excel.

When exporting, the tabs are removed after calling the function workbook.toDataURLAsync.

Can be reproduced here

https://dojo.telerik.com/@foxontherock/ATUzudIL

Spreadsheet

answered on 28 May 2024

2 answers

160 views

Flip Effect Issue in Firefox 126.0

We are experiences an issue with the Flip effect in the latest version of firefox, there is no animation and the content on the flip page appears in reverse on the screen.

The issue also occurs on your demo page for the flip effect, we have seen this on multiple devices running the latest version of firefox.

As far as i can see no errors are reported and nothing shows in the console

Effects

answered on 28 May 2024

1 answer

192 views

[Solved] MVVM Binding Issue: new Items added to an ObservableArray fire the change event, but fail to re-render the HTML.

Hi Kendo Gurus,

I am have a really tough time with a binding issue and I am not sure if it is MVVM related or Template related. I will try and provide as much information as possible.

The binding is done via nested templates like this:

obsOccupants is an ObservableArray that is a child property to an ObservableObject, that is bound to a form and includes the below. The "s20-employees-list" template looks like this:

I do NOT believe that anything above is an issue as this binds and works just fine on initial load, ala (I'm hiding information so there are blanks):

Further, clicking the delete icon on the right (red trash can) "soft" deletes the row via the click event handler in the bindings (pictured above), resulting in this:

Clicking the undelete icon on the right (green trash can) also behaves as expected. This is done by updating the isDeleted property on an ObservableObject in the ObservableArray. Additionally, there are other, more complicated bindings that are working just fine in the same form, although no adds - this is the first.

So far so good and I thought I was on fire. But now, when I click the Add Occupant button, search for an employee (via a separate UI not pictured) and select an employee and add it to the Observable array, things go south.

The code to add to the Observable array looks like this, and I have tried all three permutations below (First Try, Second Try, etc.). The third one seems really stupid and I was hoping that would not be the answer. :D

All of these fire a bound change event as expected, and you can see that the count of obsOccupants has increased to 2 and the added employee is included in the event, ala:

So the new employee exists in the obsOccupants array, the count is correct but the HTML does not update, although as mentioned above, a change on any of the objects IN the Observable Array correctly updates the HTML..

I have tried simplifying the HTML as well as the bindings but still to no avail. Is there anything I should be looking for or trying?

Thankyou for any help.

Cheers,

Justin

MVVM

Templates

answered on 27 May 2024

5 answers

353 views

Multiple Record in One Line

I have started using Kendo GanttChart Asp.net MVC. I want to display two record on the same line. Is this feature available in Kendo GanttChart Asp.net MVC?

My requirement is attached.

Gantt

answered on 27 May 2024

1 answer

95 views

Dropdownlist in KendoFilter

Is it possible to have a dropdownlist inside the kendoFilter instead of normal textbox, numeric textbox or datepicker?

Filter

answered on 27 May 2024

1 answer

168 views

FileManager - Duplicate Treeview subfolder entries

Duplicate subfolder entries show up in the left-hand TreeView, when following these steps:

Steps to reproduce:

Go to https://dojo.telerik.com/?_gl=1*2z9m1t*_ga*NDczOTA3MjcwLjE3MTYyNDA5MTc.*_ga_9JSNBCSF54*MTcxNjQ2NTgzMy40LjEuMTcxNjQ5Njc0Ny4zNC4wLjA.*_gcl_au*MTc1OTAwMzE4Mi4xNzE2MjQwOTE3 (or https://demos.telerik.com/kendo-ui/filemanager/index )
Click the "Documents" folder on the left (treeview)
Click "New Folder" to create a new folder. Name does not matter.
In the left-hand treeview, select any other folder besids "Documents"
Select "Documents" again in the treeview.
Notice that "New Folder" now shows up two times under "Documents"
You can repeat steps 4-6, and another duplicate "New Folder" will show up each time.
Also, clicking "Grid View" or "List View" while "Documents" is selected, will add another duplicate

This is in version 2024.2.514, which is the latest as of now.

FileManager

answered on 27 May 2024