Bind gridview using javascript? - c#

Here is my scenario, I have implemented a gridview, when the user press the add button on the page a new row is generated with empty input texts using javascript, after that the user fill the inputs and press the save button, thus all values is sent as an object to a webservice which handles the data insertion. after that i want to refresh the grid, bind (refresh) my gridview and since i am inserting the data from a html button there is no postback. I know that when you access the gridview from javascript it renders as an HTML table is there a way i can bind data to it, Is there any solution ?

this things depends on yous GridView structure, of course you can use HTML DOM model to modify it and insert new row at end of gridview. but there are lot of manual effort required to achieve this and more chances of bugs.
another approach could be use of UpdatePanel.
<ajax:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="GridView" Visible="false" runat="server" HeaderStyle-Width="200" HeaderStyle-BackColor="#2B6292" HeaderStyle-ForeColor="White"
AllowSorting="true" AllowPaging="true" Width="600" AutoGenerateColumns="False" OnRowCreated="GridView_OnRowCreated"
DataKeyNames="Id" onsorting="GridView_OnSort">
<Columns>
...
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<ajax:AsyncPostBackTrigger ControlID="CreateButton"/>
</Triggers>
</ajax:UpdatePanel>
please refer to http://blogs.microsoft.co.il/blogs/dorony/archive/2008/05/23/using-updatepanel-to-disable-gridview-view-state.aspx for more information.

Related

Cannot activate RowDataBound event for ASP.NET Gridview

