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
Parents
  • 420
    posted

    Thanks for sharing!

  • 405
    posted in reply to Jarrod

    If only this have been posted earlier it would have saved me a lot of time :) I just posted about my own multiselect combo a while ago to help out on another post here in the forums only to find out about this post which came days earlier.

    Anyways, I'd still definitely get a lot from this.

    I seem to ran into an odd behavior though if clicking directly on the checkbox. For example, right after the page loads and I dropdown the combo and click on a checkbox, it seems to close up right away instead of the normal behavior of allowing another selection. And also, same but more pronounced issue when using firefox. Any chance you could look into it too.

    I used an unbound Checkbox column (instead of a boolean datacolumn) but firefox doesn't seem to persist when page is posted back to the server so had to use some work around so if you could look into the one above it would be great. As the stuff i coded to keep the dropdown from closing I would have to say could use some improvement.

Reply Children