33
Views
2
Comments
Solved
[OutSystems Data Grid Sample] Data Grid | Search Accelerator | Reactive
outsystems-data-grid-sample
Reactive icon
Forge asset by OutSystems
Application Type
Reactive

We have customized the Search Accelarator in Outsystems data grid reactive as below:For our one screen the Search widget is loading like below (which is mostly the case even if I try in my lpersonal environment):

Screen#1


But surprisingly it is loading like this in another screen: (there are no nested div's as shown in above screenshot, it's just a span with class "input-search" and an input of type "search" (if you see below screenshot).) 

Screen#2 

the weird thing is the Screen#2 where no nested div's are there, it has a behavior like whenever user search for something and on result set they go on 2nd page of grid pagination, now when they search of something else the page gets reset to 1st page of pagination automatically, which is not happening in Screen1. Now my client wants the same functionality as screen#2.


But we are not able to identify what is causing the screen#2 to reset to page 1 on each search and we have not written any code on Screen#2 to reset the pagination


2025-02-25 07-07-25
Yamini Pandya
Solution

Thanks @Sanjay Kushwah  for your response. But I found the reason for such behavior that is because whenever you put data grid inside an "If" element, and that If element uses a variable that gets dynamically change after page load eg:


So, here IsSystemsView gets updated to True based on some dropdown selection on UI. 

The Search Accelerator which gets created by wijimo library onload of the page. 

But in this case on page load, since the IF condition at load is false, in below javascript file the grid object will be undefined.

And because of this, some JavaScript is failing, will fails to create the Search accelerator with cross icon and thus behaving this way.

2023-12-16 19-57-03
Sanjay Kushwah

Hi @Yamini Pandya,

It seems your theme (clone of Outsystems datagrid module) CSS is overwriting on your second (Screen2) screen, that's why your Search input is not looking same as it Screen1.

You may miss any CSS on Screen2 if you add any on screen1 to customize the look of search field, if not, then you need to check using developer tool into browser console where? your CSS classes are overwriting. 


Kind regards,

Sanjay Kushwah

2025-02-25 07-07-25
Yamini Pandya
Solution

Thanks @Sanjay Kushwah  for your response. But I found the reason for such behavior that is because whenever you put data grid inside an "If" element, and that If element uses a variable that gets dynamically change after page load eg:


So, here IsSystemsView gets updated to True based on some dropdown selection on UI. 

The Search Accelerator which gets created by wijimo library onload of the page. 

But in this case on page load, since the IF condition at load is false, in below javascript file the grid object will be undefined.

And because of this, some JavaScript is failing, will fails to create the Search accelerator with cross icon and thus behaving this way.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.