focus a div on link button click - asp.net

In my page, I have a gridview with link buttons in a column.
By clicking the link button should show a div below the gridview.
I gave href in onClientClick event of the link button as follows.
function showDiv() {
location.href = '#div1';
}
When I click the link button the div is showing, but after the page load the page goes up.
aspx code
<asp:GridView ID="gridDate" runat="server" CssClass="gridview_Order"
HeaderStyle-BackColor="#09182F" HeaderStyle-ForeColor="#ffffff"
AutoGenerateColumns="false" Visible="False">
<Columns>
<asp:TemplateField ItemStyle-Width="20%" HeaderText="Sl No." ItemStyle-CssClass="paddng">
<ItemTemplate>
<%#Container.DataItemIndex+1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="25%" HeaderText="DATE" ItemStyle-CssClass="paddng">
<ItemTemplate>
<asp:LinkButton ID="lbtnDate" runat="server" CommandArgument='<%#Eval("tblName") %>' Text='<%# Eval("dtvar") %>' OnClientClick="showDiv()" OnCommand="lbtnDate_Click"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="25%" HeaderText="" ItemStyle-CssClass="paddng">
<ItemTemplate>
<asp:LinkButton ID="lbtnDownload" runat="server" Text="Download Excel" CommandArgument='<%# Eval("tblName") %>' OnCommand="lbtnDownload_Click"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br /><hr /><br />
<div id="div1">
<asp:GridView ID="gridOrderByUser" runat="server" CssClass="gridview"
HeaderStyle-BackColor="#09182F" HeaderStyle-ForeColor="#ffffff"
AutoGenerateColumns="false" Visible="False" >
<Columns>
<asp:TemplateField ItemStyle-Width="2%" HeaderText="Sl No.">
<ItemTemplate>
<asp:Label ID="lblSlNo1" runat="server" Text='<%#Container.DataItemIndex+1 %>' style="color:#000;"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="cod" HeaderText="CODE" InsertVisible="False" ReadOnly="True" SortExpression="cod" ItemStyle-Width="16%" />
<asp:TemplateField HeaderText="IMAGE" ItemStyle-Width="18%">
<ItemTemplate>
<asp:Image ID="img1" runat="server" Height="100px" Width="54px" ImageUrl='<%#"~/images/"+Eval("Image") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
So what should I do for staying the page in the div position.
Thanks

If you dont need the server side event of the link button you could do this:
OnClientClick="location.href = '#div1'; return false;"

Related

Gridview Not Triggering Events

