View Details (all the Fields) when clicking on Select Button in Gridview

View Details (all the Fields) when clicking on Select Button in Gridview - javascript

How can I get a view of all the fields in a new asp page when clicking on the Button "Select" in Gridview in a webform asp page. I think I have to create a function which will be called on "OnClientClick". Here's my code. How could I perform this task? thank you very much in advance, best regards
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="ID" DataSourceID="ObjectDataSource1" AllowPaging="True"
AllowSorting="True">
<Columns>
<asp:TemplateField ShowHeader="False">
<EditItemTemplate>
<asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True"
CommandName="Update" Text="Update"></asp:LinkButton>
<asp:LinkButton ID="CancelButton" runat="server" CausesValidation="False"
CommandName="Cancel" Text="Cancel"></asp:LinkButton>
</EditItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="EditButton" runat="server" CausesValidation="False"
CommandName="Edit" Text="Edit"></asp:LinkButton>
<asp:LinkButton ID="SelectButton" runat="server" OnClientClick="" CausesValidation="False"
CommandName="Select" Text="Select"></asp:LinkButton>
<asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False"
CommandName="Delete" Text="Delete"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

For button click event try:
<asp:gridview id="NewGridView"
datasourceid="NewSqlDataSource"
autogeneratecolumns="false"
onrowcommand="NewGridView_RowCommand"
runat="server">
<columns>
<asp:buttonfield buttontype="Button"
commandname="Select"
headertext="Select People"
text="Select"/>
</columns>
</asp:gridview>
void NewGridView_RowCommand(Object sender, GridViewCommandEventArgs e)
{
if(e.CommandName=="Select")
{
int index = Convert.ToInt32(e.CommandArgument);
GridViewRow selectedRow = NewGridView.Rows[index];
}
}
Or check link,
https://msdn.microsoft.com/en-us/library/bb907626.aspx

Related

Unable to get property 'rows' of a gridview in an updatepanel in asp.net

I have an asp.net page with a gridview in an updatepanel:
<asp:UpdatePanel ID="upGrid" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="gvBatchGroups" />
</Triggers>
<ContentTemplate>
<asp:GridView ID="gvBatchGroups" runat="server" AutoGenerateColumns="False" DataKeyNames="GroupID" GridLines="Both"
BorderWidth="1px" CellPadding="2" ForeColor="Black" BorderStyle="Double" HorizontalAlign="Center"
HeaderStyle-HorizontalAlign="Center" AllowSorting="True" CssClass="gvformat" OnRowDataBound="gvBatchGroups_RowDataBound">
<AlternatingRowStyle BackColor="#95B9B9" />
<HeaderStyle BorderStyle="Double" BorderColor="Black"/>
<Columns>
<asp:BoundField DataField="GroupID" HeaderText="Group ID" ItemStyle-HorizontalAlign="Center"/>
<asp:BoundField DataField="GroupCode" HeaderText="Group Code" ItemStyle-HorizontalAlign="Center"/>
<asp:BoundField DataField="GroupName" HeaderText="Group Name" />
<asp:BoundField DataField="GroupType" HeaderText="Group Type" ItemStyle-HorizontalAlign="Center"/>
<asp:BoundField DataField="FinancialYear" HeaderText="Financial Year" ItemStyle-HorizontalAlign="Center"/>
<asp:BoundField DataField="IsBatchSelected" HeaderText="Batch Selected" ItemStyle-HorizontalAlign="Center"/>
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle">
<ItemTemplate>
<asp:Button ID="btnDetail" runat="server" Text="view" OnClick="btnDetails_Click" CausesValidation="false" Font-Names="Trebuchet MS" CssClass="btn btn-comment" ForeColor="White" Font-Bold="True" />
</ItemTemplate>
<HeaderTemplate>Properties</HeaderTemplate>
</asp:TemplateField>
<asp:templatefield ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>Select
<input id="cbHeaderSelect" type="checkbox" onclick="CheckAll(this)" runat="server" />
</HeaderTemplate>
<itemtemplate><asp:checkbox ID="cbSelect" runat="server"></asp:checkbox></itemtemplate>
</asp:templatefield>
</Columns>
</asp:GridView>
<asp:Button ID="bttnHidden" runat="Server" Style="display: none" />
<br />
</ContentTemplate>
</asp:UpdatePanel>
Column 8 has a checkbox that calls the following Javascript function to select all the checkboxes in the grid:
function CheckAll(oCheckbox) {
var Gridview = document.getElementById("<%=gvBatchGroups.ClientID%>");
for (i = 1; i < Gridview.rows.length; i++) {
Gridview.rows[i].cells[7].getElementsByTagName("INPUT")[0].checked =
oCheckbox.checked;
} }
However, when I click on the Column header, the Javascript function errors displaying the following:
Unable to get property 'rows' of undefined or null reference
This line appears under:
for (i = 1; i < Gridview.rows.length; i++)
Could the updatepanel be preventing the Javascript from "seeing" the gridview?
Any help would be most appreciated!

get client id of image control inside repeater inside gridview

How do I get client id of image control
<asp:GridView ID="gv" OnRowDataBound="GetItems" runat="server" BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4" Font-Names="tahoma" Font-Size="8pt" AutoGenerateColumns="False" Height="154px" Width="929px">
<Columns>
<asp:TemplateField HeaderText="pic">
<ItemTemplate>
<asp:Repeater ID="pictures" runat="server">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" height="120" width="90" ImageUrl='<%# Eval("ImageUrl") %>' onclick="DisplayNewImageInWidnow();" />
</ItemTemplate>
</asp:Repeater>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I use this code but it doesn't work
function DisplayNewImageInWidnow()
{
var img = document.getElementById('<%=gv.FindControl("pictures").FindControl("Image1").ClientID %>').src

OnClientClick="return DisplayNewImageInWidnow();"
or prevent server side from running
OnClientClick="DisplayNewImageInWidnow();return false;"
then
function DisplayNewImageInWidnow(obj)
{
var imgId = obj.id;
}

ASP SqlDataSource UPDATE - AJAX for partial page post back?

I am handling a div click event with jquery- on div click, call asp.net button by ID.
$('#myDiv').on('click', (function(clickEvent) {
document.getElementById("Button1").click();
}))
Here is the ASP button markup:
<asp:Button ID="Button1" runat="server" OnClick="my_ClickEvent" Text="Button" CssClass="hide" />
Here is the code behind:
protected void my_ClickEvent(object sender, EventArgs e)
{
SqlDataSource1.UpdateParameters["OwnerName"].DefaultValue = "Some Name";
SqlDataSource1.Update();
Response.Redirect(Request.Url.AbsoluteUri);
}
Here is the div markup:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
<asp:Timer ID="Timer1" runat="server" Interval="200000" OnTick="Timer1_Tick" Enabled="True" />
<div class="square" id="myDiv" runat="server">
<div class="content">
<div>
<p id="ImUnavailable">Unavailable for Dispatch</p>
<div class="table">
<div class="table-cell">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataSourceID="SqlDataSource1" CssClass="Grid" RowStyle-HorizontalAlign="Center" DataKeyNames="PhysicalAddress">
<Fields>
<asp:BoundField DataField="OwnerName" HeaderText="OwnerName" ShowHeader="False" SortExpression="OwnerName">
<ControlStyle BorderStyle="None" />
<ItemStyle BorderStyle="None" />
</asp:BoundField>
<asp:BoundField DataField="Building" HeaderText="Building" ShowHeader="False" SortExpression="Building" ItemStyle-CssClass="building">
<ControlStyle BorderStyle="None" />
<ItemStyle BorderStyle="None" />
</asp:BoundField>
<asp:BoundField DataField="TimeOn" HeaderText="TimeOn" ShowHeader="False" SortExpression="TimeOn">
<ControlStyle BorderStyle="None" />
<ItemStyle BorderStyle="None" />
</asp:BoundField>
<asp:BoundField DataField="IPAddress" HeaderText="IPAddress" ShowHeader="False" SortExpression="IPAddress" ItemStyle-CssClass="hide">
<ControlStyle BorderStyle="None" />
<ItemStyle BorderStyle="None" />
</asp:BoundField>
<asp:BoundField DataField="PhysicalAddress" HeaderText="PhysicalAddress" ShowHeader="False" ReadOnly="True" SortExpression="PhysicalAddress" ItemStyle-CssClass="hide">
<ItemStyle CssClass="hide" />
</asp:BoundField>
<asp:BoundField DataField="Available" HeaderText="Available" ShowHeader="False" SortExpression="Available" ItemStyle-CssClass="hide">
<ItemStyle CssClass="hide" />
</asp:BoundField>
</Fields>
<RowStyle HorizontalAlign="Center" />
</asp:DetailsView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
</div>
As you can see I have the DetailsView wrapped in an updatepanel, which updates on a Timer interval trigger. When the timer reaches it's interval, the updatepanelwill post back to the database and the DetailsView is kept up to date. This happens in the ajaxupdatepanel, so the page itself is not refreshed.
I am unsure how to achieve this with my div click. I am trying to click the div, call the ASP button, update the SqlDataSource, all without refreshing the entire page. The div click event works now, but it is not using ajax. I am becoming a bit confused when researching solutions for this like I am missing something simple.
Any advice appreciated. Thank you!
EDIT
So, I created a separate UpdatePanel and structured it like so... it still refreshes the whole page when I click Button1...
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
<asp:UpdatePanel ID="UpdatePanel7" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ...
</asp:SqlDataSource>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="my_Click" />
<asp:Button ID="Button2" runat="server" Text="Button" OnClick="you_Click" />
</ContentTemplate>
</asp:UpdatePanel>
All I am trying to do is update a column in a SQL table when I click Button1. It works, but refreshes the page.
Thanks again

I looked at my event output posted above and answered my own question.
I changed my code-behind to:
protected void my_Click(object sender, EventArgs e) {SqlDataSource1.UpdateParameters["OwnerName"].DefaultValue = "My Name";SqlDataSource1.Update();}
...and of course I am no longer called the Response.Redirect. It is working as expected now.
Thank you!

select all checkbox when header checkbox selected

I am trynig to select all checkbox when header checkbox is selected.
I write proper code for that but do'nt know why it's not working.
Can anyone check the issue.
My code--
<head runat="server">
<title></title>
<script type="text/javascript">
function SelectAllCheckboxes1(chk) {
$('#<%=GridView1.ClientID%>').find("input:checkbox").each(function () {
if (this != chk) { this.checked = chk.checked; }
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:gridview ID="GridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="SqlDataSource1">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="cbSelectAll" runat="server" onclick="javascript:SelectAllCheckboxes1(this);" AutoPostBack="true"/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chk" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
</Columns>
</asp:gridview>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:HRMSConnectionString %>"
SelectCommand="SELECT [Name] FROM [Languages]"></asp:SqlDataSource>
</div>
</form>
</body>

Try this code-
default.aspx.cs
protected void sellectAll(object sender, EventArgs e)
{
CheckBox ChkBoxHeader = (CheckBox)GridView1.HeaderRow.FindControl("chkb1");
foreach (GridViewRow row in GridView1.Rows)
{
CheckBox ChkBoxRows = (CheckBox)row.FindControl("chkb2");
if (ChkBoxHeader.Checked == true)
{
ChkBoxRows.Checked = true;
}
else
{
ChkBoxRows.Checked = false;
}
}
}
Change grid code-
<asp:gridview ID="GridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="SqlDataSource1">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkb1" runat="server" AutoPostBack="true" OnCheckedChanged="sellectAll"/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkb2" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
</Columns>
</asp:gridview>

Clear/Reset file upload control in grid view

I have multiple file upload control in asp.net grid view,i want to clear/reset file upload control when wrong file selection.
fileupload1 btnReset1
fileupload2 btnReset2
...
when i click btnReset2 then only clear value for fileupload2
How can i do this using java script.
Thank you all in advance
My code is as below.
JS Code:-
<script type="text/javascript">
function hi(ob) {
debugger;
var grid = document.getElementById("<%= GridView1.ClientID %>");
var inputs = grid.getElementsByTagName("input");
var fileUpload;
var strRowNo = ob.id.toString().split("_")[3];//get row number
alert(strRowNo);
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "file") {
fileUpload = inputs[i];
if (i == strRowNo) {
fileUpload.value = "";
}
}
}
}
</script>
//Aspx Code:-
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="A" HeaderText="A" />
<asp:BoundField DataField="B" HeaderText="B" />
<asp:BoundField DataField="C" HeaderText="C" />
<asp:TemplateField HeaderText="File">
<ItemTemplate>
<div id="fuDiv" runat="server">
<asp:FileUpload ID="fupFile" runat="server" />
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Reset">
<ItemTemplate>
<asp:Image ID="ibtnReset" runat="server" onClick="javascript:hi(this);" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="A" HeaderText="A" />
<asp:BoundField DataField="B" HeaderText="B" />
<asp:BoundField DataField="C" HeaderText="C" />
<asp:TemplateField HeaderText="File">
<ItemTemplate>
<div id="fuDiv" runat="server">
<asp:UpdatePanel ID="update_fupFile" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:FileUpload ID="fupFile" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ibtnReset" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Reset">
<ItemTemplate>
<asp:UpdatePanel ID="update_fupFile" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Image ID="ibtnReset" runat="server" onClick="javascript:hi(this);" />
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>

Develop Reference

JavaScript is the programming language of the Web.

View Details (all the Fields) when clicking on Select Button in Gridview - javascript

Related

Unable to get property 'rows' of a gridview in an updatepanel in asp.net

get client id of image control inside repeater inside gridview

ASP SqlDataSource UPDATE - AJAX for partial page post back?

select all checkbox when header checkbox selected

Clear/Reset file upload control in grid view

Categories

Resources