Monday, October 18, 2010

Select Multiple Checkbox with Shift key in Gridview by javascript

Hello Friends,
Recently i was just looking at my Gridview where i have a checkbox in each row.. now i need to select all Check box.. for that lots of material is available on net..
and all are enough so i am not going to deep in it
check out this… http://www.codeproject.com/KB/grid/GridCheckBox.aspx

but now my problem was that i wanted to select few rows but not all
let’s say in my gridview the number of records are around 100.. and i want to check the checkbox of first 35 records
in that case i had to click on checkbox of all 35 rows.
i thought, like all mail accounts like gmail, yahoo, live and in may more…
i should be able to select multiple records by shift key.
means select the first record and pressing shift key select the 35st record so all the records in between will be selected..
and for that i found lots of jquery or any other javascripts.
but here i have tried to make something my own and i am happy to make it..
First With Shift Secod with Shift Selected with shift
here is code

on Page

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
        <Columns>
            <asp:BoundField DataField="ID" HeaderText="Id" />
            <asp:BoundField DataField="Name" HeaderText="Name" />
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox1" 

onclick="CheckAllCheckbox(document.getElementById('ctl00_ContentPlaceHolder1_GridView1'),this,event);"
                        runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>







on code Behind


protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           DataTable dt = new DataTable();
           dt.Columns.Add("ID");
           dt.Columns.Add("Name");
           DataRow dr;
           for (int i = 1; i < 130; i++)
           {
               dr = dt.NewRow();
               dr["ID"] = i;
               dr["Name"] = "Record No" + i.ToString();
               dt.Rows.Add(dr);
           }
           GridView1.DataSource = dt;
           GridView1.DataBind();
       }
   }
Javascript
var lst = null;
        function CheckAllCheckbox(ctrl, sValue, e) {
            var chkName = sValue.id;
            var arlstr = sValue.id.split(ctrl.id);
            var id = arlstr[1].split('_')[1].substring(3);

            var ee = (window.event) ? event : e;
            if (ee.shiftKey) {
                if (lst != null) {
                    var First = 0, last = 0;
                    if (parseInt(lst) > parseInt(id)) {
                        First = parseInt(id);
                        last = parseInt(lst);
                    }
                    else {
                        First = parseInt(lst);
                        last = parseInt(id);
                    }

                    for (i = First; i < last; i++) {                        
                        var p = (i <= 9 ? '0' + i : i);
                        var ctrlnew = chkName.replace('ctl' + id, 'ctl' + p);                        
                        document.getElementById(ctrlnew).checked = sValue.checked;
                    }                    
                }
            }
            lst = id;
        }
Here is the Source to Download http://cid-552998535cb9985d.office.live.com/self.aspx/.Public/SelectWithShift.rar Thanks