Edit grid data locally and send when user is done

[Lee]

I have a Kendo UI jQuery grid (2022.2.802) that may have hundreds of rows. Two columns in each row need to be editable dropdownlists. After the user has finished making all of their edits, they will click a button on the page to submit their changes. I don't want an API call every time a user changes something. I want them to actively click a submit button. The data source is a local JavaScript array of objects. I tried just using the template to create the dropdown lists, but due to the number of rows, this slows down the page load too much. I also don't want them to have to click in the cell twice to open the dropdown list. I would prefer that they just click in the cell and it immediately opens the dropdown. How do I solve these issues? 

1. Have to click twice in cell to open dropdown (solved with edit function)
2. Sorting name doesn't work since the value has to be an object to make the dropdown work
3. Selecting "None" throws a console error
4. Clicking on a cell with "None" automatically selects the first item in the dropdownlist

Here is a Dojo with my attempt but it isn't quite working: 
https://dojo.telerik.com/@dojolee/EJUBijuN

[Martin]

Hello, Lee,

Thank you for the provided example. To enable sorting on an object-bound column, you can use the approach suggested in this How-To article. Here you will find the modified version of your example where all the issues are addressed.

Let me know if you have any questions.

Regards,
Martin
Progress Telerik

[Lee]

Thank you. The sorting is helpful. I think my other issues were caused by the valueMapper function not getting an initial value. I fixed that by setting the value of the nameEditor dropdownlist to options.model.name.nameId

Value Mapper:

`<input name="${options.field}" data-bind="value:${options.field}"/>`)
    .appendTo(container)
    .kendoDropDownList({
        dataTextField: "nameText",
        dataValueField: "nameId",
        value: options.model.name.nameId,
        optionLabel: {
            nameId: "",
            nameText: "None"
        },
        optionLabelTemplate: "None",
        dataSource: {
            data: namesList,
            pageSize: 24
        },
        virtual: {
            itemHeight: 26,
            valueMapper: function (vmOptions) {
                setTimeout(function () {
                let data = [...namesList];
                var values = [vmOptions.value];
                var indices = [];
                if (values && values.length > 0) {
                    for (var j = 0; j < data.length; j++) {
                    var nam = data[j];
                    if (values.indexOf(nam.nameId) > -1) {
                        indices.push(j);
                    }
                }
            }
            vmOptions.success(indices);
        }, 100);
    }
},

[Martin]

Hello, Lee,

I am glad you were able to resolve the remaining problem. Let me know if you have any further questions on the matter.