How to keep header configuration when updating Grid options ?

[Théodore]

Hello,

I have a kendo grid created from an HTML table like this:

<div class="content">
    <table id='k-grid'>
        <thead>
            <tr>
                <th data-field="my_value1">Title 1</th>
                <th data-field="my_value2">Title 2</th>
            </tr>
        </thead>
    </table>
</div>

I need to update its toolbar at runtime with setOptions in another file and I can't modify the grid setup.
So I did :

const options = kendoGrid.getOptions();
if (!options.toolbar) {
    options.toolbar = [];
}
options.toolbar.push(
    { template: `<div class='vr'></div>` },
    { template: `<select id='my-selector'></select>` }
);
kendoGrid.setOptions({ toolbar: options.toolbar });

 

But when I refresh the Grid using setOptions, the columns  titles are lost and take the value of the data-field attributes.
I know this is expected behavior with reference to the setOptions documentation and the init from Table - documentation.

My goal is to make updating the toolbar completely transparent to creating the grid in order to reuse it on any table without breaking it.

How can I keep the data in the original HTML table and apply it to the newly created grid with setOptions please?

[Nikolay]

Hi Théodore,

This is expected and is not recommended to call setOptions() when the Grid is initiated from an HTML Table. 

To have setOptions() not interfering with the Grid options when invoked I recommend initializing the Grid the standard way binding it to a dataSource.

Regards,

Nikolay

[Théodore]

Hi Nikolai,

Thank you for your response, I understand that my way of doing things is not standard.

I found a workaround like this:

const options = kendoGrid.getOptions();
options.toolbar = [
    { template: `<select id='my-selector-A'></select>` },
    { template: `<select id='my-selector-B'></select>` }
];
// Work-around to restore headers after setOptions
const oldHeaders = kendoGrid.wrapper.find('.k-grid-header .k-link');
kendoGrid.setOptions({ toolbar: options.toolbar });
const newHeaders = kendoGrid.wrapper.find('.k-grid-header .k-link');
for (let i = 0; i < oldHeaders.length; ++i) {
    newHeaders[i].replaceWith(oldHeaders[i]);
}

I'm not sure if this is the best way to go about it, but it seems to be working well on my end at the moment.

My problem is that I would like to create a generic module in a second JS file that injects DropDowns into the toolbar without modifying the first JS file that had created the kendoGrid.

[Nikolay]

Hi Théodore,

This is a valid approach. Thank you for sharing it with the community. I might be useful to others facing the same scenario.

Regards,

Nikolay