I follow this demo on how to create grid with my custom New Item control. I have quite easy question - where do I define New record button, just like this one in demo?
If the RadGrid's attribute AllowAutomaticInserts is set to True, and the grid is using a declarative data source, you'll get the default "Add New" button and behavior. This is what's happening in the demo you linked. You can control its appearance in several ways.
The "command items" (add, delete, edit, etc.) associated with the grid are controlled by the grid's CommandItemTemplate element. By default the look of this element will be based on the skin you have applied to the Telerik controls. It can also be controlled with various style elements.)
The CommandItemTemplate can be customized to show custom buttons, nonstandard text, and so forth. Here's an example from Telerik's documentation on it. Note that the CommandName attribute determines what function is performed by the button.
<CommandItemTemplate>
Custom command item template
<asp:LinkButton Style="vertical-align: bottom" ID="btnEditSelected" runat="server"
CommandName="EditSelected" Visible='<%# RadGrid1.EditIndexes.Count == 0 %>'><img style="border:0px" alt="" src="../../DataEditing/Img/Edit.gif" /> Edit Selected Customers</asp:LinkButton>
<asp:LinkButton ID="btnUpdateEdited" runat="server" CommandName="UpdateEdited" Visible='<%# RadGrid1.EditIndexes.Count > 0 %>'><img style="border:0px" alt="" src="../../DataEditing/Img/Update.gif" /> Update Customers</asp:LinkButton>
<asp:LinkButton ID="btnCancel" runat="server" CommandName="CancelAll" Visible='<%# RadGrid1.EditIndexes.Count > 0 || RadGrid1.MasterTableView.IsItemInserted %>'><img style="border:0px" alt="" src="../../DataEditing/Img/Cancel.gif" /> Cancel editing</asp:LinkButton>
<asp:LinkButton ID="LinkButton3" runat="server" CommandName="InitInsert" Visible='<%# !RadGrid1.MasterTableView.IsItemInserted %>'><img style="border:0px" alt="" src="../../DataEditing/Img/AddRecord.gif" /> Add new Customer</asp:LinkButton>
<asp:LinkButton ID="LinkButton4" runat="server" CommandName="PerformInsert" Visible='<%# RadGrid1.MasterTableView.IsItemInserted %>'><img style="border:0px" alt="" src="../../DataEditing/Img/Insert.gif" /> Add this Customer</asp:LinkButton>
<asp:LinkButton ID="LinkButton5" OnClientClick="javascript:return confirm('Delete all selected customers?')"
runat="server" CommandName="DeleteSelected"><img style="border:0px" alt="" src="../../DataEditing/Img/Delete.gif" /> Delete Selected Customers</asp:LinkButton>
<asp:LinkButton ID="LinkButton6" runat="server" CommandName="Re bindGrid"><img style="border:0px" alt="" src="../../DataEditing/Img/Refresh.gif" /> Refresh customer list</asp:LinkButton>
<br />
</CommandItemTemplate>
Also, the grid's MasterTableView contains an attribute, CommandItemDisplay, which can be used to control the button placement - values are None, Top, TopAndBottom, or Bottom:
<MasterTableView CommandItemDisplay="Top" ....>
Related
I had a nightmare getting this going.
Adding the ModalPopupExtender to a form is easy, you drop it on and tell it the two required controls parameters
PopupControlID="MyModalPanel"
TargetControlID="ButtonToLoadIt"
And it just works fine, but is triggered by a client side click of the Target Control.
If you want to do some server side code behind??? how to do it ?
The example code is shown below:
HTML CODE:
<!-- Hidden Field -->
<asp:HiddenField ID="hidForModel" runat="server" />
<asp:ModalPopupExtender
ID="WarningModal"
TargetControlID="hidForModel"
runat="server"
CancelControlID="btnWarning"
DropShadow="true"
PopupControlID="pnlIssues" >
</asp:ModalPopupExtender>
<!-- Panel -->
<asp:Panel ID="pnlIssues" runat="server"
BorderColor="Black" BorderStyle="Outset"
BorderWidth="2" BackColor="Wheat" Width="400px" Height="106px">
<center>
<h2 class="style2">
Information</h2>
<p>
<h3> <asp:Label ID="lblWarning"
runat="server"> </asp:Label></h3>
</p>
<!-- Label in the Panel to turn off the popup -->
<asp:ImageButton ID="btnWarning" runat="server"
ImageUrl="~/images/buttons/update.png" />
</center>
</asp:Panel>
C# Code
WarningModal.Show();
lblWarning.Text = "This is a popup warning";
for ref s
http://www.codeproject.com/Tips/215040/ModalPopupExtender-from-Server-Side-Code
<ajaxToolkit:Accordion ID="Accordion1" CssClass="accordion" SelectedIndex="0" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" AutoSize="None" RequireOpenedPane="false" ContentCssClass="accordionContent" runat="server">
<Panes>
<ajaxToolkit:AccordionPane ID="Pane1" runat="server">
<Header><b>Panel 1</b></Header>
<Content>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<br>
Age: <asp:textbox id="Age1" runat="server" Width="35" Font-Bold="True"/><br>
Attorney: <asp:CheckBox ID="Attorney" runat="server" /><br>
<asp:button ID="Button1" text="Submit" OnClick="Button1_Click"
runat="server"/><br>
<asp:label id="Message1" runat="server" ForeColor="White" Font-Size="Small" Font-Bold="True"/>
</ContentTemplate>
</asp:UpdatePanel>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="Pane2" runat="server">
<Header><b>Panel 2</b></Header>
<Content>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<br>
<asp:textbox id="Age2" runat="server" Width="35" Font-Bold="True"/><br>
<asp:button ID="Button2" text="Submit" onclick="Button2_Click"
runat="server"/><br><br>
<asp:label id="Message2" runat="server" ForeColor="White" Font-Size="Small" Font-Bold="True" />
</ContentTemplate>
</asp:UpdatePanel>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
protected void Button1_Click(object sender, EventArgs e) {
if (Attorney.Checked) {
Pane2.Visible = true;
} else {
Pane2.Visible = false;
}
//Message1.Text = Age1.Text;
}
I have five Accordion Panels. Last Panel should be displayed only if a checkbox is checked in the first panel. Inside each Accordion Panel I have a UpdatePanel and within that I have ContentTemplate with controls and submit button particular to that accordion panel. The reason I added UpdatePanel is so that when i update a particular panel it does not affect other accordion panels.
The problem is I need to toggle last accordion panel display depending upon if a checkbox is checked in the first Panel and submit button is clicked. In Code behind, in the btnSubmit1 event...I have code that says if checkbox is checked....Pane2.Visible = true else Pane2.Visible=false. For some reasons it still shows the LastPanel.
I am not sure where am I going wrong...please advise!
Thanks!
Jini
I fixed the problem by adding an outer update panel...and removed the updatepanel for Panel 2. Haven't tested it thoroughly but so far looks good.
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:UpdatePanel ID="OuterPanel" UpdateMode="Always" ChildrenAsTriggers="true" runat="server">
<ContentTemplate>
<ajaxToolkit:Accordion ID="Accordion1" CssClass="accordion" SelectedIndex="0" HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected" AutoSize="None" RequireOpenedPane="false" ContentCssClass="accordionContent" runat="server">
<Panes>
<ajaxToolkit:AccordionPane ID="Pane1" runat="server">
<Header><b>Panel 1</b></Header>
<Content>
<br>
Age: <asp:textbox id="Age1" runat="server" Width="35" Font-Bold="True" /><br />
Attorney: <asp:CheckBox ID="Attorney" runat="server" /><br>
<asp:button ID="Button1" text="Submit" OnClick="Button1_Click"
runat="server"/><br>
<asp:label id="Message1" runat="server" ForeColor="White" Font-Size="Small" Font-Bold="True"/>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="Pane2" runat="server">
<Header><b>Panel 2</b></Header>
<Content>
<br>
<asp:textbox id="Age2" runat="server" Width="35" Font-Bold="True"/>
<asp:button ID="Button2" text="Submit" onclick="Button2_Click"
runat="server"/><br><br>
<asp:label id="Message2" runat="server" ForeColor="White" Font-Size="Small" Font-Bold="True" />
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</ContentTemplate>
I'd like to see your code to be sure, but I'm expecting it's because you have an UpdatePanel in each of the AccordionPanels. Once an event happens in one UpdatePanel, ASP.NET will not run code handling that event that is attached to another UpdatePanel.
First, I'd take out all UpdatePanels to see if your code works as expected. Then, I'd add one UpdatePanel wrapped around the entire Accordion and see if your code still works.
If you really decided you need to have 5 UpdatePanels, look into the <Triggers> portion of the UpdatePanel. You'll be able to provide the CheckBox's ID to force the other associated UpdatePanel to PostBack.
I have a textbox which when a users fills in the box and hits return does an auto postback and the update panel is there to just refresh that part of the page where the textbox is located.
I have attached to that textbox a requiredfieldvalidator which needs to fire if the user does not complete the box when they to move off to the next step in the wizard control.
The problem is that the validator is not firing, and I cannot see why? Is this a bug in ASP or do I need to do something else to validate inside an Update Panel?
I had the same problem with a modal and a UpdatePanel, you have to add in the requirefilevalidator property as a ValidationGroup="groupvalidationX", the same for the Button:
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:RequiredFieldValidator runat="server" ID="rfvtxtClave" ForeColor="Red"
ControlToValidate="txtClaveDependencia" Display="Dynamic"
ErrorMessage="Rellena este campo" SetFocusOnError="true"
ValidationGroup="validacionesDependencia">
</asp:RequiredFieldValidator>
<asp:TextBox runat="server" ID="txtClaveDependencia" MaxLength="10"
autocomplete="off" placeholder="Clave de la dependencia"
Style="display: inline" CssClass="form-control tb8">
</asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnGuardarDependencia" />
</Triggers>
</asp:UpdatePanel>
<asp:Button runat="server" ID="btnGuardarDependencia"
CssClass="btn btn-block botonAfirmacion"
ValidationGroup="validacionesDependencia"
Text="Guardar dependencia" CausesValidation="true"
OnClick="btnGuardarDependencia_Click" />
Because AutoPostBack is set to true, I believe the client-side validation process isn't able to fire when it needs to.
Try adding CausesValidation="True" to the TextBox.
I am trying to find a way to bind a data table to a tab panel (within a tabcontainer and template) without doing it on page_init or page_load. OR Binding a data table to a gridview then binding that gridview to the tab panel. I know how to bind a data table to a gridview so that's the easy part. I have to be able to - on click of a button - add or create multiple tabs in that tab container.
I want the user to be able to click a button, run some queries and then make the tab container visible and bind the data from a data table to a panel at that time (then the panel to the tab container). Do this multiple times.
Can someone provide an example or explain how I can accomplsih this? Is Update Panel my answer and where can I find some good examples?
UPDATE
I found that it was very easy to bind data to a gridview within Ajax tabs. Of course you needed you script manager ajax reference declared in the asp page and web.config file. You also need to add the ajax css style to an existing style sheet. i tried using a seperate one and it didn't work.
ASP HTML
<AjaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0"
Visible="false" ScrollBars="Both"
CssClass="Tab2" Width="1326px" Height="464px" >
<AjaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="Empty" Enabled="true" ScrollBars="Both" CssClass="Tab2">
<ContentTemplate>
<div style="overflow:auto;width:1287px; height: 418px;">
<font color="white" size="1" face="Verdana">
<asp:GridView ID="SalesOrderView1" runat="server" BackColor="White" BorderColor="#DEDFDE"visible="False"BorderStyle="None" BorderWidth="1px"
CellPadding="4" ForeColor="Black"
GridLines="Vertical" HorizontalAlign="Center">
<AlternatingRowStyle BackColor="White" />
<FooterStyle BackColor="#CCCC99" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<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>
</font>
</ContentTemplate>
</AjaxToolkit:TabPanel>
<AjaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="Empty" ScrollBars="Both" CssClass="Tab2">
<ContentTemplate >
</AjaxToolkit:TabContainer>
C# Code to bind data to the gridview on click button event.
SalesOrderView1.Visible = true;
TabPanel1.Visible = true;
TabPanel1.HeaderText = Order_List[multi_order_count];
I'm using GridView and there is a dropdownlist in header cell for filtering.
<gm:GridView ID="routePlanGridView" runat="server" AutoGenerateColumns="False"
AllowPaging="true" PageSize="20" GridLines="Both" ShowFooter="true" CssClass="grid"
DataKeyNames="RoutePlanId" OnSorting="routePlanGridView_Sorting"
AllowSorting="true" OnPageIndexChanging="routePlanGridView_PageIndexChanging"
OnSelectedIndexChanging="routePlanGridView_SelectedIndexChanging"
OnRowDataBound="routePlanGridView_RowDataBound"
OnRowEditing="routePlanGridView_RowEditing"
OnRowUpdating="routePlanGridView_RowUpdating">
<HeaderStyle CssClass="gridHeaderFooter" />
<FooterStyle CssClass="gridHeaderFooter" />
<RowStyle CssClass="gridRow" />
<AlternatingRowStyle CssClass="gridRowAlternate" />
<Columns>
<asp:TemplateField SortExpression="SPName">
<HeaderTemplate>
SP Name<br />
<asp:DropDownList ID="spNameFilterDDL" runat="server" CssClass="gridControl" AutoPostBack="true" DataSourceID="SPNameSDS" DataTextField="SPName" OnDataBound="filterDDL_DataBound" OnSelectedIndexChanged="spNameFilterDDL_SelectedIndexChanged" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="spNameLabel" runat="server" Text='<%# Bind("SPName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<...15 more...>
</Columns>
</gm:GridView>
and there are relevant event handlers for sorting and paging.
Now the problem is if I put "SP Name" text in a link button, page crashes when link clicked, otherwise no link produced to sort.
If I remove Header Template fields (all of them) and put a text with HeaderText attribute of TemplateField it works as expected. Is there a way to put them together? I need that dropdown and also sorting.
Thanks.
sorry, forgot to insert the code correctly - here:
<asp:LinkButton runat="server" Text="SP Name" CommandName="Sort" CommandArgument="SPName" ></asp:LinkButton>
You need to use a link button for your header text. So in place of "SP Name", use . It should work if you are handling sorting.