We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How translate custom toolbar items

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

3 Replies

KK Karthick Kuppusamy Syncfusion Team August 11, 2016 10:46 AM UTC

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. 



Please find the help document. 

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. 



KW Karol Wlodarek August 11, 2016 12:20 PM UTC

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


KK Karthick Kuppusamy Syncfusion Team August 12, 2016 11:34 AM UTC

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. 

Please find the JS playground sample for your reference. 

Please let us know if you have concern. 

Regards, 
K.Karthick. 


Loader.
Live Chat Icon For mobile
Up arrow icon