Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
adam
236
Sample: Turn WebCombo into multiselect Checkbox Combo
posted

I had a need for a combobox that allowed multiselect and checkbox.  WebCombo was very close to what I needed, with some simple code i was able to achieve this functionality so i figured i would share with others who may be interested.

 

Steps:

Drop a webcombo on your form:

In page_load add the following code: ( I set properties in code for webcombo)

if (!IsPostBack)

{

//create datasource

DataTable tbl = new DataTable();

tbl.Columns.Add("Id", typeof(int));

tbl.Columns.Add("Checked", typeof(bool));

tbl.Columns.Add("Text");

for (int i = 0; i < 15; i++)

{

tbl.Rows.Add(new object[ { i, false, "Test " + i });

}

WebCombo1.DataTextField = "Text";WebCombo1.DataValueField = "Id";

WebCombo1.DataSource = tbl;

WebCombo1.DataBind();

//just some adjusting of the height

if (WebCombo1.Rows.Count > 5)

{

WebCombo1.DropDownLayout.DropdownHeight = Unit.Pixel(110);

}

//get a reference to the grid in the combo

UltraWebGrid grid = (UltraWebGrid)WebCombo1.Controls[0];if (grid != null)

{

//set some properties of the grid to act and look like a combo

grid.Columns.FromKey("Checked").AllowUpdate = AllowUpdate.Yes;

grid.DisplayLayout.ClientSideEvents.CellClickHandler = "GridCellClickHandler";

grid.DisplayLayout.ClientSideEvents.AfterCellUpdateHandler = "GridAfterCellUpdateHandler";

grid.Columns.FromKey("Checked").CellStyle.BorderWidth = Unit.Pixel(0);

grid.Columns.FromKey("Text").CellStyle.BorderWidth = Unit.Pixel(0);

grid.DisplayLayout.ActivationObject.BorderStyle = BorderStyle.None;

grid.Columns.FromKey("Checked").Width = Unit.Pixel(15);

grid.Columns.FromKey("Text").Width = Unit.Pixel(160);

grid.Columns.FromKey("Id").Hidden = true;

}

//set clientside events Combo box Properties for look

WebCombo1.ClientSideEvents.AfterCloseUp = "WebCombo1_AfterCloseUp";

WebCombo1.ClientSideEvents.BeforeCloseUp = "WebCombo1_BeforeCloseUp";

WebCombo1.ClientSideEvents.BeforeSelectChange = "WebCombo1_BeforeSelectChange";

WebCombo1.DropDownLayout.RowSelectors = RowSelectors.No;

WebCombo1.DropDownLayout.GridLines = UltraGridLines.None;

WebCombo1.DropDownLayout.ColHeadersVisible = ShowMarginInfo.No;

WebCombo1.DropDownLayout.DropdownWidth = Unit.Pixel(200);

WebCombo1.DropDownLayout.FrameStyle.BackColor = System.Drawing.Color.Transparent;

WebCombo1.Width = Unit.Pixel(200);

//if set to false then selected values won't show in combo until you click another spot on the form

WebCombo1.Editable = true;

}

 

Then add the following javascript section to handle clientside events:

var cancelClose=false;

function WebCombo1_BeforeSelectChange(webComboId){

//prevents closing of combo while selecting multiple items 

return true;

}

function WebCombo1_BeforeCloseUp(webComboId){

//Cancels premature closing.

if(cancelClose)

{

cancelClose=false; return true;

}

}

function WebCombo1_AfterCloseUp(webComboId){

//Loop through grid and find all rows that are checked and concatenate the text.

var combo=igcmbo_getComboById(webComboId);

var grid=combo.getGrid();

var rowCount=grid.Rows.length;

var displayText='';

for(i=0;i<rowCount;i++)

{

var row=grid.Rows.getRow(i);

var checked=row.getCell(1).getValue();

if(checked)

{

displayText+=row.getCell(2).getValue() + ',';

}

}

//display the text in the combo text box 

combo.setDisplayValue(displayText);

}

 

function GridCellClickHandler(gridName, cellId, button){

//Changes checkbox selection on any cell click in the row

var cell=igtbl_getCellById(cellId);var boolCell=cell.Row.getCell(1);

boolCell.setValue(!boolCell.getValue());

cancelClose=true;

}

function GridAfterCellUpdateHandler(gridName, cellId, button){

//Prevents dropdown from cloasing after clicking checkbox

cancelClose=true;

}

 

That should do it.

Some slight modifications will need to be made for you coumn names/numbers

To retrieve values on client, use a functioin such as:

function getSelectedValues(webComboId)

{

var combo=igcmbo_getComboById(webComboId);

var grid=combo.getGrid();

var rowCount=grid.Rows.length;

var displayText='';

var selectedValues=new Array();

var selectedText=new Array();

var aCnt=0;for(i=0;i<rowCount;i++)

{

var row=grid.Rows.getRow(i);

var checked=row.getCell(1).getValue();if(checked)

{

selectedValues[aCnt]=row.getCell(0).getValue();

selectedText[aCnt]=row.getCell(2).getValue();

aCnt++;

}

}

alert("Selected Values: " + selectedValues.toString());alert("Selected Text: " + selectedText.toString());

}

 

To get selected values on the server, the following would do it:

UltraWebGrid grid = (UltraWebGrid)WebCombo1.Controls[0];foreach (UltraGridRow row in grid.Rows)

{

bool isChecked = (bool)row.Cells.FromKey("Checked").Value;

//if checked then do stuff, i simply place items in a listboxif (isChecked)

{

//listbox is a ListBox server control 

listbox.Items.Add(row.Cells.FromKey("Id").Value + " - " + row.Cells.FromKey("Text").Value);

}

}

 

I also attached the project to this post.

 Here is what it looks like:

WebCombo Multi

 

MultiSelectWebCombo.zip