Post
Ask Question

Developing a Multi-Select ASP.NET GridView using JQuery

Abstract

GridView is a very common control used in all .net Web Application. Also selecting a single row or multiple rows is a very common task in GridView operation. Most of the cases we do the Server Side Selection which is very pain-full. It's still more pain-full if we have a functionality for multi-select.

gridview.png

(Fig-1: Multi Select Gridview using Checkbox)

In some cases we add a Checkbox Control to get the selected rows at server side (see the above sample). But we always try for a Client Side row selection and Server Side row Manipulation.

Mult-Select using JQuery

Here, I used the power of JQuery Selector functionality to do the Client Side row Selection and a server side row Manipulation. Hope this will help you a lot in your GridView operation.

Step by step to implement Multiselect by using JQuery.

Step 1:

Download and add JQuery source file to your project. The download is available at http://jquery.com/

Add the JQuery reference to the Webpage.

<script src="jquery-1.4.3.js" type="text/javascript"></script>

Step 2:

Add an HiddenField to any of the TemplateField inside the GridView <Column> tag, which will store the selection mode (Here HiddenField will do the same operation like the CheckBox checked status).

Here I have added HiddenField along with the Id Column.

 <asp:TemplateField HeaderText="Id#" HeaderStyle-Width="50px">
    <ItemTemplate>
        <asp:Label ID="lblId" runat="server" Text='<%# Eval("Id") %>'></asp:Label>
        <asp:HiddenField ID="hdnIsItemSelected" runat="server" />
    </ItemTemplate>
</asp:TemplateField>

Step: 3

Within JavaScript block add the following code. This the main part where selection of the row is being handled.

<script type="text/javascript">
$(document).ready(function () {
$('input[id*=hdnIsItemSelected][value=true]')
             .parent().parent().addClass('RowHighlight');
});

$(function () {
$('#MultiSelectGrid tr').mouseover(function () {
$('#MultiSelectGrid tr').removeClass('RowHover');
$(this).addClass('RowHover');
});
});

$(function () {
$('#MultiSelectGrid tr td').click(function () {
if ($(this).parent()[0].className == 'RowHover') {
$(this).parent().addClass('RowHighlight');
$('input[id*=hdnIsItemSelected]')[$(this).parent()[0]
             .rowIndex - 1].value = 'true';
}
else {
$(this).parent().removeClass('RowHighlight');
$('input[id*=hdnIsItemSelected]')[$(this).parent()[0]
            .rowIndex - 1].value = 'false';
}
});
});
</script>

Step: 4

Add the following CSS to your StyleSheet or inside the <style></style> of <head> tag. These CSS classes will control the mouse hover and selection effect of the Gridview. 

 .RowHighlight
{
    color: #336699;
    cursor: pointer;
    background-image: url('images/selected_item_back.png');
    background-repeat: repeat-x;
}

.RowHover
{
    color: #336699;
    cursor: pointer;
    background-image: url('images/hover_item_back.png');
    background-repeat: repeat-x;
}

Step: 5

Now in the button click event or in the postback event, search each HiddenField status, if it's "true" it's selected else not selected.

foreach (GridViewRow row in MultiSelectGrid.Rows)

{
HiddenField selectionButton = (HiddenField)row.FindControl("hdnIsItemSelected");
if (selectionButton.Value == "true")
{

        // do your operation here...
      selectedName += (selectedName == "" ? "" : " / ") + ((Label)row.FindControl
      ("lblFirstName")).Text;

    }

}

Step: 6

Now run the application and see the impact of JQuery while selecting the row. In the given sample application I have added the DataSource for GridView in the Page_Load() Event.

Below two sample screens for Multi-Row Select and Single-Row Select of a Gridview.

Multi Select Gridview using JQuery

(Fig-2: Multi Select Gridview using JQuery)

Single row selection in Gridview using JQuery

(Fig-3: Single row selection in Gridview using JQuery)

Download the sample code and open it in VS-2010 and see how easy to understand the implementation.


Similar Articles