Hello @Ranjith Kumar Govindharaj 

Refer this link:

https://www.outsystems.com/forums/discussion/77316/outsystems-data-grid-how-to-set-max-limit-of-filter-value-in-datagrid/

I hope this helps

Thanks

@Ranjith Kumar Govindharaj 

As I know, Outsystems haven't supported this case,

we need to use JS to find the input element from DOM, and set it's maxlength:

1. let fi1 = document.querySelector('[wj-part="div-val1"] input');
2. if(fi1) fi1.setAttribute('maxlength',15);
3. let fi2 = document.querySelector('[wj-part="div-val2"] input');
4. if(fi2) fi2.setAttribute('maxlength',15);

But the filter form and the input widget is generated dynamically, so we need to check and set it intervally, so our js code will be like this. please put this js in the OnInitialize of the Grid.

1. setInterval(()=>{
2.         let fi1 = document.querySelector('[wj-part="div-val1"] input');
3.         if(fi1) fi1.setAttribute('maxlength',15);
4.         let fi2 = document.querySelector('[wj-part="div-val2"] input');
5.         if(fi2) fi2.setAttribute('maxlength',15);
6.     },500
7. );

Hi @Ranjith Kumar Govindharaj 

First of all, this is not an option provided out of the box by OutSystems Data Grid and not even from the underlying library Wijmo Flexgrid.

However, you can leverage Wijmo Flexgrid events to achieve this.

In the initialize event handler from the Grid block add the following JS node and you'll get that use case covered:

let myGrid = OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId);

// Function to set max length for the input filters
function setMaxLengthForInputs(editor) {
    var inputs = editor.hostElement.querySelectorAll('input[type="text"]');
    inputs.forEach(function(input) {
        input.maxLength = 5; 
    });
}

myGrid.features.filter._filter.filterChanging.addHandler(function (s, e) {  

    const filterEditor = s.activeEditor;
    const filterElems = s.activeEditor.hostElement.querySelectorAll('.wj-filtertype > a');

    if(filterEditor)
    {
        // Runs to apply when opening the filters popup
        setMaxLengthForInputs(filterEditor);

        //Iterate over the existenting tabs to add a click handler 
        filterElems.forEach(function(tab,index) {
            
            tab.addEventListener('click', function() {
                // Determine which tab is selected
                if (index === 0 || index === 1) {
                    setMaxLengthForInputs(filterEditor);
                } 
            });
        });
    }
});

Hope it helps!

Cheers,
GM