Iron Speed Designer generates Quick Selector pages for each tables linked to the application. If Add record pop-up pages are available, the Add buttons on the Quick Selector will link to these pages otherwise special “Please Configure” page will be linked. To regenerate a Quick Selector page, delete it from Application Explorer and then click “Rebuild All”.
Quick Selector page is .aspx page with its own master page. You should not change Quick Selector page type to ascx control which will break functionality and possibly cause run-time error.
Quick Selector button is a sub-control type of FieldFilter and FieldValue. On the Property Window for FieldFitler Quick Selector button, you can specify the Mode property to be “Single” or “Multiple”. This property is not available for FieldValue Quick Selector button.
In FieldValue mode, you are allowed to select only one item. An Add button is available for you to quickly add a new record instead of selecting an existing item.
In FieldFilter single selection mode, you are allowed to select only one item. Add button is not available.
In FieldFilter multi-selection mode, you are allowed to select multiple items before clicking the OK button to confirm your selections.
The Quick Selector button is a custom control that opens a specific page on iframe. The URL of the page is specified on the property window of the Quick Selector. When the Quick Selector is loading, a select distinct SQL statement will be executed to ensure the Quick Selector does not show duplicated items.
Quick Selector page is opened by iframe. According to the following article, recursive iframe opening the same URL is not supported: http://www.w3.org/TR/WD-frames-970331
As a result, let's say you have a Quick Selector page called Categories-QuickSelector.aspx. Within Categories-QuickSelector.aspx you have CategoryName Quick Selector filter and its Quick Selector path is Categories-QuickSelector.aspx. When you click this filter, runtime will have problems. To resolve this issue, you need to create another Categories-Selector page by duplicate Categories-QuickSelector.aspx and call it Categories-QuickSelector1.aspx. Then change the Quick-Selector path of CategoryName filter to link to Categories-QuickSelector1.aspx
We do not recommend using Infinite scroll pagination on Quick Selector or any other modal pop-up page.
Although Quick Selector table control looks similar to generic table controls, not all layout or code customizations for generic table controls are appropriate for Quick Selector table control. Quick Selector table controls executes query with SELECT DISTINCT clause to get a list of unique row items to display. By default these items will be assigned to the text property of the QuickSelectorItem using Formula SelectorTableControl.GetQuickSelectorDisplayText. Note, that if items to be selected are not primary keys of the table, no primary key will be included by default in the Quick Selector’s records. For example, if you have a list of Countries to select from, which is populated from the Customers table, no primary key will be included in the Quick Selector item. Such design ensures that you will get only unique countries in the list, while in the underlying table there might be thousands of records with the same country.
Although this design provides correct result set it has its limitations. Certain controls such as images, row edit, delete and show buttons, any controls with pop-up such as large text fields or child panels require Primary key to be functional. If you drop any of such controls into Quick Selector’s row and your Quick selector does not include Primary key by default you may also drag and drop Primary Key field from the toolbox. You may set visible property for this field to False on the Property Window to hide it, but Quick Selector’s results set will change to include every row of the underlying table.
It is possible to use Formula in the Quick Selector page in a similar way that it is used everywhere else with one important limitation: any database field included in the Formula should be included in the Quick Selector as well. So for example if QuickSelector has only EmployeeID in the query and you want a Formula to use First and Last names, you need to configure the data source.
Step 1: Select the Data Source tab
Step2: SelectorTableControlQuery
Step 3: Click the “Edit…” button
Step 4: Go to “Select” step
Step 5: Select Manually select fields
Step 6: Include EmployeeID, FirstName, and LastName
You can also populate Quick Selector pages using other database tables or views. For example, you have a Quick Selector button that shows rows from Products table. To make the Quick Selector shows rows form from Current Product List view, you need to do the following:
On the Quick Selector button, specify Pop-up file path to be “../Current-Product-List/ Current-Product-List-QuickSelector.aspx”
On the property window for the Quick Selector button, specify Index field be “Current Product List.ProductId”
On the formulas tab for the Quick Selector button, specify a Display text formula such as “=Current_Product_List.ProductName”. Display text formula sets the display text on each row on the Quick Selector page and the Quick Selector button text. You can right mouse-click on the formula textbox to get a list of available fields for the formula.
Once you make changes on a Quick Selector page, all Quick Selector buttons redirect to this Quick Selector page will show you the new effect. If you only want certain Quick Selector buttons to show the new effect, you can to duplicate the Quick Selector Page, make changes according to what you need on the new copy, and set the Pop-up path of the Quick Selector button to be the new path.
You can change any other control type to QuickSelector. Simply click on the Properties sheet on Control Type box and in the dialog select Quick Selector. Do not forget to also specify relative URL to quickSelector aspx file in Pop-up file path as it was mentioned above.
To resize all quick selectors globally in the application, you need to define the following CSS classes in Style.css which will override the classes in BaseStyles.css
|
CSS class name |
Description |
Default values |
Example of new values |
|
.QSSize |
Size of pop-up. |
height: 278px; |
height: 478px; |
|
.QSttc div |
Width of the quick selector cell content before truncation. |
width:290px; |
width:580px; |
|
.QSfooter |
Top position of the footer. The default is. |
top:240px; |
top:440px; |
|
.QSContainer .QSscrollRegion |
Height of the scroll region. |
height:200px; |
height:400px; |
Notices that when you write the CSS classes, make sure to include the other CSS attributes as well. For example, if BaseStyle.css contains the following attributes:
.QSContainer .QSscrollRegion
height: 200px;
left: 0px;
overflow: auto;
position: absolute;
top: 40px;
width: 100%;
z-index: 2;
}
To set the new width and height 400px, you need to write the following in Style.css:
.QSContainer .QSscrollRegion
height: 400px;
left: 0px;
overflow: auto;
position: absolute;
top: 40px;
width: 100%;
z-index: 2;
}
To resize individual quick selector page, you need to define the CSS classes in Style.css as above. However, instead of override the existing CSS classes in BaseStyle.css, you give the CSS classes new names such as .QSSize1, .QSttc1 div, .QSfooter1, .QSscrollRegion1. In addition, you need to modify the Quick Selector page to use the new classes.
You need to navigate to the page level layout and set Pop-up CSS classes to be the new class such as QSSize1:
Go inside SelectorTableControl, right click on cell with SelectorPaginationPanel and set the following cell attribute to be class=QSfooter1:
Now go inside SelectorPanel, inside SelectorFields, selct cell with QuickSelectorItem. Right click, select cell attribute and change QSttc to QSttc1:
Finally go to SelectorPanel page level and change class attribute to your new value QSScrollRegion1:
Note: When the text direction is set to Right-to-left and HTML Editor is used on a page, display position of the QuickSelector is not correct. In order to resolve this issue, please use different editor from the available options, such as CKEditor .