I am working through an ASP.NET C# tutorial. I have a simple Gridview with the auto-created Edit & Delete Commandfields. So I've converted the Delete command field to a Templatefield and now I am trying to access the RowDataBound event of the Datagrid to add some code.
When I view the Gridview properties and click on the Events, I can see the RowDataBound event, but when I double-click on that event nothing happens. How do I create my event code? (in fact, I can't double-click on any of the events - they are all disabled).
Here is the top section of code for my gridview:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="colorID"
DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None" ShowFooter="True">
<AlternatingRowStyle BackColor="White" />
<Columns>
<%-- Edit Button --%>
<asp:CommandField ShowEditButton="True" />
<%-- Delete Button --%>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
CommandName="Delete" Text="Delete"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
Thanks for your help.
John
When I create a gridview, the turn-on of edits, deletes, and inserts as commandfields works fine. Also if I immediately convert the delete commandfield to a templatefield before I do anything else, then the RowDataBound event (and all of the other events) are active and I can build codebehind content.
So, for now, something in the tutorial I am using is changing the character of the gridview events. Mostly, I was trying to dialog "Are you sure you want to delete Item XYZ?" as a validating Eval of the row I am deleting. But for now, with too many other things to learn, I'll just live with the stock OnClientClick="return confirm('Are you sure?'); and move on to something else that's more important.

GridView and CheckBoxList with UpdatePanel in asp.net (C#)

I have an CheckBoxList within UpdatePanel which has onselectedindex change event on this event i have to update my gridview by fetching data from database. Event perform well but GridView not showing updated data may be because of GridView not in updatepanel.
Actually my problem is data not updated in gridview after firing onselectedindexchanged of Checkboxlist, and i cannot put gridview inside the updatepanel(its mandatory for me).
onselectedindexchanged event working fine i am already checked it out. So how can i update my gridview data.
Here is my code
<asp:UpdatePanel ID="MonthUpdatePanel" runat="server">
<ContentTemplate>
<asp:CheckBoxList ID="MonthCheckBoxList" runat="server" AutoPostBack="True"
onselectedindexchanged="MonthCheckBoxList_SelectedIndexChanged"
Width="195px" onclick="updateviewmore()" >
<asp:ListItem Value="1">1 Month</asp:ListItem>
<asp:ListItem Value="2">2 Month</asp:ListItem>
<asp:ListItem Value="6">6 Month</asp:ListItem>
<asp:ListItem Value="12">1 Year</asp:ListItem>
</asp:CheckBoxList>
</ContentTemplate>
</asp:UpdatePanel>
<div>
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" Width="100%"
GridLines="None" onrowdatabound="GridView2_RowDataBound"
ShowHeader="False">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<div class="pad5">
<asp:Label ID="BookImageName" Text='<% #"../BookImages/"+ Eval("BookImage") %>' CssClass="BookImage" runat="server" Height="180px" Width="135px" />
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
Unfortunately, you can't do that. Not if the GridView is outside the UpdatePanel. Your options are:
Remove the UpdatePanel and use full postbacks
Add a PostbackTrigger to the UpdatePanel and specify the CheckboxList as triger element...this is similar to the above...it'll always cause a full postback
Put the GridView inside the UpdatePanel and everything will be done in an async postback
Move the CheckboxList outside of the UpdatePanel, then put the GridView inside the UpdatePanel and add an AsyncPostbackTrigger for the CheckboxList so the UpdatePanel gets update asynchronously when and item is checked
The bottom line is, if you want to re-bind the GridView asynchronously then you'll have to move it inside the UpdatePanel or else you'll have to go with full postback approach
A Hardcore Solution
You can still do everything manually with the help of the jQuery plugin, a UserControl and an http handler that you could create to serve the necessary html. That is, intercept the html requests from client-side, make an async request to the handler passing some parameters so that the handler knows how to tell the UserControl how to bind the GridView...of course, the GridView will be inside a UserControl
The handler can write the output of a UserControl to the response using Execute method of the HttpServerUtility class instance which is available in the current HttpContext. For example...
public class YourHandler: IHttpHandler {
public void ProcessRequest(HttpContext ctx){
StringWriter writer = new StringWriter();
ctx.Server.Execute("~/UserControl.ascx", output, false);
ctx.Response.Write(writer);
}
}
This method effective works as if the UserControl was passing through all the ASP.NET pipeline cycles during a normal request and its context will be exactly the same context of the http handler...so, if you're using built-in asp.net membership features make sure to use a generic handler (.ashx) which plugs into the ASP.NET pipeline by itself with no further effort from your side

Sort datagrid in a jquery dialog without page refreshing and thus closing dialog

Hello smart people of Stack!
I have an issue with a dialog created with jquery UI that loads a datagrid. I want to be able to sort the datagrid, but when the column headers are clicked it refreshthe page and the dialog is gone.
I know how to prevent postbacks or do partial refreshes with UpdatePanels, but here the data grid is loaded like this:
<div id="dialog" hidden="true" title="Exceptions">
<asp:GridView runat="server" ID="ExceptionsTable" AutoGenerateColumns="True" AllowSorting="True" />
</div>
so I cant wrap the column head link to make it not refresh.
Can I solve this somehow?
I found my own answer to this, in hopes to help anyone else I'll post it here.
Wrapping the datadgrid in an update panel helped me!
<asp:UpdatePanel UpdateMode="Conditional" ChildrenAsTriggers="True" runat="server">
<ContentTemplate>
<asp:GridView runat="server" ID="ExceptionsTable" AutoGenerateColumns="True" AllowSorting="True" />
</ContentTemplate>
</asp:UpdatePanel>

Binding a Button to a GridView

This a pretty simple question, I'm just not sure how to do it exactly. I would like to bind a Button or perhaps ImageButton to a GridView in ASP.NET/C#. Currently, the GridView has two columns and is bound to a DataTable with two columns. I want to add a third column to the GridView, which will include the Button.
I know GridView has ButtonField, but I'm not too sure how to go about using it to do what I want. I want to dynamically generate these Buttons and add them to the GridView.
Here is how my GridView looks right now:
<asp:GridView
ID="GridView1"
Runat="server">
<Columns>
<asp:HyperLinkField
HeaderText="Display Name"
DataNavigateUrlFields="DISPNAME"
DataNavigateUrlFormatString="ViewItem.aspx"
DataTextField="DISPNAME">
<ItemStyle Width="70%" />
</asp:HyperLinkField>
<asp:BoundField
DataField="TypeDisp"
HeaderText="Type">
<ItemStyle Width="20%" />
</asp:BoundField>
</Columns>
</asp:GridView>
You can use a template field like the following,
<TemplateField>
<ItemTemplate>
<asp:ImageButton ImageUrl="image url" CommandName="SomeCommand" CommandArgument='<%# Eval("Id") %>'/>
</ItemTemplate>
</TemplateField>
Then you can handle the RowCommand event of the GridView and check the e.CommandName to see what command to be executed and you can get the e.CommandArgument as well which could be the row Id like I used in the code above.
If we are talking a button that's always present, you can use ButtonField, or even use a TemplateField and provide the template with the button, and bind the data to the button (sounds like you may want to bind data to the attributes of the button?)
If you are looking to dynamically generate buttons in the UI, tap into the RowCreated event and add the button the GridView. You'd have to do this on every page load; the GridView won't remember a button created programmatically.
HTH.

Retain form data while paging through a GridView - ASP.NET

I have a GridView control on my ASP.NET page that binds to result set when the user executes a search. I create an additional TemplateField column with a CheckBox control to allow the user to select a sub set of records from the result set. I have implemented paging in the GridView control and when the user checks the checkbox control and pages through the result set it does not retain any of the checked checkboxes.
<asp:GridView ID="MyGridView" runat="server" AllowPaging="true" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="MyCheckBox" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Whaat is the best way to retain the checked checkboxes while paging through the GridView?
You have to maintain the state yourself. This Thread shows how this can be done in VB. just use this VB to C# converter to get your desired code
you'll need to loop over the rows and save the checked state of the check boxes (along with a datakey) during the gridview paging event. Likewise you will need to read from your saved check state list to re-check the boxes during the gridview rowdatabound event.

Categories