Our pure JavaScript Scheduler component


Post by hbrizard »

I use the feature plugin on a grid, it has a placeholder defaulted to "Search" would like to change this to something else.

Looking at the doc for this specific feature, and unlike most of the other features out there, I can't seem to find the way to access the search textfield in order to modify it's properties.

https://www.bryntum.com/docs/scheduler-pro/api/Grid/feature/Search

Would like to achieve something like this :

this.features.search.placeholder = i18next.t("Search");

or even better :

features : {
        search : {
              placeholder : i18next.t("Search")
        },
}

Thanks


Post by tasnim »

Please check this: https://www.bryntum.com/docs/scheduler-pro/api/Core/widget/TextField#snippet

Example code snippet:

let textField = new TextField({
  placeholder: 'Enter some text'
});

Post by hbrizard »

Thank you Tasnim but that does not answer my question above.

features.search is not referring to TEXTFIELD. I'm looking for a way to access grid.features.search.[...] to actually be able to modify the textfield behavior (placeholder, icon, etc..)


Post by alex.l »

Could you please show where do you see that placeholder? I am not sure I got your question.
In the feature docs you provided, we use a textfield above the grid, it's separated component, just a textfield that you can manage as you want independent of search feature. If you click on "Show code editor" button in title of "Live demo" panel, you will be able to see the source code.

All the best,
Alex


Post by hbrizard »

This is the search field, attached to a grid.

Screen Shot 2022-06-16 at 9.30.12 AM.png
Screen Shot 2022-06-16 at 9.30.12 AM.png (39.49 KiB) Viewed 370 times

This is the grid.features.search object after construction. By the way, if you see placeholder in there, it's because I forced a property on it, but it is NOT CONSIDERED.

Screen Shot 2022-06-16 at 9.42.21 AM.png
Screen Shot 2022-06-16 at 9.42.21 AM.png (112.31 KiB) Viewed 370 times

See that search.type is undefined and features.search is not a Textfield

Screen Shot 2022-06-16 at 9.42.50 AM.png
Screen Shot 2022-06-16 at 9.42.50 AM.png (7.38 KiB) Viewed 370 times

Therefore, I cannot modify the properties to it such as value, placeholder, etc...

Looking at the https://www.bryntum.com/docs/scheduler-pro/api/Grid/feature/Search, Search Feature inherits InstancePlugin and not TextField, and looking over the properties, I do not see any way to access to the textfield to modify it's placeholder string (in order to translate it in french).

Hope it helps to clarify.

Best,

Hugo


Post by hbrizard »

Also you can try yourself,

have a grid with

features : { search : true }

and then try to modify :

grid.features.search.value = "text"... It won't set the search field to "text"... it's like the properties of Search Textfield are unavailable.


Post by alex.l »

grid.features.search contains https://bryntum.com/docs/grid/api/Grid/feature/Search feature instance, not textfield.
The textfield you pointed on, has been added separately somewhere in your code.
https://bryntum.com/docs/grid/api/Grid/feature/Search itself doesn't provide any fields, it only enables search capabilities such as https://bryntum.com/docs/grid/api/Grid/feature/Search#function-search method.
How and where it will be invoked - it's not the job of the feature, but your custom UI.

To change a placeholder of a textfield, you need to use config we provided above.
Please review your code and find that field. You can define ref property for your field:
https://bryntum.com/docs/grid/api/Core/widget/Widget#config-ref

{
    type : 'textfield'
    text : 'Search',
    ref : 'searchField',
    //...
}

And after that get it by reference with widgetMap:
https://bryntum.com/docs/grid/api/Core/widget/Container#property-widgetMap

grid.widgetMap.searchField.value = "something new";

All the best,
Alex


Post by hbrizard »

Thank you Alex, I made a bad mistake / assumption and your help allowed me to figure it out. Two distinct classes, one with search : true and the other one containing the popup and the searchfield, basically the class I was in with the search : true was useless since I was using the tbar textfield in another class separated to the grid.

Best, and sorry about this, at least it got me to fix the issue.

Hugo


Post Reply