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.
Unfortunately, activation email could not send to your email. Please try again.

How translate custom toolbar items

Thread ID:

Created:

Updated:

Platform:

Replies:

125348 Aug 10,2016 05:42 AM Aug 12,2016 07:34 AM JavaScript 3
loading
Tags: ejGrid
Karol Wlodarek
Asked On August 10, 2016 05:42 AM

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 [Syncfusion]
Replied On August 11, 2016 06:46 AM

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. 


Karol Wlodarek
Replied On August 11, 2016 08:20 AM

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 [Syncfusion]
Replied On August 12, 2016 07:34 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;