How to call javascript function from clicking gridview header? - javascript

I have a gridview and I am trying to make it so whenever someone clicks on the header text it will call a javascript function.
Here is my gridview code
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" CssClass="Grid"
DataKeyNames="ID" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Button Text="X" runat="server" OnClick="deleteRow" CommandArgument='<%#Eval("ID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="ID" HeaderText="ID" />
<asp:BoundField ItemStyle-Width="150px" DataField="Site" HeaderText="Site" />
<asp:BoundField ItemStyle-Width="150px" DataField="Type" HeaderText="Type" />
<asp:BoundField ItemStyle-Width="150px" DataField="User" HeaderText="User" />
<asp:BoundField ItemStyle-Width="150px" DataField="Notes" HeaderText="Notes" />
</Columns>
<RowStyle />
<FooterStyle/>
<SelectedRowStyle />
<HeaderStyle />
</asp:GridView>
Can someone point me in the right direction?


Okay, If you want to bind a jquery or javascript event to your GridView Header, Simply add a class to your GridView HeaderStyles and bind it with a click event. Do as follows:
<HeaderStyle CssClass="GridViewHeaderRow" />
Then in your jquery or javascript, get the reference of this element using the class you added and bind a whatever event you want, See:
<script>
$(document).ready(function () {
$('.GridViewRow').on('click', function () {
alert('clicked');
// Do whatever you want to do.
});
});
</script>
A full example merged in your code would be like this:
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" CssClass="Grid" DataKeyNames="ID">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Button Text="X" runat="server" OnClick="deleteRow" CommandArgument='<%# Eval("ID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="ID" HeaderText="ID" />
<asp:BoundField ItemStyle-Width="150px" DataField="Site" HeaderText="Site" />
<asp:BoundField ItemStyle-Width="150px" DataField="Type" HeaderText="Type" />
<asp:BoundField ItemStyle-Width="150px" DataField="User" HeaderText="User" />
<asp:BoundField ItemStyle-Width="150px" DataField="Notes" HeaderText="Notes" />
</Columns>
<RowStyle />
<FooterStyle />
<SelectedRowStyle />
<!-- Add the class here in your HeaderStyles -->
<HeaderStyle CssClass="GridViewHeaderRow" />
</asp:GridView>
<script>
$(document).ready(function () {
$('.GridViewRow').on('click', function () {
alert('clicked');
// Do whatever you want to do.
});
});
</script>

Related

Automatically scroll detailsview alongside chosen gridview row

