Edit button in the toolbar

[Pouya]

Hi,

I successfully managed to make the Add, save and cancel functionalities in the toolbar of my grid but kendoGridEditCommand doesn't work. I enabled selectedKeys so I have an active row. How can I edit/delete a row using toolbar buttons? Can you provide my an example?

<ng-template kendoGridToolbarTemplate>
    <button (click)="onToggleFilterBar()" class="k-button k-filter-button">
        <i class="fa fa-filter" aria-hidden="true"></i>
    </button>
    <button kendoGridAddCommand class="k-button k-add-button">
        <i class="fa fa-plus-circle" aria-hidden="true"></i>
    </button>
    <button kendoGridEditCommand class="k-button k-edit-button">
        <i class="fa fa-pencil-square" aria-hidden="true"></i>
    </button>
    <button kendoGridSaveCommand class="k-button k-save-button" [disabled]="formGroup?.invalid">
        <i class="fa fa-floppy-o" aria-hidden="true"></i>
    </button>
    <button kendoGridCancelCommand class="k-button k-cancel-button">
        <i class="fa fa-times-circle" aria-hidden="true"></i>
    </button>
</ng-template>

[Dimiter Topalov]

Hi Pouya,

You can utilize the Grid selection functionality to obtain the data item, associated with the currently selected row, and the index of this row, and call the Grid editHandler, providing the required arguments (the Grid component, the index of the row that needs to be edited, and the corresponding data item).

Here is a runnable example, illustrating the described approach:

https://plnkr.co/edit/JanLTaTzCiupwiJNjaFZ?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Pouya]

Hi Dimiter,

Thank you for your quick answer. It works but not as I expected. You actually didn't use kendoGridEditCommand. I don't get the Save and Cancel button the way they appear in the new row mode. The save action is missing in your example as well. Should they be implemented manually too?

I actually implemented all these actions in a context menu separately but I don't think it would be a good idea to ask the user to right click and select save from the context menu.

Regards,
/Pouya

[Dimiter Topalov]

Hi Pouya,

Indeed the example is not fully functional, as it was just meant to illustrate putting the selected row in editing mode via custom button and click handler.

From the provided code I was left with the impression that you do not want to use the built-in Grid editing functionality, but to replace it with a custom implementation instead.

The Grid built-in editing functionality expects all related buttons to be within a column template, and each row to have its respective set of buttons:

https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-reactive-forms/

This way the correct context (row to be edited, data item, associated with this row, etc.) is available out-of-the-box.

When the buttons are outside (for example in the Toolbar template like in the discussed case), they can be shown/hidden via some custom logic. Here is an updated example:

https://plnkr.co/edit/LR1rhVRRX3BnybAHJBAO?p=preview

Regards,
Dimiter Topalov
Progress Telerik

[Pouya]

Hi Dimiter,

The reason I am reluctant to use the in-row editing button is my grid is already too wide (with currently 22 columns) that i had to tilt half of the headers to save some space and still it's bigger than the screen. And on-click editing mode is quite dangerous since the data are so important and we don't want to let users make mistake and edit something unintentionally. Plus that my grid is selectable so not every click means edit-mode.

As I thought and you did in your example it is achievable by manual approach.But I think it would be nice to have this functionality built-in. Otherwise toolbar wouldn't be fully functional. 

Thank you for your attention.

Regards,
/Pouya

[Dimiter Topalov]

Hello Pouya,

Indeed, I can understand the use case for having buttons that can control the editing functionality, located in the Grid Toolbar, but currently the respective built-in directives for the command column buttons rely on being associated with the respective Grid rows (and thus data items) the buttons are located in.

For any features and enhancements that you would like to see as a built-in functionality in a future version of the Grid package, please submit feature requests to our UserVoice portal:

http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-2-feedback?category_id=181393

It helps us to measure the customer demand for certain features, and prioritize accordingly when updating our roadmap. Thank you in advance.

On a side note, as an alternative to the currently discussed approach for enhancing the user experience during Grid editing when there are too many columns, I can also suggest utilizing the locked columns functionality and putting the command column in the locked part so that the user always has an easy access to the respective buttons, e.g.:

https://plnkr.co/edit/GETLECpyJ3yudN07zdqa?p=preview

Regards,
Dimiter Topalov
Progress Telerik