How translate custom toolbar items

[Karol Wlodarek]

Hi,

how can i translate 'customToolbarItems' from grid panel and label 'items' from group panel

Below i attach print screen.

https://www.syncfusion.com/kb/2491/how-to-customize-toolbar-with-button-icon-and-link

[Karthick Kuppusamy]

Hi Karol, 

Thanks for Contacting Syncfusion Support. 

We have analyzed your requirement and we can translate the “GroupCaptionFormat” using the localization of the ejGrid. 

 

 

Please find the code example. 

 

<style type=""> 

     

    .detale:before {//custom toolbar icon text 

        content: "\e625"; 

    } 

</style> 

 

ej.Grid.Locale["de-DE"] = { 

            . 

            . 

           EditFormTitle: "Korrektur von", 

            GroupCaptionFormat: "{{:field}}: {{:key}} - {{:count}} {{if count == 1}}pozycja{{else}}przedmiotów{{/if}}",//Group CaptionFormat values 

            UnGroup: "Klicken Sie hier, um die Gruppierung aufheben" 

        }; 

 

         

        $(function () { 

            $("#Grid").ejGrid({ 

                // the datasource "window.gridData" is referred from jsondata.min.js 

                dataSource: window.gridData, 

                allowPaging: true, 

                pageSettings: { pageCount: 5 }, 

                allowGrouping: true, 

                groupSettings: { enableDropAreaAnimation: false }, 

                locale: "de-DE",//set the localization 

                toolbarClick: 'clicked', 

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 

                toolbarSettings: { 

                    showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete,         ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel], customToolbarItems: ["detale"]//custom icon value 

                }, 

                columns: [ 

                              { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 75 }, 

                              { field: "CustomerID", headerText: "Customer ID", width: 95 }, 

                              { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 95 }, 

                              { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, width: 75, format: "{0:C}" }, 

                              { field: "ShipCity", headerText: "Ship City", width: 80 } 

                ] 

            }); 

 

 

 

Please find the snapshot. 

 

 

 

 

 

Please find the online sample for your reference. 

http://jsplayground.syncfusion.com/qgl4cfge. 

Please find the help document. 

https://help.syncfusion.com/js/grid/globalizationandlocalization. 

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

If we misunderstood your requirement then could you please share more details about your requirement it would be helpful for us to find the solution at earliest. 

Regards, 

K.Karthick. 

[Karol Wlodarek]

Thank you for your answer, but it solve only 50% my problem. Translate to 'CustomToolbarItems' still didnt't works fine. 

As you can see in the example that was sent it works only for one language. I want to make my application was multilingual.

Regs,

Karol

[Karthick Kuppusamy]

Hi Karol, 

We have analyzed your requirement and  we have changed the customToolbar Items title based on culture by using  “actionbegin” event of the ejGrid. 

Please find the code example. 

<style type=""> 

        .detale:before, .details:before {//custom toolbar items 

            content: "\e625"; 

        } 

    </style> 

$("#Grid").ejGrid({ 

                // the datasource "window.gridData" is referred from jsondata.min.js 

                dataSource: window.gridData, 

                allowPaging: true, 

                pageSettings: { pageCount: 5 }, 

                allowGrouping: true, 

                groupSettings:{enableDropAreaAnimation: false}, 

                locale: $("#language").val(), 

                                                          actionBegin:function(args){ 

                                                          if(args.model.locale == "en-US") 

                                                         args.model.toolbarSettings.customToolbarItems = ["detale"]; 

                                                          if(args.model.locale == "de-DE") 

                                                         args.model.toolbarSettings.customToolbarItems = ["details"]; 

                                                          }, 

                                                          toolbarClick: 'clicked', 

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 

                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel],customToolbarItems: ["details"] 

      }, 

                                                          columns: [ 

                            . 

                            . 

                            . 

           });  

Please find the UG Link for your reference. 

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

Please find the JS playground sample for your reference. 

http://jsplayground.syncfusion.com/25j03pjg. 

Please let us know if you have concern. 

Regards, 

K.Karthick.