I have an ASP.NET gridview that has a couple of associated detailsviews and a secondary gridview. When a user clicks on a row in the gridview, the detailsviews pop up on the right side of the gridview. This is fine, but as the number of gridview rows has grown, the detailsviews get pushed lower and lower on the page making them difficult and frustrating for users to locate.
What I want to do is when the user selects a row they're interested in, align the top of the detailsview with the chosen row.
I've tried setting the CSS with:
[id$="ContentPlaceHolder1_dvProductionReport"],
[id$="ContentPlaceHolder1_dvOraclePartDetails"],
[id$="ContentPlaceHolder1_gvReceipts"]
{
position: fixed;
}
This didn't work. I've also tried to position it (in this example using only the first selector) with JavaScript using this example:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$().ready(function () {
//var $scrollingDiv = [id$ = "ContentPlaceHolder1_dvProductionReport"];
var elements = document.querySelector('[id$="ContentPlaceHolder1_dvProductionReport"]');
console.log(elements);
$(window).scroll(function () {
elements
.stop()
.animate({ "marginTop": ($(window).scrollTop() + 30) + "px" }, "slow");
});
});
</script>
But this didn't work in Chrome since apparently "animate" is a keyword in Chrome, but the example works in Firefox.
The Question:
How can I keep a detailsview in view while the user scrolls, or at least pop up the details view aligned with the row in the gridview they've chosen?
Edit:
In response to #rexroxm 's suggestion:
I've added:
<div style="position: absolute"><td>...</td></div> around the first detailsview. This has made no difference, so I've added this to the .CSS file:
[id$="ContentPlaceHolder1_dvProductionReport"],
[id$="ContentPlaceHolder1_dvOraclePartDetails"],
[id$="ContentPlaceHolder1_gvReceipts"]
{
position: absolute;
}
I can see that the CSS for position: absolute; is showing up on all three of the dependent detailsviews (2) and gridview (1). If I check the style in Chrome > Inspect > Developer tools, I see position: absolute; shows up for all three, in the first view, but it's lined through in the second view (not sure what these are called, but they show you the CSS styles for the element you've chosen). I've also tried using:
[id$="ContentPlaceHolder1_dvProductionReport"],
[id$="ContentPlaceHolder1_dvOraclePartDetails"],
[id$="ContentPlaceHolder1_gvReceipts"]
{
position: absolute !important;
}
Which also shows up as lined through.
Here is the entire <td>...</td>, sorry it's long, but it might be helpful:
<td>
<div style="position: absolute">
<asp:DetailsView ID="dvProductionReport" runat="server" Height="50px"
Width="125px"
EnableModelValidation="True" AutoGenerateRows="False"
DataKeyNames="PartNumber" Caption="Part Details" >
<AlternatingRowStyle BackColor="#66FF66" ForeColor="Black" />
<Fields>
<asp:BoundField DataField="PartNumber" HeaderText="Part Number:"
SortExpression="PartNumber" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle"
Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="AssemblyPartNumber"
HeaderText="Assembly Part Number:" SortExpression="AssemblyPartNumber" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle"
Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:TemplateField HeaderText="Line Down:" SortExpression="LineDown">
<EditItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Convert.ToBoolean(Eval("LineDown")) %>' />
</EditItemTemplate>
<InsertItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Convert.ToBoolean(Eval("LineDown")) %>' />
</InsertItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Convert.ToBoolean(Eval("LineDown")) %>'
Enabled="false" />
</ItemTemplate>
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:TemplateField>
<asp:BoundField DataField="Product" HeaderText="Product:"
SortExpression="Product" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="Assembly" HeaderText="Assembly:"
SortExpression="Assembly" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="OrderNumber" HeaderText="Order Number:"
SortExpression="OrderNumber" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="Department" HeaderText="Department:"
SortExpression="Department" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="DateAdded" HeaderText="Date Added:"
SortExpression="DateAdded" DataFormatString="{0:d}" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="DateRequired" HeaderText="Date Required:"
SortExpression="DateRequired" DataFormatString="{0:d}" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="QuantityRequired" HeaderText="Quantity Required:"
SortExpression="QuantityRequired" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:TemplateField HeaderText="Filled:" SortExpression="Filled">
<EditItemTemplate>
<asp:CheckBox ID="CheckBox2" runat="server" Checked='<%# Convert.ToBoolean(Eval("Filled")) %>' />
</EditItemTemplate>
<InsertItemTemplate>
<asp:CheckBox ID="CheckBox2" runat="server" Checked='<%# Convert.ToBoolean(Eval("Filled")) %>' />
</InsertItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox2" runat="server" Checked='<%# Convert.ToBoolean(Eval("Filled")) %>'
Enabled="false" />
</ItemTemplate>
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Closed:" SortExpression="Closed">
<EditItemTemplate>
<asp:CheckBox ID="CheckBox3" runat="server" Checked='<%# Convert.ToBoolean(Eval("Closed")) %>' />
</EditItemTemplate>
<InsertItemTemplate>
<asp:CheckBox ID="CheckBox3" runat="server" Checked='<%# Convert.ToBoolean(Eval("Closed")) %>' />
</InsertItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox3" runat="server" Checked='<%# Convert.ToBoolean(Eval("Closed")) %>'
Enabled="false" />
</ItemTemplate>
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:TemplateField>
<asp:BoundField DataField="ProductionCell" HeaderText="Production Cell:"
SortExpression="ProductionCell" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="ProductionReason" HeaderText="Production Reason:"
SortExpression="ProductionReason" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
</asp:BoundField>
<asp:BoundField DataField="ProductionComments"
HeaderText="Production Comments:" SortExpression="ProductionComments" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
</asp:BoundField>
<asp:BoundField DataField="ReportingAssociate"
HeaderText="Reporting Associate:" SortExpression="ReportingAssociate" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:HyperLinkField DataTextField="EmailAddress" HeaderText="Email Address:"
SortExpression="EmailAddress" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:HyperLinkField>
<asp:BoundField DataField="RootCause" HeaderText="Root Cause:"
SortExpression="RootCause" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="BuyerComments" HeaderText="Buyer Comments:"
SortExpression="BuyerComments" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
</asp:BoundField>
</Fields>
</asp:DetailsView>
</div>
</td>

