ACTION OF CUSTOMIZATION TOOLBAR

[Guadalupe]

Hello

I need  to example of a action of to button of customization toolbar in the moment that select to row.

[Vignesh Natarajan]

Hi Guadalupe, 

 

Thank for contacting Syncfusion support. 

 

Query: ACTION OF CUSTOMIZATION TOOLBAR 

 

We have achieved your requirement using custom toolbar feature of ejGrid. And using toolbarClick event we have changed the alignment of selected tr. 

 

Please refer the below code example, 

 

  <ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True"> 

        <ClientSideEvents ToolbarClick="onToolBarClick" /> 

………………….. 

        <ToolbarSettings ShowToolbar="True"> 

            <CustomToolbarItem> 

                <ej:CustomToolbarItem Text="left" /> 

                <ej:CustomToolbarItem Text="center" /> 

                <ej:CustomToolbarItem Text="right" /> 

            </CustomToolbarItem> 

        </ToolbarSettings> 

        <Columns> 

…………………………… 

    </ej:Grid> 

 

 

    <script type="text/javascript"> 

        function onToolBarClick(sender) { 

            var gridObj = $("#<%= OrdersGrid.ClientID %>").data("ejGrid"); 

            var rowIndex = gridObj.model.selectedRowIndex; 

            var tr = gridObj.getRows()[rowIndex]; 

            if (sender.itemName == "left") 

                $(tr).find('td').css('cssText', 'text-align: left !important'); 

            else if (sender.itemName == "center") 

                $(tr).find('td').css('cssText', 'text-align: center !important'); 

            else 

                $(tr).find('td').css('cssText', 'text-align: right !important'); 

 

        } 

    </script> 

 

    <style type="text/css" class="cssStyles"> 

        .left { 

            background-image: url("../Content/left.png"); 

            background-size: 20px 20px; 

        } 

 

        .center { 

            background-image: url("../Content/center.png"); 

            background-size: 20px 20px; 

        } 

 

        .right { 

            background-image: url("../Content/right.png"); 

            background-size: 20px 20px; 

        } 

    </style> 

 

</asp:Content> 

 

 

Refer the below link for sample, 

 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionASPNETApplication3-939201573.zip  

 

Also refer the below link for help documentation and demo, 

 

https://help.syncfusion.com/aspnet/grid/toolbar#custom-toolbar-items  

 

https://help.syncfusion.com/api/js/ejgrid#events:toolbarclick  

 

https://asp.syncfusion.com/demos/web/grid/toolbartemplate.aspx  

 

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan.