javascript - Checkbox Muliple select using shift key in gridview asp.net -
iam using vs 2010 c#.i want select muliple rows checked using shift key in grid view
i tried using java script not working
here grid
<asp:gridview id="gvdetails" runat="server" autogeneratecolumns="false" cssclass="normtxt" headerstyle-backcolor="#819ff7" showfooter="true" headerstyle-font-bold="true" emptydatatext="no records found" onrowcancelingedit="gvdetails_rowcancelingedit" onrowdeleting="gvdetails_rowdeleting" onrowediting="gvdetails_rowediting" onrowupdating="gvdetails_rowupdating" onrowcommand="gvdetails_rowcommand"> <rowstyle forecolor="#000066" bordercolor="#7ba1c3" /> <headerstyle backcolor="#7ba1c3" font-bold="false" forecolor="white" cssclass="lockheaddivdgrid" /> <columns> <asp:templatefield itemstyle-width="40px"> <headertemplate> <asp:checkbox id="chkall" runat="server" text="all" autopostback="true" oncheckedchanged="chkall_oncheckedchanged" /> </headertemplate> <itemtemplate> <asp:checkbox id="chkone" onclick='<%# string.format("javascript:selectcheckbox(this,{0});", container.dataitemindex) %>' runat="server" autopostback="true" oncheckedchanged="chkall_oncheckedchanged" /> </itemtemplate> </asp:templatefield> <asp:templatefield headertext="paragraphstyle" itemstyle-width="150" itemstyle-horizontalalign="left"> <itemtemplate> <asp:label id="lblparagraphstyle" runat="server" text='<%#eval("paragraphstyle") %>' /> <asp:textbox id="txtparagraphstyle" runat="server" text='<%# eval("paragraphstyle") %>' visible="false" cssclass="txt_1"></asp:textbox> <asp:autocompleteextender id="autocompleteextender1" runat="server" servicemethod="autocompleteajaxpararequest" servicepath="service1.asmx" minimumprefixlength="1" completioninterval="100" enablecaching="false" completionsetcount="10" targetcontrolid="txtparagraphstyle" firstrowselected="true" showonlycurrentwordincompletionlistitem="true"> </asp:autocompleteextender> </itemtemplate> </asp:templatefield> <asp:templatefield headertext="parent" itemstyle-width="150" itemstyle-horizontalalign="left"> <itemtemplate> <asp:label id="lblparent" runat="server" text='<%# eval("parent") %>'></asp:label> <asp:textbox id="txtparent" runat="server" text='<%#eval("parent") %>' visible="false" cssclass="txt_1" /> <asp:autocompleteextender id="autocompleteextender2" runat="server" servicemethod="autocompleteajaxparentrequest" servicepath="service1.asmx" minimumprefixlength="1" completioninterval="100" enablecaching="false" completionsetcount="10" targetcontrolid="txtparent" firstrowselected="true" showonlycurrentwordincompletionlistitem="true"> </asp:autocompleteextender> </itemtemplate> </asp:templatefield> <asp:templatefield headertext="fncriteria" itemstyle-width="150" itemstyle-horizontalalign="left"> <itemtemplate> <asp:label id="lblfncriteria" runat="server" text='<%# eval("fncriteria") %>'></asp:label> <asp:textbox id="txtfncriteria" runat="server" text='<%#eval("fncriteria") %>' visible="false" cssclass="txt_1" /> <asp:autocompleteextender id="autocompleteextender3" runat="server" servicemethod="autocompleteajaxfncriteriarequest" servicepath="service1.asmx" minimumprefixlength="1" completioninterval="100" enablecaching="false" completionsetcount="10" targetcontrolid="txtfncriteria" firstrowselected="true" showonlycurrentwordincompletionlistitem="true"> </asp:autocompleteextender> </itemtemplate> </asp:templatefield> <asp:templatefield headertext="fncase" itemstyle-width="10" itemstyle-horizontalalign="left"> <itemtemplate> <asp:label id="lblfncase" runat="server" width="50px" text='<%# eval("fncase") %>'></asp:label> <asp:textbox id="txtfncase" runat="server" text='<%#eval("fncase") %>' visible="false" cssclass="txt_1" /> <asp:autocompleteextender id="autocompleteextender4" runat="server" servicemethod="autocompleteajaxfncaserequest" servicepath="service1.asmx" minimumprefixlength="1" completioninterval="100" enablecaching="false" completionsetcount="10" targetcontrolid="txtfncase" firstrowselected="true" showonlycurrentwordincompletionlistitem="true"> </asp:autocompleteextender> </itemtemplate> </asp:templatefield> <asp:templatefield headertext="fnformat" itemstyle-width="150" itemstyle-horizontalalign="left"> <itemtemplate> <asp:label id="lblfnformat" runat="server" text='<%# eval("fnformat") %>'></asp:label> <asp:textbox id="txtfnformat" runat="server" text='<%#eval("fnformat") %>' visible="false" cssclass="txt_1" /> <asp:autocompleteextender id="autocompleteextender5" runat="server" servicemethod="autocompleteajaxfnformatrequest" servicepath="service1.asmx" minimumprefixlength="1" completioninterval="100" enablecaching="false" completionsetcount="10" targetcontrolid="txtfnformat" firstrowselected="true" showonlycurrentwordincompletionlistitem="true"> </asp:autocompleteextender> </itemtemplate> </asp:templatefield>
and javascript is
<script type="text/javascript"> var startingindex = 0, gridviewid = '<%= gvdetails.clientid %>'; function selectcheckbox(checkbox, selectedinded) { alert(gridviewid); if (event.shiftkey) { //shift end alert(""); if (startingindex < selectedinded) //forward $(':checkbox', '#' + gridviewid).slice(startingindex, selectedinded).prop("checked", true); else //backward $(':checkbox', '#' + gridviewid).slice(selectedinded, startingindex).prop("checked", true); } startingindex = selectedinded; } </script> suggest me solution . in advance
you can't access event object that. defined in scope of event handler, in case code within onclick attribute value. if want phone call function there, should pass event object argument.
and mixing client , server-side events not seem want, removed server event handler , set autopostback false.
your checkbox in markup code becomes:
<asp:checkbox id="chkone" onclick='<%# string.format("javascript:selectcheckbox(event,{0});", container.dataitemindex) %>' runat="server" autopostback="false" /> and script:
<script type="text/javascript"> var startingindex = 0, gridviewid = '<%= gvdetails.clientid %>'; function selectcheckbox(e, selectedindex) { if (e.shiftkey) { alert("shift pressed"); if (startingindex < selectedindex) { alert( $(':checkbox', '#' + gridviewid).length); $(':checkbox', '#' + gridviewid).slice(startingindex, selectedindex).prop("checked", true); } else $(':checkbox', '#' + gridviewid).slice(selectedindex, startingindex).prop("checked", true); } startingindex = selectedindex; } </script> this test working fine. used simple datasource, work other source well. give right direction.
webform1.aspx:
<%@ page language="c#" autoeventwireup="true" codebehind="webform1.aspx.cs" inherits="webapplication2.webform1" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> var startingindex = 0, gridviewid = '<%= gvdetails.clientid %>'; function selectcheckbox(e, selectedindex) { if (e.shiftkey) { alert("shift pressed"); if (startingindex < selectedindex) { alert($(':checkbox', '#' + gridviewid).length); $(':checkbox', '#' + gridviewid).slice(startingindex, selectedindex).prop("checked", true); } else $(':checkbox', '#' + gridviewid).slice(selectedindex, startingindex).prop("checked", true); } startingindex = selectedindex; } </script> </head> <body> <form id="form1" runat="server"> <asp:gridview id="gvdetails" runat="server" autogeneratecolumns="false"> <columns> <asp:templatefield itemstyle-width="40px"> <headertemplate> </headertemplate> <itemtemplate> <asp:checkbox id="chkone" onclick='<%# string.format("javascript:selectcheckbox(event,{0});", container.dataitemindex) %>' runat="server" autopostback="false" /> </itemtemplate> </asp:templatefield> </columns> </asp:gridview> </form> </body> </html> and webform1.aspx.cs:
using system; using system.collections.generic; using system.linq; using system.text; using system.web; using system.web.ui; using system.web.ui.webcontrols; namespace webapplication2 { public partial class webform1 : system.web.ui.page { protected void page_load(object sender, eventargs e) { gvdetails.datasource = new int[] { 0, 1, 2, 3, 4, 5, 6 }; gvdetails.databind(); } } } javascript asp.net gridview
No comments:
Post a Comment