You can keep detailsview's position:absolute that way it will stay on your page/view. When someone clicks on a user in primary gridview you probably bind it's data to the secondary gridview and then show it. Setting it position to absolute in style of the container div/table will keep it in the view. You may also put a cross button on the upper right side of the div containing the secondary Gridview which sets display:none with the event onclick.

How to open a pop dialog on click of hyperlink in a gridview (another popup)?

I have a hyper link which will open a grid view popup, which have name and other details, and the name is a hyperlink in it.When I click on that hyperlink i need to display the details of that user in another popup. How can i do it?
My Code:
<asp:GridView ID="grdNomiantionCountDetails" runat="server" AutoGenerateColumns="false"
PagerStyle-CssClass="dvPageNation1" PagerSettings-Position="Bottom" GridLines="None"
PagerStyle-HorizontalAlign="Left" Visible="true" Width="600px" HorizontalAlign="center">
<Columns>
<asp:TemplateField HeaderText="Nominated By" HeaderStyle-HorizontalAlign="Left">
<ItemStyle CssClass="bdrstyle" />
<ItemTemplate>
<br />
<asp:HyperLink Width="180px" CssClass="txtcolor" runat="server" ID="HyperLink1" Text='<%#Bind("NominatorName")%>' onclick='<%# String.Format("return viewDescription(""{0}"");",Eval("Description")) %>'></asp:HyperLink>
</ItemTemplate>
<HeaderStyle CssClass="hdrstyle" HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Institution" HeaderStyle-HorizontalAlign="Left" HeaderStyle-CssClass="hdrstyle">
<ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" Width="400px" CssClass="txtcolor bdrstyle " />
<ItemTemplate>
<br />
<asp:Label Width="180px" CssClass="txtcolor" runat="server" ID="lblInstitution" Text='<%#Bind("Institution")%>' />
<br />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerStyle CssClass="dvPageNation1" HorizontalAlign="Left" />
</asp:GridView>
</div>
And i need to open a dialog with the description, on click of the NominatorName hyperlink

Replace
<asp:HyperLink Width="180px" CssClass="txtcolor" runat="server" ID="HyperLink1" Text='<%#Bind("NominatorName")%>' onclick='<%# String.Format("return viewDescription(""{0}"");",Eval("Description")) %>'></asp:HyperLink>
with something like
<div onclick="openPopupDialog('<%# Eval("Description") %>')">ClickMe</div>

How to Stretch Gridview width inside a Div or a Panel in ASP.Net

Based on the image above. I have a gridview that I like to be stretched, fixed containing the whole div that it is paneled inside. The problem is when it automatically adjust based on the contents width.
The gridview is incorporated with javascript commands that make the header fixed. I can actually make the desired output by putting a width=100% property in the gridview. However since it has jquery command injectedl, when I include the width property it is resulting to this
here are the codes
<div class="GridviewPanelBody">
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Vertical" Font-Size="Smaller" EmptyDataText="No Records Found" ShowHeaderWhenEmpty="True" AutoGenerateColumns="false" >
<emptydatarowstyle backcolor="white" forecolor="black"/>
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField HeaderText="Location" DataField="locationd" />
<asp:BoundField HeaderText="Retail Partner" DataField="name" />
<asp:BoundField HeaderText="FL Area" DataField="sqm" />
<asp:BoundField HeaderText="Previous Month" DataField="PreviousMonth" DataFormatString="{0:#,##0.00;(#,##0.00);0}" />
<asp:BoundField HeaderText="Current Month" DataField="CurrentMonth" DataFormatString="{0:#,##0.00;(#,##0.00);0}" />
<asp:BoundField HeaderText="Last Year Month" DataField="LastYearMonth" DataFormatString="{0:#,##0.00;(#,##0.00);0}" />
<asp:BoundField HeaderText="Sales/SQM" DataField="SALES/SQM" DataFormatString="{0:#,##0.00;(#,##0.00);0}"/>
<asp:BoundField HeaderText="Inc/Dec%" DataField="INC/DEC%" DataFormatString="{0:#,##0.00;}" />
</Columns>
<FooterStyle BackColor="#CCCC99" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" Height="25px"/>
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FBFBF2" />
<SortedAscendingHeaderStyle BackColor="#848384" />
<SortedDescendingCellStyle BackColor="#EAEAD3" />
<SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>
</div>
part of the css
.GridviewPanelBody
{
background-color: #FaFaFa;
margin-left: auto;
margin-right: auto;
overflow: auto;
height: auto;
}