I'm trying to use the events on my Gridview control. But its not firing the events when expected. i.e, for OnSelectedIndexChanged, when changing the selected cell/row nothing happens. I've tried with OnSelectedIndexChanged as well as OnRowUpdating. The breakpoint is never hit in gvQ15_RowUpdating. I've even tried using the OnTextChanged event for the child textboxes or the gridview and they are not firing.
Markup
<asp:GridView AutoPostBack="true" ID="gvQ15" runat="server" AllowPaging="false" AutoGenerateColumns="false" >
<Columns>
<asp:TemplateField HeaderText="Prescription Medication Name" ItemStyle-Width="25%">
<ItemTemplate>
<asp:TextBox ID="txtPrescriptionMedicationName" runat="server" Width="100%" OnTextChanged="txtPrescriptionMedicationName_TextChanged" BordewWidth="0" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Date Originally Prescribed" ItemStyle-Width="10%">
<ItemTemplate>
<asp:TextBox ID="txtDateOriginallyPrescribed" runat="server" Style="min-width: 110px; width: 100%;" BorderWidth="0" OnTextChanged="txtDateOriginallyPrescribed_TextChanged" />
<asp:MaskedEditExtender ID="meetxtDateOriginallyPrescribed" runat="server" MaskType="date" UserDateFormat="MonthDayYear" Mask="99/99/9999" TargetControlID="txtDateOriginallyPrescribed" ClearMaskOnLostFocus="true" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Frequency and Dosage" ItemStyle-Width="25%">
<ItemTemplate>
<asp:TextBox ID="txtFrequencyAndDosage" runat="server" Width="100%" BorderWidth="0" OnTextChanged="txtFrequencyAndDosage_TextChanged" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Condition" ItemStyle-Width="25%">
<ItemTemplate>
<asp:TextBox ID="txtCondition" runat="server" Width="100%" BorderWidth="0" OnTextChanged="txtCondition_TextChanged" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Onset Date" ItemStyle-Width="10%">
<ItemTemplate>
<asp:TextBox ID="txtConditionOnsetDate" runat="server" style="min-width:110px;width:100%" BorderWidth="0" OnTextChanged="txtConditionOnsetDate_TextChanged" />
<asp:MaskedEditExtender ID="meeConditionOnsetDate" runat="server" MaskType="date" UserDateFormat="MonthDayYear" Mask="99/99/9999" TargetControlID="txtConditionOnsetDate" ClearMaskOnLostFocus="true" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Code Behind
Protected Sub gvQ15_RowUpdating(sender As Object, e As GridViewUpdateEventArgs)
Session("Prescriptions") = gvQ15.DataSource
End Sub
Add the CausesValidation="False" attribute to your CommandField.
<asp:commandfield ShowEditButton="True" CausesValidation="False" HeaderText="Edit"/>
Or,
Add the EnableViewState="True" attribute to your GridView.
For TemplateField use this:
<asp:TemplateField HeaderText="Command">
<ItemTemplate>
<asp:Button CommandName="Edit" Text="Edit" ID="btnEdit" Runat="server"></asp:Button>
<asp:Button CommandName="Delete" Text="Delete" ID="btnDel" Runat="server"></asp:Button>
</ItemTemplate>
<EditItemTemplate>
<asp:Button CommandName="Update" Text="Update" ID="btnUpdate" Runat="server"></asp:Button>
<asp:Button CommandName="Cancel" Text="Delete" ID="btnCancel" Runat="server"></asp:Button>
</EditItemTemplate>
</asp:TemplateField>

Move the GridView Add button to right of delete button?

The attached screenshot shows two images.
Is it possible to make to Add button and delete button align side by side as depicted by the bottom image?
We are currently using GridView to create dynamic rows and it gets bit too long helped in part by the position of the Add button
<asp:gridview ID="grvCustomers" GridLines="None" runat="server" ShowFooter="true" AutoGenerateColumns="false" OnRowDeleting="grvCustomers_RowDeleting">
<Columns>
<asp:BoundField DataField="RowNumber" Visible="false" HeaderText="Row Number" />
<asp:TemplateField HeaderText="Customer Name">
<ItemTemplate>
<asp:TextBox ID="custname" runat="server" style="width:250px;" class="form-control"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Adress">
<ItemTemplate>
<asp:TextBox ID="custaddress" runat="server" style="width:250px;" class="form-control"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Amount">
<ItemTemplate>
<asp:TextBox ID="custamount" runat="server" style="width:250px;" class="form-control"></asp:TextBox>
</ItemTemplate>
<FooterStyle HorizontalAlign="Right" />
<FooterTemplate>
<asp:Button ID="ButtonAdd" runat="server" Text="Add More"
onclick="ButtonAdd_Click" />
</FooterTemplate>
</asp:TemplateField>
<asp:CommandField ShowDeleteButton="True" />
</Columns>
</asp:gridview>
I second what #ahwm said.
But also, if the goal is to add the record to the data source, couldn't you simply add the commandfield showinsertbutton="true".

asp:imagebutton hover effect css

