Problem Statement:
Whenever there is a huge data in Select2 input control, the dashboard/report freezes for sometime or takes time to respond back i.e., when clicked on Select2, it takes lots of time to open and display the dropdown values.
Solution:
In order to handle huge data in Select2 input control, which has Infinite scroll, we need to follow the below steps
- Make sure the efwd file has a query with id and text as columns as below
<DataMap id="2" connection="1" type="sql">
<Name>filter</Name>
<Query>
<![CDATA[SELECT "employee_details"."employee_id" as "id","employee_details"."employee_name" as "text" from "employee_details"
]]>
</Query>
</DataMap>
2. Create a Dashboard using Dashboard designer
3. Add a variable with name “SelectCompany” in Variables and click on Save

4. Create a Charts Dashboard Component from Objects

5. Provide the options as below in Charts – Select options (Choose the efwvf file along with the id)

6. In efwvf file, provide the following
Note: Use Chart id = 2 for Select2 component and provide the DataSource as Data Map Id from Step(1)
7. Right click on the Chart component -> Advance -> HTML and provide the below code
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.min.css" />
<div>
<input id="test" style="width:100px;" placeholder="type a number, scroll for more results" /></div>
8. Right click on the Chart component -> Advance -> CSS and provide the below code
.capitalize {
text-transform: capitalize;
}
.select2-container-multi .select2-choices .select2-search-choice {
padding: 5px 5px 5px 18px;
}
9. Right click on the Chart component -> Advance -> JS and provide the below code
var script = document.createElement("script");
script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js";
script.src = "https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js";
10. Create the Report input control in the Dashboard by clicking on it like below

11. Change the Type of input control to “Input” and provide as below

12. Refresh the Dashboard
13. Now you can see Select2 input control with infinite scroll
In case if you have any queries please get us at support@helicaltech.com
Thank You
Sai Kavya Sathineni
Helical IT Solutions Pvt Ltd