Custom tool bar in TypeScript Grid control

18 Nov 20182 minutes to read

Custom toolbar in TypeScript Grid allows you to create a distinctive toolbar layout, style, and functionality that aligns with the specific needs of your application, providing a personalized experience within the Grid control.

This can be achieved by utilizing the toolbarTemplate property, which offers extensive customization options for the toolbar. You can define a custom template for the toolbar and handle the actions for this toolbar template items are defined in the clicked event.

The following example demonstrates, how to render the custom toolbar using toolbarTemplate.

Render image with text in custom toolbar

Render an image with text in custom toolbar in TypeScript Grid allows easily render an image along with text in the toolbar of the Grid. This feature enhances the visual presentation of the Grid, providing additional context and improving the overall experience.

To render an image with text in custom toolbar, This can be achieved by utilizing the toolbarTemplate property.

The following example demonstrates how to render an image in the toolbar of the grid using toolbarTemplate.

You can further customize the styles and layout of the image and text in the custom toolbar to suit your specific design requirements.

Render DropDownList in custom toolbar

This can be achieved by utilizing the toolbarTemplate. The example below demonstrates how to render the DropDownList control in the custom toolbar, where the toolbar template includes the its change event is bound to the onChange method.

In the onChange method, the text of the selected item is checked to determine the appropriate action. For example, if Update is chosen, the endEdit method is called to exit the edit mode. If Edit is selected, the selected record is passed to the startEdit method to initiate the edit mode dynamically. Similarly, if Delete is picked, the selected record is passed to the deleteRecord method to remove it from the grid.

Render a control or element using the toolbar template

Rendering a control or element using the toolbar template in the TypeScript Grid allows you to extend the capabilities of the grid toolbar by incorporating custom components or elements. This provides flexibility to enhance the toolbar with custom buttons, dropdowns, input fields, icons, or any other desired UI elements. You can bind event handlers or handle interactions within the template to enable specific actions or behaviors associated with the added components or elements.

The following example demonstrates how to render a Button control in the toolbar using toolbarTemplate and perform grid action based on the respected button click.