Multi-select ASP.NET DATAGRID

xiaoxiao2021-03-06  80

Download Source Files - 3.72 KB Download Demo Project - 8.83 KB Download Demo Project for vs.NET 2003 - 15.8 KB

Introduction

ASP.NET datagrid is a very powerful and flexible control, however some features like multi-select is not natively available. This article shows how easily this functionality can be achieved with a few simple tricks.

BACKGROUND

One of the projects I was working on had a User Inteface requirement for multi-selection of grid rows. User wanted Hotmail or Yahoo style multi-selection facility along with highlighting the selection (hard part).

USING THE CODE

After Testing and Applying Some JavaScript and Grid Related Coding Techinque, i Came Up with The Following Working Solution.

Add Template column for CHECKBOXES for selection (Hotmail / Yahoo style) Add client-side onclick () and javascript for checkboxes, to highlight and mark checked rows. Add server side CheckedChanged () event for preserving highlights. [Because everytime on postback datagrid resets Colors for the selection]

οnclick = "JavaScript: selectAllCheckboxes (this);" Runat = "Server"

AutoPostback = "false" tooltip = "select / deselect all" />

Runat = "server" oncheckedchanged = "grdemployees_checkedchanged"

AutoPostback = "false" />

SelectAllCheckBoxes ()

THIS Function Is Used to Have Hotmail Style Selection, IT Itere Through Every CHECK BOX on The Form and the Selects / Delects The Checkboxes.Highlightrow ()

. The only challenge left was to highlight and un-highlight the rows on selection and deselection For which, I used HighlightRow () function, please note one very important thing when using . Control It surrounds tags around Checkbox and the 'Spo Get The Children Of The tag.

/ / -------------------------------------------------------------------------------------------- -------------

// select all the checkboxes (Hotmail Style)

/ / -------------------------------------------------------------------------------------------- -------------

Function selectAllCheckBoxes (spanchk) {

// Added As Aspx Uses Span for Checkbox

Var OITEM = spanchk.children;

Var thebox = OITEM.Item (0)

XState = thebox.checked;

Elm = Thebox.form.Elements;

For (i = 0; I

IF (ELM [i] .Type == "Checkbox" && ELM [i] .id! = thebox.id)

{

// ELM [i] .click ();

IF (ELM [i] .checked! = xstate)

ELM [i] .click ();

//lm[i].checked=xstate;

}

}

/ / -------------------------------------------------------------------------------------------- -------------

// ---- SELECT Highlish Rows When The Checkboxes Are SELECTED

//

// Note: The Colors Are Hardcoded, However You Can Use

// RegisterClientScript Blocks Methods To Use Grid's

// ItemTemplates and SELECTTTEMPLATES Colors.

// for EX: GrDemPloyees.ItemStyle.backcolor OR OR

// GrDemPloyees.SelectedItemStyle.backcolor

/ / -------------------------------------------------------------------------------------------- -------------

Function highlightrow (chKB) {

Var OITEM = Chkb.children;

XState = OIITEM.Item.Item (0) .CHECKED;

IF (xState)

{chkb.parentelement.parentelement.style.backgroundcolor = 'lightcoral'; // grdemployees.selectedItemStyle.backcolor

Chkb.parentelement.parentelement.style.color = 'White';

// GrDemPloyees.selectedItemStyle.ForeColor

Else

{Chkb.parentelement.parentelement.style.backgroundcolor = 'White';

//grdemployees.ItemStyle.backcolor

Chkb.parentelement.parentelement.style.color = 'black';

//grdemployees.Itemstyle.Forecolor

}

}

// ->

This was the client side story. So far so good. One may argue why not use the plain simple HTML checkbox control? The answer is ASP.NET server control has a viewstate and therefore posting a page retains the rows selection.

Server Side

Now, On the server side we have to make sure the highlights are intact, because on every postback ASP.NET renders grid and loses the highlights. Following method is used for re-rendering the highlights.

Public Sub GrdemPloyees_Checkedchanged (Byval Sender As Object, _

ByVal e as system.eventargs)

DIM Chktemp as checkbox = ctype (sender, checkbox)

DIM DGI As DataGridItem

DGI = ctype (chktemp.parent.parent, DataGridItem)

IF (chktemp.checked) THEN

Dgi.backcolor = GrDemPloyees.SelectedItemStyle.backcolor

DGI.ForeColor = GrdemPloyees.SelectedItemStyle.ForeColor

Else

Dgi.backcolor = GrDemployees.ItemStyle.backcolor

DGI.ForeColor = GrdemPloyees.ItemStyle.ForeColor

END IF

End Sub

Getting your selection

Its easy! Iterate through the DataGridItems collection and grab the checkbox [for ex. DemoGridItem.Cells (0) .Controls (1)]. And verify its CHECKED property. Oh, also you can use DataKeyField of the dataset to grab specific datarows. Check out the attached code and you will love to find outhow easy it is to multi-select rows.conclusion

.

转载请注明原文地址:https://www.9cbs.com/read-122875.html

New Post(0)