put width attribut for your gridview object:
<asp:GridView ID="gvPersons" runat="server" AutoGenerateColumns="False" Width="100px">
And, Set AutoSizeMode property of the column to AllCells.

Add item to DropDownList in EditItemTemplate of a Gridview

I am trying to find a way to add an item to a dropdownlist using codebehind or javascript.
the dropdownlist is located within a gridview in the edit item section
<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" AutoGenerateColumns="False" DataKeyNames="pallet" DataSourceID="RFS_TW" AllowPaging="True" Width="100%">
<AlternatingRowStyle BackColor="White"></AlternatingRowStyle>
<Columns>
<asp:CommandField ShowEditButton="True" />
<asp:BoundField DataField="pallet" HeaderText="Pallet" ReadOnly="True" SortExpression="pallet" ItemStyle-Width="10%" >
<ItemStyle Width="10%" />
</asp:BoundField>
<asp:BoundField DataField="date_added" HeaderText="Date" SortExpression="date_added" ReadOnly="True" ItemStyle-Width="10%">
<ItemStyle Width="10%" />
</asp:BoundField>
<asp:BoundField DataField="department" HeaderText="Department" SortExpression="department" ReadOnly="True" ItemStyle-Width="10%">
<ItemStyle Width="10%" />
</asp:BoundField>
<asp:TemplateField HeaderText="sold_by" SortExpression="sold_by">
<EditItemTemplate>
<asp:DropDownList ID="soldby_ddl" runat="server" >
<asp:ListItem>Please Select</asp:ListItem>
</asp:DropDownList>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("sold_by") %>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="10%" />
</asp:TemplateField>
</Columns>
</asp:GridView>

Try to use
function addValues() {
var listBox = document.getElementById("soldby_ddl");
var option = new Option("value", "value");
listBox.appendChild(option);
}
or
function addValues() {
var listBox = document.getElementById("soldby_ddl");
var option = new Option("value", "value");
listBox.options[i++] = option;
}

make (GridView with DropDownList using FilterExpression in SqlDataSource) work without reloading the page using JavaScript

How can i make this (Filter GridView with DropDownList using FilterExpression in SqlDataSource) work without reloading the page using JavaScript ?
<asp:DropDownList ID="ddlCountries" runat="server" AutoPostBack="True" DataSourceID="DropDownDataSource"
DataTextField="SC" DataValueField="SC" AppendDataBoundItems="True">
<asp:ListItem Text="All " Value="" />
</asp:DropDownList>
<asp:SqlDataSource ID="DropDownDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:CountConnectionString %>"
SelectCommand="SELECT [SC] FROM [CountTable]"></asp:SqlDataSource>
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="False" DataSourceID="GridDataSource"
DataKeyNames="ID">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" ItemStyle-Width="150"
InsertVisible="False" ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="SC" HeaderText="SC" ItemStyle-Width="150"
SortExpression="SC" />
<asp:BoundField DataField="Traffic" HeaderText="Traffic"
SortExpression="Traffic" />
</Columns>
<HeaderStyle BackColor="#3AC0F2" ForeColor="White"></HeaderStyle>
</asp:GridView>
<asp:SqlDataSource ID="GridDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:CountConnectionString %>"
SelectCommand="SELECT * FROM [CountTable]" FilterExpression="SC = '{0}'">
<FilterParameters>
<asp:ControlParameter Name="SC" ControlID="ddlCountries" PropertyName="SelectedValue" />
</FilterParameters>
</asp:SqlDataSource>

Categories