I want to edit and update gridview rows on mouse click event. If the user clicks on a row it should become editable and when he again clicks on the same row it should become uneditable and the changes should be saved.
my gridview looks like:-
<asp:GridView ID="grdexcelsheet" runat="server" AllowPaging="True"
AutoGenerateColumns="False" RowStyle-HorizontalAlign="Left" HorizontalAlign="Center"
onpageindexchanging="grdexcelsheet_PageIndexChanging"
Width = "100%" Height = "100%" Font-Size="Small">
<PagerSettings Position="Bottom" Mode="NextPreviousFirstLast" FirstPageText="First"
LastPageText="Last" NextPageText="Next" PreviousPageText="Prev" PageButtonCount="5" />
<Columns>
<asp:BoundField DataField="SrNo" HeaderText="SrNo" ReadOnly="true" />
<asp:TemplateField HeaderText="CustomerFieldName">
<ItemTemplate>
<asp:Label ID="Label4" Runat="server" Text='<%# Bind("CustomerFieldName") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("CustomerFieldName") %>'>
</asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="CompanyFieldName" HeaderText="CompanyFieldName" ReadOnly="true" />
<asp:BoundField DataField="Usage" HeaderText="Usage" ReadOnly="true" />
</Columns>
</asp:GridView>
There are many ways to do this. You can use AJAX Control Toolkit Modal Popup Extender for updating your grid. Also, you can make use Update Panel from the same toolkit.
If you are willing to use third party controls...please use this which will be very to use
http://obout.com/grid/grid_commands.aspx...
Related
I've got a gridview nested inside another gridview. What I need is that on the inner gridview get the DataKey from the outer gridview.
How can I pass it?
Thanks.
UPDATE
<asp:GridView ID="gvPeople" runat="server" AutoGenerateColumns="false" CssClass="Grid" DataKeyNames="person_id" OnRowDataBound="gvPeople_RowDataBound">
<Columns>
<asp:TemplateField HeaderStyle-Width="10px" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<img alt = "" style="cursor: pointer" src="images/glyphicons/png/glyphicons_236_zoom_in.png" />
<asp:Panel ID="pnlOrders" runat="server" Style="display: none">
<asp:GridView ID="gvDocuments" runat="server" AutoGenerateColumns="false" CssClass = "ChildGrid" DataKeyNames="document_id" ShowFooter="true"
OnRowCommand="gvDocuments_RowCommand" OnRowDataBound="gvDocuments_RowDataBound" OnRowDeleted="gvDocuments_RowDeleted" OnRowDeleting="gvDocuments_RowDeleting"
GridLines="Horizontal" >
<Columns>
<asp:BoundField ItemStyle-Width="150px" DataField="document_date" HeaderText="Document Date" />
<asp:BoundField ItemStyle-Width="100px" DataField="value" HeaderText="Value" DataFormatString="{0:#,##.00 €}" />
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:Button runat="server" ID="delbutton" CommandArgument='<%# Eval("document_id") %>' CommandName="Delete" Text="Delete" />
<asp:Button runat="server" ID="editbutton" CommandArgument='<%# Eval("document_id") %>' Text="Edit" UseSubmitBehavior="false" />
</ItemTemplate>
<FooterTemplate>
<asp:Button runat="server" ID="newdoc" CommandName="New" Text="New Document" UseSubmitBehavior="false" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="name" HeaderText="Name" />
<asp:BoundField ItemStyle-Width="150px" DataField="ndocs" HeaderText="Nº of Documents" />
<asp:BoundField ItemStyle-Width="150px" DataField="total_cost" HeaderText="Total Cost" DataFormatString="{0:#,#0.00 €}" />
</Columns>
</asp:GridView>
Here is my aspx code, which is all working, with the excpetion of the new document button, which runs a javascript button, as the edit button, but on this one I need to pass the person_id, from the row of the gvPeople, so when I create a new gvDocuments row, it will make it to that person id.
Thanks.
Just put it to work.
Add a hiddenfield before the child gridview with the value that I want.
On the RowDataBound of the child gridview, added this:
string str= ((HiddenField)e.Row.Parent.Parent.Parent.FindControl("hf")).Value.ToString();
And now use the str value for anything that I want.
You need to first access each of the parent gridview row then access the child gridview row then access the datakey.
Example:
foreach (GridViewRow rowPeople in gvPeople.Rows)
{
GridView gvDocuments = (GridView)rowPeople.FindControl("gvDocuments");
//this will get you the outer/parent gridview datakeys
gvDocuments.DataKeys[rowPeople.RowIndex].Values[0].ToString();
foreach (GridViewRow rowDocuments in gvDocuments.Rows)
{
//this will get you the inner/child gridview datakeys
gvDocuments.DataKeys[rowDocuments.RowIndex].Values[0].ToString();
}
}
Let me know if that works for you!
I have a gridview that has a textbox in one of cells in my aspx file.
After clicking the edit link in the row, I am able to get the control programatically in the rowdatabound event with this:
e.Row.FindControl("controlPlaceholder");
Using the edit index from the edit event works as well.
However, the control is only enabled on the first page of the gridview. On any other page, FindControl() returns null.
What could be the reason for this? Are there any potential solutions to this issue? I've looked for a solution but haven't had any luck with finding someone who has this particular problem.
Markup:
<asp:Panel ID="pnlAccountAssignment" runat="server" CssClass="clsDataPanel" meta:resourcekey="pnlAccountAssignmentResource1">
<asp:GridView ID="gvAccountAssignment" runat="server" AutoGenerateColumns="False"
AllowPaging="true" PageSize="25" OnRowDataBound="gvAccountAssignment_RowDataBound"
OnRowCancelingEdit="gvAccountAssignment_RowCancelingEdit" OnRowEditing="gvAccountAssignment_RowEditing"
OnRowUpdating="gvAccountAssignment_RowUpdating" OnPageIndexChanging="gvAccountAssignment_PageIndexChanging"
OnSorting="gvAccountAssignment_Sorting" AllowSorting="True" meta:resourcekey="gvAccountAssignmentResource1">
<RowStyle BackColor="White" ForeColor="Black" />
<HeaderStyle CssClass="clsGrayBkgCell" HorizontalAlign="Center" VerticalAlign="Bottom" />
<Columns>
...Other Columns...
<asp:TemplateField meta:resourcekey="TemplateFieldResource8">
<ItemStyle CssClass="clsNumber" HorizontalAlign="Left" VerticalAlign="Top" />
<EditItemTemplate>
<asp:TextBox ID="column13PlaceHolder" runat="server" CssClass="clsNormalLabel">
</asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblprevMonth" runat="server" CssClass="clsNormalLabel"></asp:Label>
</ItemTemplate>
<HeaderTemplate>
<asp:LinkButton runat="server" ID="hypSortGLBal" OnClick="hypSortGLBal_Click"></asp:LinkButton>
</HeaderTemplate>
</asp:TemplateField>
...Other Columns...
</Columns>
<PagerStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:GridView>
<asp:HiddenField ID="hdnPrepPopulated" runat="server" />
</asp:Panel>
I have this grid set up.... it all works totally fine... except one issue...
<asp:GridView runat="server"
ID="grdFacetsAssigned"
AllowPaging="false"
AllowSorting="True"
DataKeyNames="lngSystemFacet"
OnSelectedIndexChanging="grdFacetsAssigned_SelectedIndexChanging"
CssClass="table_scroll"
AutoGenerateColumns="False" GridLines="None"
ShowHeader="false" Width="500px"
OnSelectedIndexChanged="grdFacetsAssigned_SelectedIndexChanged"
ShowFooter="false" PagerSettings-Visible="false"
DataSourceID="SM_spStateUpdateReport_FacetAssignList"
OnRowCreated="grdFacetsAssigned_RowCreated">
<RowStyle CssClass="table_row" />
<Columns>
<asp:TemplateField Visible="false">
<ItemTemplate>
<asp:Label ID="lbllngSystemFacetID" runat="server"
Text='<%# Eval("lngSystemFacetID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="strSystemSystemFacet" SortExpression="strSystemSystemFacet"
ItemStyle-Width="50%" />
<asp:TemplateField ItemStyle-Width="30%" ItemStyle-HorizontalAlign="Center"
SortExpression="bolAssigned">
<ItemTemplate>
<asp:CheckBox ID="chkFacetAssigned" runat="server"
OnClientClick="alert(this.checked);"
OnCheckedChanged="chkFacetAssigned_CheckedChanged"
AutoPostBack="True" Checked='<%# Eval("bolAssigned") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField SortExpression="intOrder"
HeaderText="Display Order" ItemStyle-Width="20%">
<ItemTemplate>
<asp:Label ID="lblAssignedFacetOrder" runat="server"
Text='<%#DataBinder.Eval(Container.DataItem, "intOrder")%>'></asp:Label>
<asp:TextBox ID="txtAssignedFacetOrder" runat="server"
CssClass="gridview_input"
Text='<%#DataBinder.Eval(Container.DataItem, "intOrder")%>'
Visible="False"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<SelectedRowStyle CssClass="table_selected_row" />
<AlternatingRowStyle CssClass="table_alternating_row" />
<EmptyDataRowStyle CssClass="table_empty" />
<EmptyDataTemplate>
No Data
</EmptyDataTemplate>
</asp:GridView>
When you click the chkFacetAssigned checkbox the appropriate event fires. The code works well from there. What happens though is when the checkbox is checked... if the row is not selected there are two postbacks that happen. The first postback is from the grid and the second postback is from the checkbox. Both postbacks cause the chkFacetAssigned_CheckedChanged event to be called- resulting in code running twice that should only run once. I should note that if the row is already selected (the row the checkbox is on) you do not see this extra postback. Someone please help.
There are no other event handlers registered or anything like this.
First line of your code. Remove the following.
OnSelectedIndexChanging="grdFacetsAssigned_SelectedIndexChanging"
Second Line
OnSelectedIndexChanged="grdFacetsAssigned_SelectedIndexChanged"
What I did for this was a workaround in the checkbox event handler...
if (Page.Request.Params["__EVENTTARGET"].IndexOf("chkFacetAssigned") < 1)
{
return;
}
This ensures that the event is ignored unless it is responding to a postback that was initiated by the checkbox and not the grid.
I need to develop such a program in which the GridView's rows should be decided at run time.
i.e. I have a table in database called dealer capacity.
Dealer_ID Capacity
D0001 5
Now when the Dealer D00001 is selected from combo box the number of rows in grid view should be 5. I want to use the template field also.
My code for GridView is:
<asp:GridView ID="grdlicence" runat="server" DataKeyNames="Version_id" GridLines="None" BorderStyle="Solid" AutoGenerateColumns="false" AllowSorting="true"
CssClass="mGrid table"
PagerStyle-CssClass="pgr"
AlternatingRowStyle-CssClass="alt" >
<Columns>
<asp:BoundField DataField="Version_name" ItemStyle-CssClass="uppercase" ItemStyle-Width="150px" HeaderText="Version" HeaderStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="Version_id" Visible="false" HeaderText="Version" HeaderStyle-HorizontalAlign="Left" />
<asp:TemplateField HeaderText="Price">
<ItemTemplate>
<center><asp:TextBox ID="txtprice" CssClass="alignments TextStyle" MaxLength="5" runat="server" ></asp:TextBox></center>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Licence Id">
<ItemTemplate>
<center><asp:TextBox ID="txtlicenceid" CssClass="alignments uppercase" runat="server" ></asp:TextBox></center>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Purchase Date">
<ItemTemplate>
<center><asp:TextBox ID="txtpurchasedate" onfocus="showCalendarControl(this);" CssClass="alignments TextStyle" runat="server"></asp:TextBox></center>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Expiry Date">
<ItemTemplate>
<center><asp:TextBox ID="txtexpirydate" onfocus="showCalendarControl(this);" CssClass="alignments TextStyle" runat="server"></asp:TextBox></center>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Upload File">
<ItemTemplate>
<center><asp:FileUpload ID="fileUpload" runat="server" /></center>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
You need to define PageSize for your GridView and remember to set AllowPaging to true for the GridView
GridView.PageSize Property
Gets or sets the number of records to display on a page in a GridView
control.
The default is 10.
You may see this article: GridView Paging Sample in ASP.NET
You can use the linq Take() and pass the number as parameter.
Updated according to the comment, use following code.
grdlicence.DataSourse= ds.Take(5);
grdlicence.DataBind();
So i got this gridview on ASP.NET, it is about a gmail client, i made a template field with a check box that is for select several message at the same time, but first when you select a message i want to change the row background color, I already have my CSS but i dont know how to trigger the action or how to know what row was selected in the code. Here is the template of my grid:
<asp:GridView ID="inboxGrid" runat="server"
AutoGenerateColumns="false" CssClass="inbox" ShowHeader="false" BorderStyle="None" GridLines="None">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" />
</ItemTemplate>
<ItemStyle Width="24" CssClass="check"/>
</asp:TemplateField>
<asp:TemplateField>
<ItemStyle CssClass="from" />
<ItemTemplate>
<asp:Label ID="lblFrom" runat="server"
Text = '<%# Eval("From") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemStyle CssClass="subject" />
<ItemTemplate>
<asp:Label ID="lblSubject" runat="server" Text='<%# Eval("Subject") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemStyle CssClass="date" />
<ItemTemplate>
<asp:Label ID="lblFecha" runat="server" Text='<%# Eval("Fecha") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle CssClass="inbox"/>
</asp:GridView>
Here is a solution using JQuery
Provided you add a CssClass named chk to asp:checkbox
<asp:CheckBox ID="chkSelect" runat="server" CssClass="chk" />
Here is the script
$(document).ready(function () {
$(".chk :checkbox").live("click", function () {
$(this).closest("tr").css("background-color", this.checked ? "#0000FF" : "");
});
});
Try this:
<asp:CheckBox ID="chkSelect" runat="server" OnClick="changeCss(this.id);" />
You can use toggleClass('CssClassName') to toggle the class on checkbox clicks:
function changeCss(ctrlId){
$(ctrlId).parent().parent().toggleClass('check');
}
The hierarchy is tr > td > checkbox, we go reverse to change the css of tr/row.