I am using Telerik RadTab controls. I have taken three tabs.
In my application in RadioButtonList I have three radio buttons, if I click the REPLACEMENt radio button it will show next tab ADTAF
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Inox" MultiPageID="RadMultiPage1"
SelectedIndex="0" Height="16px" Width="710px">
<Tabs>
<telerik:RadTab Text="Purchase Details" Selected="True">
</telerik:RadTab>
<telerik:RadTab Text="CERF">
</telerik:RadTab>
<telerik:RadTab Text="ADTAF">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<asp:RadioButtonList ID="radiobtnlistcerf" runat="server" Width="300px"
Height="40px" onselectedindexchanged="radiobtnlistcerf_SelectedIndexChanged">
<asp:ListItem>New addition</asp:ListItem>
<asp:ListItem>Replacement</asp:ListItem>
<asp:ListItem>Addition to main asset</asp:ListItem>
</asp:RadioButtonList>
How to show next tab if I click on Replacement radio button?
Your question isn't exactly clear, but I think you mean that you want it to show 'CERF' next instead of 'ADTAF', in which case you would need to increment the selected tab index. If you wanted it to go through the tabs in order you could do something like:
RadTabStrip1.SelectedIndex = (RadTabStrip1.SelectedIndex + 1)%(RadTabStrip1.Tabs.Count)
Maybe if you showed the code for radiobtnlistcerf_SelectedIndexChanged it would be clearer why its not working
Related
I'm using Telerik (for ASP.NET AJAX) RadMultiPage controls to produce nested tabs and I would like to link to a specific tab from another page. But I couldn't find a proper way.
Here is my code
<telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1" SelectedIndex="0">
<Tabs>
<telerik:RadTab Text="ParentTab1"></telerik:RadTab>
<telerik:RadTab Text="ParentTab2"></telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0">
<telerik:RadPageView ID="ParentTab1" runat="server" >
<telerik:RadTabStrip runat="server" ID="RadTabStrip2" MultiPageID="RadMultiPage2" SelectedIndex="0">
<Tabs>
<telerik:RadTab Text="ChildTab1"></telerik:RadTab>
<telerik:RadTab Text="ChildTab2"></telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage2" SelectedIndex="0" runat=server>
<telerik:RadPageView ID="ChildTab1" runat="server">
<%--ChildTab1 Content--%>
</telerik:RadPageView>
<telerik:RadPageView ID="ChildTab2" runat="server" >
<%--ChildTab2 Content--%>
</telerik:RadPageView>
</telerik:RadMultiPage>
</telerik:RadPageView>
</telerik:RadMultiPage>
And it looks like:
The question is how could I insert a link exactly points to "ChildTab2" into another page.
The quick answer is "You can't".
The tabs are simple HTML and JavaScript, when you click a tab, the display of the PageViews is switched, that's all. These are not anchors that you can switch to.
What you can consider is adding a querystring parameter that you can work with in the code-behind and set the selected tab as desired.
Of course, you can do this on the client, but accessing the controls may be a tad harder, and so is parsing the URL (whether it is a querystring or a hash).
<asp:TextBox ID="txtCompanyName" runat="server" placeholder="Company Name" BorderColor="#C2C4CC" BorderStyle="Solid" Height="28px" Width="135px" title="Enter Company Name" BackColor="#F9E3CB" Enabled="False" TabIndex="7" required></asp:TextBox>
Here is the mark up for one of my textbox with the "required" attribute.
My question is, I have 3 buttons on my form, cancel, reset and submit button.
the html5 required validator should only trigger when the submit button is clicked.
however, it still triggers even if I press cancel and reset buttons.
How can I assign html 5 required validator on only one button?
here is my markups for my buttons:
Cancel Button:
<asp:ImageButton ID="Cancel" runat="server" ImageUrl="~/Images/ClaimForm/btnCancel.gif" OnClick="btnFallBack_Click" Visible="False" ToolTip="Cancel" draggable="false" />
Reset Button:
<asp:ImageButton ID="btnClear" runat="server" OnClick = "OnConfirm" OnClientClick = "Confirm()" ImageUrl="~/Images/ClaimForm/Clear.jpg" draggable="false"/>
Submit Button
<asp:ImageButton ID="btnNext" runat="server" ImageUrl="~/Images/ClaimForm/submitbutton.jpg" draggable="false" OnClick="btnNext_Click"/>
Add formnovalidate tag in each buttons html code.
<asp:ImageButton ID="Cancel" runat="server" ImageUrl="~/Images/ClaimForm/btnCancel.gif" OnClick="btnFallBack_Click" Visible="False" ToolTip="Cancel" draggable="false" formnovalidate="formnovalidate" />
I solved it by assigning an onclick function to that button and adding:
event.preventDefault();
try this.
use a input button - where set the type as button and make it to run as server
ex:
// this will trigger the required for text boxes
//this button will not.
What i'm trying to do is place a specific chart that is dynamically created on a specific tab. For example Chart A will go to ColorTab and Chart B will go to HistoryTab
<telerik:RadAjaxPanel ID="StripPanel" runat="server" Width="100%">
<telerik:RadTabStrip ID="TabStrip" runat="server" MultiPageID="Monetary" SelectedIndex="0">
<Tabs>
<telerik:RadTab Text="MonetaryTab">
</telerik:RadTab>
<telerik:RadTab Text="VTab">
</telerik:RadTab>
<telerik:RadTab Text="ColorTab">
</telerik:RadTab>
<telerik:RadTab Text="HistoryTab">
</telerik:RadTab>
<telerik:RadTab Text="AdTab">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
</telerik:RadAjaxPanel>
This is what i'm trying
Control masterC = FindControl("MonetaryTab");
RadHtmlChart CarLotChart = ChartCreationClass.HTMLChartCreation();
masterC.Controls.Add(CarLotChart);
It never finds the control to place the chart.
Use recommendations from this thread to accomplish this task:
RadHtmlChart CarLotChart = ChartCreationClass.HTMLChartCreation();
TabStrip.Tabs["MonetaryTab"].Controls.Add(CarLotChart);
Refer to the required Tab via any of the following methods.
The RadTabStrip works in conjuction with RadmultiPage control. You first define the RafTabStrip and Tabs within it. Then have a RadMultiPage and define one page (type RadPageView) for each tab you have defined in TabStrip. The controls need to be added to the PageView and not to the tab directly.
I have created a small demo based on the TabStrip you have defined in the question.
Here is the TabStrip code:
<telerik:RadTabStrip ID="TabStrip" runat="server" MultiPageID="Monetary" SelectedIndex="0" >
<Tabs>
<telerik:RadTab Text="MonetaryTab">
</telerik:RadTab>
<telerik:RadTab Text="VTab">
</telerik:RadTab>
<telerik:RadTab Text="ColorTab">
</telerik:RadTab>
<telerik:RadTab Text="HistoryTab">
</telerik:RadTab>
<telerik:RadTab Text="AdTab">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
Now here is the RadMultiPage definition:
<telerik:RadMultiPage ID="Monetary" runat="server" SelectedIndex="0" OnLoad="Monetary_Load">
<telerik:RadPageView runat="server" ID="monetaryTabPageView"/>
<telerik:RadPageView runat="server" ID="vTabPageView"/>
<telerik:RadPageView runat="server" ID="colorTabPageView"/>
<telerik:RadPageView runat="server" ID="historyTabPageView"/>
<telerik:RadPageView runat="server" ID="adTabPageView"/>
</telerik:RadMultiPage>
Notice that i am listening to OnLoad event of the RadMultiPage. In this demo - when the RadMultiPage loads, i will create charts and add it to eacg pageview we have. Here is the event handler code:
protected void Monetary_Load(object sender, EventArgs e)
{
AddChart(monetaryTabPageView);
AddChart(vTabPageView);
AddChart(colorTabPageView);
AddChart(historyTabPageView);
AddChart(adTabPageView);
}
private void AddChart(RadPageView pageView)
{
RadHtmlChart chart = new RadHtmlChart();
chart.ChartTitle.Text = pageView.ID + " chart";
pageView.Controls.Add(chart);
}
As you can see i just add the control directly to the pageview's controls collection.
NOTE: as a proof of concept i have created an empty chart i.e. a chart which has only title defined. you can go ahead and bind with some meaningful data if required.
here is the screenshot of how this looks:
Hope this answers your question.
Lohith (Tech Evangelist, Telerik India)
I am displaying my data in a devexpress gridview. One of the column is state value. When the grid is edited, I have to show the state in a combobox, so that the user could change the state by choosing a different state. Currently it is displayed in a textbox, since it is the default. Essentially when the user clicks the edit button, a combobox should be displayed as part of the edit controls, and the combobox should be populated with all possible states in the codebehind and the selected value should be the initial value on the grid. It is very easy do it in MS gridview. But I couldn't see any sample code for how to do it in the devexpress gridview.
Thanks
Use GridViewDataComboBoxColumn. Declare datasource and attach it to combo box column or populate it in code behind. This example contains both variants.
You can also take a look at DevExpress grid editing demos.
<dx:GridViewDataTextColumn FieldName="FieldName" VisibleIndex="4">
<EditItemTemplate>
<dx:ASPxComboBox ID="ASPxComboBox1" runat="server" DataSourceID="newDataSource" >
</dx:ASPxComboBox>
</EditItemTemplate>
</dx:GridViewDataTextColumn>
You'll need to set the datasource so you'll get the list of values
If you don't have a data source and want to include the combo box items in your code, here's another way to create the column:
<dx:GridViewDataComboBoxColumn FieldName="QAAproval" VisibleIndex="11" Width="30px">
<PropertiesComboBox>`enter code here`
<Items>
<dx:ListEditItem Text="GENERIC" Value="GENERIC" />
<dx:ListEditItem Text="FAIR" Value="FAIR" />
<dx:ListEditItem Text="VSE" Value="VSE" />
<dx:ListEditItem Text="ECAV" Value="ECAV" />
<dx:ListEditItem Text="FMMDS" Value="FMMDS" />
<dx:ListEditItem Text="CLEAR" Value="CLEAR" />
</Items>
</PropertiesComboBox>
<CellStyle Font-Size="XX-Small">
</CellStyle>
</dx:GridViewDataComboBoxColumn>
Edit the GridView Template, and in the EditTemplate of the field, add the dropdownbox. It might come to look like this
<dx:GridViewDataTextColumn Caption="Field Name"
FieldName="FieldName" VisibleIndex="3">
<EditItemTemplate>
<cc1:DropDownList ID="DropDownList1" runat="server">
</cc1:DropDownList>
</EditItemTemplate>
</dx:GridViewDataTextColumn>
So when you edit that row, it will show the DDL
I have used the following code to have combo box in the aspxgridview.
I hope this example helps :
<dx:GridViewDataComboBoxColumn FieldName="DatabaseFieldName" Settings-FilterMode="DisplayText"
Width="3%" VisibleIndex="3" Visible="True" Caption="Priority" Settings-AutoFilterCondition="Contains"
HeaderStyle-VerticalAlign="Middle" HeaderStyle-HorizontalAlign="Center" CellStyle-HorizontalAlign="Center"
CellStyle-VerticalAlign="Top">
<PropertiesComboBox ValueType="System.String" DataSourceID="objDataSourceID"
Width="200px" Height="25px" TextField="TextFieldName" ValueField="ValueFieldName"
IncrementalFilteringMode="StartsWith">
</PropertiesComboBox>
</dx:GridViewDataComboBoxColumn>
I have an issue regarding link button, On my website i have got a product for sale page, which has a ryt side bar with filter options
while the left side bar shows the filteration results.
On my ryt sidebar i have used accordion with the repeater control which display the searching criteria from database.
For instance I have 2 searching criteria model and price , under model accordion there are three models, what I want to acheive is
when a user clicks on that specific model , the page should run a query with respect to that click and show bind the results on the
repeater of the left side bar, I know the query to get the results but I dunno how to get the value
of that hyper link button, coz these buttons will be dynamic it can be 3,4 or 10. how will i get the clicked hyperlink value
so that I can run the query depending on the model selected.
Any help or tutorial will highly be appreciated.
AutoSize="None"
FadeTransitions="true"
TransitionDuration="250"
FramesPerSecond="40"
RequireOpenedPane="false"
SuppressHeaderPostbacks="true">
<Panes>
<asp:AccordionPane ID="AccordionPane1" runat="server" >
<Header>
Make
</Header>
<Content>
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<li>
<asp:LinkButton ID="LinkButton2" runat="server" Text='<%# Eval("make") %>'></asp:LinkButton>
</li>
</ItemTemplate>
</asp:Repeater>
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="AccordionPane2" runat="server" >
<Header>
Price
</Header>
<Content>
</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
Set the CommandArgument of the LinkButton.
Then to access the CommandArgument:
protected void lnkButton_Click(object sender, EventArgs e) {
LinkButton _sender = (LinkButton)sender;
string argument = _sender.CommandArgument;
}