I'm trying to create multiple gridviews in which all would be loaded at pageload. I have 3 sets of data. When user clicks on a tab then it would show the corresponding gridview.
What is the best approach to this? I'm not good at JavaScript or JQuery.
One way I thought of is using a table and image buttons, where I would put gridview1.visible = false when gridview2 tab is clicked. Is this a good way to do it? or is there another intuitive way to do it?
"Easiest approach to use Ajax Tookit Tab Containers and Tab Panels, Put GridView in the content template of TabPanel.
<ajaxToolkit:TabContainer runat="server"
OnClientActiveTabChanged="ClientFunction"
Height="150px">
<ajaxToolkit:TabPanel runat="server"
HeaderText="Signature and Bio"
<ContentTemplate>
-- Grid View --
</ContentTemplate>
/>
</ajaxToolkit:TabContainer>
Refer :
http://www.asp.net/Ajax/Ajaxcontroltoolkit/samples/Tabs/Tabs.aspx
Related
I am creating a products page, where the user selects an option in a radiobuttonlist for example, and then a control with the various options of that product appears in a placeholder or in a div when on of the radiobuttons is selected.
At the moment this is the code:
aspx:
<form runat="server">
<asp:CheckBoxList ID="Lentes" runat="server" OnClick="EscolheLentes">
<asp:ListItem Value="LU">
Lentes Unifocais
</asp:ListItem>
<asp:ListItem Value="LP">
Lentes Progressivas
</asp:ListItem>
</asp:CheckBoxList>
<asp:PlaceHolder runat="server" ID="PHLentes"></asp:PlaceHolder>
</form>
aspx.vb:
Protected Sub EscolheLentes()
Dim ControlLente As Control
If (Me.Lentes.Items.FindByValue("LU").Selected) Then
ControlLente = LoadControl("LentesUnifocais.ascx")
ElseIf (Me.Lentes.Items.FindByValue("LP").Selected) Then
ControlLente = LoadControl("LentesProgressivas.ascx")
End If
Me.PHLentes.Controls.Add(ControlLente)
End Sub
Need to use some ajax to load the control right?
Am i going in the right direction?
Thanks.
There are several ways to achieve that:
True ASP.Net Web forms: Do postbacks with AutoPostback and play with the visibility of the other controls
Javascript: Load all the data possibly displayed with the page and handle the conditional display with javascript. This is only reasonable if the amount of data to display on one page is somewhat limited. You may want to look into JQuery or something similar if you go that way.
Ajax: load asynchronously only the bits you need. You may use the MSAjax framework, or Jquery (or similar) to do the client side code.
The first option is probably the fastest one to implement.
Have you tried adding AutoPostBack="true" and Visible="true" on your control?
When the selection of the radio buttons change I would like to show/hide the panel in the next table cell. I have it hiding and showing fine but each time it causes the page to refresh to the top. Is their a way to stop that refresh? I would like to hide and show the panel dynamically.
<table>
<tr>
<td>
<asp:RadioButtonList runat="server" ID="rblPlayerStatus" AutoPostBack="true" >
<asp:ListItem>Free Agent</asp:ListItem>
<asp:ListItem>I have teammate</asp:ListItem>
</asp:RadioButtonList>
</td>
<td>
<asp:Panel runat="server" ID="pnlTeamMate">
<asp:Label runat="server" ID="lblTeamMate" Text="Choose Teammate" />
</asp:Panel>
</td>
</tr>
</table>
Use the AJAX.ASP.Net library - then you add a ScriptManager item, and an UpdatePanel. Anything within the UpdatePanel will update through AJAX, not a full page refresh.
Do you have any server side logic based on which show and hide the panel. If yes then you could use update panel control. If it is just client side logic such as
If Free Agent is select show FreeAgent Panel else Team Panel
use javascript or rather jquery to achieve the same.
From your code, I can't see where you hide and show the panel. You could use an updatepanel, but that is best used when you need to retrieve more information from the server.
If you simply want to show and hide the panel, you can do it better with Javascript, by adding some code to the OnClick event to set the panel's visibility css attribute. There are a few tutorials on google about how to do this. Something like this should be sufficient to get you started.
Solution would be either using AJAX (UpdatePanel and ScriptManager) or removing
AutoPostback = true and using JavaScript to display/hide the panel
i have this template field inside a gridview.
<asp:TemplateField ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:ImageButton ID="ImageButton2" ImageUrl="~/images/DeleteRecord.gif" runat="server"
OnClientClick="return ConfirmacionBorrarClausula();" CommandName="BorrarClausula" CommandArgument='<%#Eval("ClausulaID")%>' OnCommand="gvClausulas_OnRowDeleting" CausesValidation="false"
</ItemTemplate>
</asp:TemplateField>
I have another one in the same page but in a different gridview, almost exactly like this one but the second one isn´t working.
So i have two gridviews each one with a template field like the one here, one onRowDeleting working perfectly, the other one not working at all, when i click it, it asks for confirmation (javascript function) but when i click ok to delete, the grid loses it data and the page fires all the validators.
Thank you for your time.
Make sure the control IDs are set right. And Ispostback the control level set to true. And also Try deleting the control and add it again some time that might help. Try add it from design view.
i manage to solve it, the problem was the second gridview was losing its data on the pageload, i managed that but only with the first gridview.
I have 3 different kinds of ajax popups that need to exist across my site. I was hoping that I could simply create a user control for each one and place the panel and modal popup extender inside each one but this doesn't seem to be working. Has anyone tried this before or do you have a recommendation as to how I can avoid duplicate code for each pop up on different pages? Thanks!
Ah I figured out my issue with the User Control I believe.
The ModalPopUpExtender requires the TargetID property to be set otherwise an error occurs. Since this is sitting in a UserControl I just created a dummy link button that doesn't do anything and I set the property visible to false.
<asp:LinkButton ID="lnkBlank" runat="server" Visible="false" />
<asp:Panel ID="plContainer" style="display: none;" runat="server">
Hello?
</asp:Panel>
<cc1:ModalPopupExtender ID="mpe" runat="server"
BehaviorID="test"
TargetControlID="lnkBlank"
PopupControlID="plContainer" />
Apparently it doesn't appreciate that and the moment I set the visible property to true it started working. Not sure what the reasoning is for a TargetID since, I would think, most pop ups could be called from multiple links about the page. Perhaps I'm still not entirely clear on how this control is supposed to be used.
One option would be to write the popups in a asp.net user control (a .ascx page) and include that on the pages you need the popups. Have a public method in the ascx page that will show the popup, and call it from the parent page when you need to. If you already have a script manager on the parent page, you can't have a second one in the ascx page, but other then that there shouldn't be anything that would stop this from working. Hope this helps!
edit: here's what my modal popup extender control looks like...
<cc1:ModalPopupExtender
ID="mpeClassroom"
BackgroundCssCLass="modalBackground"
runat="server"
CancelControlID="lbClose"
OnOkScript="onOk()"
TargetControlID="Button1"
PopupControlID="pnlClassroom">
</cc1:ModalPopupExtender>
in my code behind page, my method just calls mpeClassroom.Show();
The problem with hidden link as TrgetControlID is that; when u set its visibility as false, server doesn't render it as well. PopExtender then cannot find control on the page.
Instead of setting its visibility to false, try to apply a style with display:none. This should work !
I have a tabpanel with a calendar control on the 4th tab but when I select a date, the postback causes the tabpanel to return to the first tab instead of the 4th that it came from.
Is there a way to get it to return to the tab that the calendar control is on and not revert back to the first tab ?
I know setting autoPostback to true on the TabContainer will do this but that means it reloads on every tab change not just the one I want.
Any ideas ?
Wrapping the contents of the fourth tab in an UpdatePanel control should do the trick.
<ajaxToolkit:TabPanel runat="server" ID="tabCS" HeaderText="Country Settings">
<ContentTemplate>
<asp:UpdatePanel runat="server" ID="upCountry" UpdateMode="Conditional">
<ContentTemplate>
... content and calendar
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
Here is a best practice that I've found.
Unless other tabs in the tab panel need to be updated only put the contents of each panel in an update panel. If you need to update other panels you can call the method programmatically to update them.
There are two good reasons for this:
1.) By putting update panels in the tabs you will have fewer bits to get back from the server.
2.) Calling the update methods programmatically makes you more aware of what it is you are providing the end user and you won't forget to update the data.
Remember that if you use multiple panels to change the update mode from always to conditional so that only the relevant information is updated on the client.
Also if you want to put the entire tab panel control into the update panel you may need to add any formatting that is done to a CSS file since my experience is that it fails to retain the default formatting with it updates.
If you need more info or a code sample just message me.
Andrew