Premium support for our pure JavaScript UI components


Post by rahulranjan »

Hi
How can we achieve Localization in gantt integrated with angular application .

Post by sergey.maltsev »

Hi!

Currently we don't have out-of-the-box angular localization demo for Gantt.

But we have it for Scheduler. You can see how it works in Scheduler bundle.
This is online working example
https://www.bryntum.com/examples/scheduler/angular/localization/dist/localization/index.html

Also we have this Guide for localization
https://www.bryntum.com/docs/scheduler/#guides/customization/localization.md

Post by rahulranjan »

Hi
We have our own set of locale which we maintain in DB for different lang code.
1. I want to load the values from DB and translate it.
{
    "lang-code": "en-in",
    "success": true,
    "Columns": {
        "Name": "Имя"
    }
}
2. I want to change 1. all Labels based on code selection
2. Tool tips

Post by saki »

It should not be that difficult. First, you should prepare a javascript file on the server using the translations from your DB. The file will then be loaded in your application.

See please Gantt localization demo. The key here is custom-locale-de.js file that implements the German locale (Columns translations are toward the end of this file). Your implementation would have the same format as this file but translations will come from your DB.

Post by rahulranjan »

Hi Saki
For testing i have created a JS file.
How to import it in schedule.ts file. After loading all the data i want to translate it.
How to set it.
I AM WORKING in angular 7.
One work question can't i give different label key for example . column_label_name:"RaW" for column Name field name. (Something like this. )
Attachments
custom-locale.js
(1.3 KiB) Downloaded 175 times

Post by rahulranjan »

Hi
I am able to achieve this but i have one problem i have to define all the keys for each locale. If any locale key is missing it gives an error which should not happen. If any key is missing then it should not throw instead of that it should use the default value for missing keys. In attach one it will through error. But once you define all the keys it will run.
Steps
npm install
its is angular project.
Attachments
advanced.rar
(1.81 MiB) Downloaded 183 times

Post by rahulranjan »

I too want to change tooltip labels , view Present values ,and button tool tip.
I have few custom store values for drop down selection. That too needs to be changed

Post by saki »

I have prepared a workable version by modifying your code. Please take it up from there and continue to modify it to your needs.
Attachments
advanced-forum.zip
(1.85 MiB) Downloaded 140 times

Post by rahulranjan »

Hi
Thanks a lot
1.
ganttTimeRangeStore = [
        {
          name: projDataDateLabel,
          startDate: new Date(this.info["data"].da)
        }
      ];
how to change name label for this.
2. Tool tip in bottons
 {
            type: "button",
            color: "b-blue",
            ref: "settingsButton",
            icon: "b-fa b-fa-cogs",
            tipText: "Adjust settings",
            toggleable: true,
            onAction: "up.onSettingsClick"
          },

Changing of labels inside it.
3. Place Holder in Filter
4. Custom Task Tool Tip Label change
5. Store label
const presets = new Store({
      idField: "value",
      data: [
        { name: "Week / Day", preset: "weekAndDay" },
        { name: "Month / Week", preset: "weekAndMonth" },
        { name: "Year / Month", preset: "monthAndYear" },
        { name: "Year / Quarter", preset: "year" }
      ]
    });

Post by saki »

The code I'm attaching now demonstrates how to localize button texts and tooltips. I hope it will also clarify other questions, if not, keep asking please.

Note: Question 1 and 5 were not fully clear to me.
Attachments
advanced-forum.zip
(1.76 MiB) Downloaded 224 times

Post Reply