I have the buttons below working so that the buttond do what they have to, but i would like to add a CSS so that they can hover is there any method of doing this.
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" DataKeyNames="pageID"
DataSourceID="SQLData" AutoGenerateColumns="False"
PageSize="1" Width="100%" Height="500px"
GridLines="None" ShowHeader="False" >
<Columns>
<asp:BoundField DataField="pageID" HeaderText="pageID" InsertVisible="False"
ReadOnly="True" SortExpression="pageID" ShowHeader="False" Visible="False" />
<asp:BoundField DataField="sectionID" HeaderText="sectionID"
SortExpression="sectionID" Visible="False" ShowHeader="False" />
<asp:BoundField DataField="pageNo" HeaderText="pageNo" SortExpression="pageNo"
Visible="False" ShowHeader="False" />
<asp:BoundField DataField="pageTitle" HeaderText="pageTitle"
SortExpression="pageTitle" Visible="False" ShowHeader="False" />
<asp:TemplateField HeaderText="pageContent" SortExpression="pageContent"
ShowHeader="False" ItemStyle-CssClass="pagecontent">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("pageContent") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblPageContent" runat="server" Text='<%# Bind("pageContent") %>' CssClass="pageContent"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerSettings Mode="NextPrevious"
NextPageImageUrl="~/images/navButtonNext.png" NextPageText="Next Page"
PreviousPageImageUrl="~/images/navButtonPrevious.png" PreviousPageText="Previous Page" LastPageImageUrl="images/navButtonNext.png" />
<PagerStyle CssClass="navPager" HorizontalAlign="Right" />
<PagerTemplate>
<asp:ImageButton ID="navBack" runat="server"
ImageUrl="~/images/navigation/grey_bttn_back.jpg" CssClass="sec" CommandName="Page" CommandArgument="Prev" ClientIDMode="Static" AlternateText="Back" ToolTip="Back" />
<asp:ImageButton ID="navHome" runat="server"
ImageUrl="~/images/navigation/grey_bttn_up.jpg" CommandName="gotoHome" ClientIDMode="Static" AlternateText="Home" ToolTip="Home" />
<asp:ImageButton ID="navFwd" runat="server"
ImageUrl="~/images/navigation/grey_bttn_fwd.jpg" CommandName="Page" CommandArgument="Next" ClientIDMode="Static" AlternateText="Fwd" ToolTip="Fwd" />
</PagerTemplate>
</asp:GridView>
You need JavaScript to do this. Bind your image buttons in mouse move event and add a class something like "hover" to the image button if mouse is hovered on it. Use your Css to style if the image button contains class.
<script type="text/javascript">
window.onload=function(){
document.getElementById("navBack").onmousemove=function(){
this.setAttribute('class', 'hover');
document.getElementById("navHome").className="";
document.getElementById("navFwd").className="";
}
document.getElementById("navHome").onmousemove=function(){
this.setAttribute('class', 'hover');
document.getElementById("navBack").className="";
document.getElementById("navFwd").className="";
}
document.getElementById("navFwd").onmousemove=function(){
this.setAttribute('class', 'hover');
document.getElementById("navHome").className="";
document.getElementById("navBack").className="";
}
}
</script>
Note: Don't forget to remove class name from image buttons if mouse is not hovered on them. Use css effects you want for the class "hover".

How to add footer to gridview

I have a grid with 3 columns - Edit, ID, Movie. I would like to add a footer with an Insert link button, 2 textboxes respectively, but unable to do so. Is it possible.
ASPX:
<asp:GridView ID="gridview1" runat="server" AutoGenerateColumns="False"
OnRowEditing="gridview1_RowEditing"
OnRowCancelingEdit="gridview1_RowCancelingEdit"
ShowFooter="true" >
<Columns>
<asp:CommandField ShowEditButton="true" ShowDeleteButton="true" />
<asp:BoundField DataField="id" HeaderText="ID" />
<asp:BoundField DataField="movie" HeaderText="MOVIE" />
</Columns>
</asp:GridView>
When I try the following, there is an error for commandfield which says, this element is not supported.
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CommandField ShowEditButton="true" ShowDeleteButton="true" />
</ItemTemplate>
<FooterTemplate>
<asp:LinkButton ID="lnkInsert" runat="server" Text="Insert"></asp:LinkButton>
</FooterTemplate>
</asp:TemplateField>
</columns>
The other way would be to use itemTemplate & EditTemplate for each column control. But I find this simple and would like to proceed this way. So Can I add a footer to this structure.
YES, It is possible. But this will require using the <FooterTemplate> inside <TemplateField>. Use TemplateFields for each of the columns and also set the FooterTemplate for each of the columns.
NOTE: The ID column seems here to be a Primary Key. So remove the <FooterTemplate> from the corresponding <TemplateField> defined for ID column, if ID is a Primary Key OR an autogenerated field in your database.
NOTE II: The <FooterTemplate> simply will contain a TextBox only.
<Columns>
<asp:TemplateField>
<EditItemTemplate>
<asp:LinkButton ID="lnkBtnUpdate" runat="server" CausesValidation="True"
CommandName="Update" Text="Update"></asp:LinkButton>
<asp:LinkButton ID="lnkBtnCancel" runat="server"
CausesValidation="False"
CommandName="Cancel" Text="Cancel">
</asp:LinkButton>
</EditItemTemplate>
<FooterTemplate>
<asp:LinkButton ID="lnkBtnInsert" runat="server"
CommandName="Insert">Insert</asp:LinkButton>
</FooterTemplate>
<ItemTemplate>
<asp:LinkButton ID="lnkBtnEdit" runat="server" CausesValidation="False"
CommandName="Edit" Text="Edit"></asp:LinkButton>
<asp:LinkButton ID="lnkBtnDelete" runat="server"
CausesValidation="False"
CommandName="Delete" Text="Delete">
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ID">
<EditItemTemplate>
<asp:TextBox ID="TextBoxID" runat="server" Text='<%# Bind("ID") %>'>
</asp:Label>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("ID") %>'>
</asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtID" runat="server"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="MOVIE">
<EditItemTemplate>
<asp:TextBox ID="TextBoxMovie" runat="server" Text='<%# Bind("Movie") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtMovie" runat="server"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("Movie")%>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
Now there are 2 ways to insert Data. Either you can use GridView OnRowCommand event or you can handle the OnClick event of your Insert button.
You can't place a commandfield inside TemplateField. But can do like this:
<asp:GridView ID="gridview1" runat="server" AutoGenerateColumns="False"
OnRowEditing="gridview1_RowEditing"
OnRowCancelingEdit="gridview1_RowCancelingEdit"
ShowFooter="true" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<!--To fire the OnRowEditing event.-->
<asp:LinkButton ID="lbEdit" runat="server" CommandName="Edit"
Text="Edit">
</asp:LinkButton>
<!--To fire the OnRowDeleting event.-->
<asp:LinkButton ID="lbDelete" runat="server" CommandName="Delete"
Text="Delete">
</asp:LinkButton>
</ItemTemplate>
<FooterTemplate>
<asp:LinkButton ID="lnkInsert" runat="server" Text="Insert"></asp:LinkButton>
</FooterTemplate>
</asp:TemplateField>
<asp:BoundField DataField="id" HeaderText="ID" />
<asp:BoundField DataField="movie" HeaderText="MOVIE" />
</Columns>
</asp:GridView>

ASPX GridView header name?

How do we access the header above the edit and delete buttons? I would like to put some text there instead of it being empty.
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:LinkButton ID="btnInsert" runat="server"
Text="Insert" CommandName="Insert" ForeColor="White" />
</HeaderTemplate>
</asp:TemplateField>
<asp:CommandField HeaderText="Edit" ShowEditButton="True" />
<asp:CommandField HeaderText="Delete" ShowDeleteButton="True" />
</Columns>
</asp:GridView>
you can add text to header column to gridview column of edit button.
<asp:GridView ID="grdviewlst" runat="server" >
<Columns>
<asp:TemplateField HeaderText="Actions">
<ItemTemplate>
<asp:Button ID="btnedit" CssClass="btnclassedit" runat="server" CommandName="EDIT"
Text="Edit" ToolTip="Edit" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

Resources