Embedded tabs in RadTabStrip - visual-studio

I'm using Telerik's RadTabStrip and RadMultiPage to create some tabs for a website using Visual Studio 2012. I have a row of three tabs and one of the tabs has two child tabs.
The primary tabs are Notes, Minutes and Admin. Then Notes has two child tabs Us and Them. When the user clicks on Notes, I want it to default to Us with the option of selecting Them.
I would like to do this all on the aspx page and not the code behind. I found some examples that do it in code but it doesn't seem like it should be necessary. However, after hours of searching and fiddling with the control I've come up empty or worse, results that make no sense to me. I found a lot of examples on how to create a RadTabStrip with child tabs...a lot of examples...but none of them explain how to map those tabs and child tabs to a RadPageView. Is it so simple they don't feel the need to write an example of this step? Is it impossible on the aspx side and that's why some of the examples jump into the codebehind? I don't get it.
Here's what I have. I know it doesn't work but at this point I've tried so many different things I don't know which end is up.
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1">
<Tabs>
<telerik:RadTab runat="server" Text="Notes" Selected="true">
<Tabs>
<telerik:RadTab runat="server" Text="Us" Selected="true" />
<telerik:RadTab runat="server" Text="Them" />
</Tabs>
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Minutes" />
<telerik:RadTab runat="server" Text="Admin" />
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server">
<%--UserControl 1 Tab--%>
<telerik:RadPageView ID="RadPageView1" runat="server" CssClass="tabstyle" Selected="true" />
<%--Child 1 Tab--%>
<telerik:RadPageView ID="RadPageView2" runat="server" CssClass="tabstyle">
<uc:ucNote ID="ucNote1" runat="server" />
</telerik:RadPageView>
<%--Child 2 Tab--%>
<telerik:RadPageView ID="RadPageView3" runat="server" CssClass="tabstyle">
<uc:ucNote ID="ucNote2" runat="server" />
</telerik:RadPageView>
<%--UserControl 2 Tab--%>
<telerik:RadPageView ID="RadPageView4" runat="server" CssClass="tabstyle">
<uc:ucMinute ID="ucMinute1" runat="server" />
</telerik:RadPageView>
<%--UserControl 3--%>
<telerik:RadPageView ID="RadPageView5" runat="server" CssClass="tabstyle">
<uc:ucAdmin ID="ucAdmin1" runat="server" />
</telerik:RadPageView>
</telerik:RadMultiPage>

Ok, I think I figured out what was wrong and it turned out to be very minor. I just didn't set all the Selected="true". Once I made sure the Note node and the Us node in the RadTabStrip were selected and the Note node and Us node in the RadMultiPage were selected it started working the way I expected. I'm skeptical that I was that close and the solution was that easy after all the time I put into it but so far it's looking right.

Related

Issue with Rad grid inside Rad Ajax panel row edit not firing

I'm facing a problem with Rad Gird inside Rad Ajax Panel
First in kept my RadGrid inside asp:panel here is works fine
<asp:Panel ID="Panel1" runat="server">
When i replace asp:panel with RadAjaxpanel edit and add buttons are not working
Here is my code
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxPanel ID="div" runat="server" EnableAJAX="true" >
<telerik:RadGrid ID="rdgOpData" runat="server" CssClass="value"
AllowPaging="true" AllowSorting="true" AllowFilteringByColumn="false"
OnNeedDataSource="rdgOpData_NeedDataSource"
OnItemDataBound="rdgOpData_ItemDataBound"
OnInsertCommand="rdgOpData_InsertCommand"
OnUpdateCommand="rdgOpData_UpdateCommand">
<MasterTableView CommandItemDisplay="Top"
AutoGenerateColumns="false" DataKeyNames="LNK_ORIGINATEDBY_CN%%TXT_NAMELAST"
CommandItemSettings-AddNewRecordText="Add Opp" EditMode="EditForms"
InsertItemPageIndexAction="ShowItemOnCurrentPage">
<EditFormSettings>
<EditColumn UniqueName="EditCommandColumn" InsertText="Add" CancelText="Cancel" UpdateText="Update" ButtonType="PushButton">
</EditColumn>
</EditFormSettings>
<Columns>
<telerik:GridEditCommandColumn ButtonType="ImageButton" EditImageUrl="~/Images/Edit.gif">
</telerik:GridEditCommandColumn>
No firing even itemdatabound on edit button click .
Help me through this issue
Sometimes it may happen, for best results use RadAjaxManager.
Add the RadAjaxManager in page, then click on open Configuration, the configuration is easy.
Imagine the (One to One) case. Click on any of the control (cause) and map the another control (effect). Just checkbox clicks.. Go ahead here's the documentation.
Read about RadAjaxManger here

Telerik combo background design

I couldn't figure how to get the combo box looks like the payment method combo box from this link https://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx#qsf-demo-source
The source they provide doesn't seems to have any different from each other, but I need that filled combobox design from the 4th one. Just doesn't know how to get it.
If you press the View Source, then goto 'PaymentMethods.xml' you will see the method used for assigning (Xml taken directly from this Telerik Demo)
<Items>
<Item Text="American Express" Value="1" ImageUrl="Images/card-types/american-express.png" />
<Item Text="MasterCard" Value="2" ImageUrl="Images/card-types/mastercard.png" />
<Item Text="Visa" Value="3" ImageUrl="Images/card-types/visa.png" />
<Item Text="Visa Electron" Value="4" ImageUrl="Images/card-types/visa-electron.png" />
</Items>
There are other methods for adding images using the ImageUrl attribute (See this Telerik Demo)
Alternatively you might want to use the ItemTemplate should you want further control (See this Telerik Demo) This also allows you to put further details in the drop down list which is particularly useful when you want to display a little more information.
<ItemTemplate>
<asp:Label ID="lblOptionTitle" runat="server" Text='<%# Eval('ItemTitle') %>' Font-Bold="true" />
<asp:Label ID="lblOptionText" runat="server" Text='<%# Eval('ItemText') %>' />
<img id="imgOption" alt="Alternative Text" src='<%# Eval('ImageUrl') %>' />
</ItemTemplate>

asp RadioButtonList inside nested user control always performing full postback

I have a RadioButtonList control inside a nested user control. When one of its buttons is clicked, i want a panel to be refreshed with an ajax postback. I am using the telerik RadAjaxManager. The problem is that the list always triggers a FULL postback. markup is below
<telerik:RadAjaxManagerProxy runat="server" ID="RadAjaxManagerPRoxy1">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="btnAcceptReject">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="pnlControls" UpdatePanelRenderMode="Inline" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>
<asp:RadioButtonList runat="server" ID="btnAcceptReject" RepeatDirection="Horizontal" CssClass="checkboxlist borderless" ValidationGroup="data" AutoPostBack="true" OnSelectedIndexChanged="btnAcceptReject_SelectedIndexChanged">
<asp:ListItem Text="The edition is hereby validated for conformity to standards" Value="0" Selected="True"></asp:ListItem>
<asp:ListItem Text="The edition does not meet standards and still has to be reviewed" Value="1"></asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="vldAcceptReject" ControlToValidate="btnAcceptReject" runat="server" CssClass="text-error" Text="please check an option" ValidationGroup="data"></asp:RequiredFieldValidator>
<asp:Panel runat="server" ID="pnlControls">
I reviewed my code and markup over and over and it does not seem there's anything missing, this should run out of the box! i've been reading a lot online however about issues that controls like RadioButtonList and CheckBoxList have with ajax postbacks. does anyone know how to solve this?
You should move the radio button list inside the pnlControls ajax panel. Then It should not do the postback.

Parent Page shows through Filter Menus in RadWindow embedded RadGrid

I have a RadGrid in a RadWindow set to Modal.
I'm seeing two issues.
The first and most critical ONLY HAPPENS IN IE7 and NOT in FIREFOX is that the Filter Menus of the RadGrid do not display when clicked. Instead a box the size of the menus is opened through which I can see the parent page.
The second and probably related HAPPENS IN BOTH IE AND FIREFOX is that when I drag the RadWindow the content of the RadWindow disappears and is replaced by the same transparency to the parent page.
Any help you could offer would be great. I've spent all day hunting and pecking through CSS trying to find it.
Grid and window declarations follow.
<telerik:RadWindowManager
OnClientClose="OnViewerClose"
Behaviors="Close, Move, Resize,Maximize"
ID="RadWindowManager"
DestroyOnClose="true"
Opacity="99"
runat="server">
<Windows>
<telerik:RadWindow
ID="AssociateUserWindow"
VisibleOnPageLoad="false"
Width="600"
Height="400"
runat="server"
Overlay="true"
KeepInScreenBounds="true"
Modal="true"
Skin="WebBlue">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
<telerik:RadGrid
ID="rgUsers"
runat="server"
AllowPaging="true"
AllowSorting="true"
AutoGenerateColumns="false"
CellPadding="1"
CellSpacing="2"
GridLines="Vertical"
Skin="WebBlue"
Width="100%"
OnItemDataBound="rgUsers_ItemDataBound"
OnNeedDataSource="rgUsers_NeedDataSource"
PageSize="5"
>
<PagerStyle Mode="NumericPages"></PagerStyle>
<MasterTableView DataKeyNames="UserId" AllowMultiColumnSorting="True" AllowFilteringByColumn="true" HierarchyDefaultExpanded="true">
<Columns>...ommitted...</Columns>
</MasterTableView>
</telerik:RadGrid>
Are you able to extract a runnable sample that displays the issue? If you can I think the best thing to do here, since the markup that you posted looks completely fine, is to submit this in a support ticket over at Telerik. Their support guys will probably be the best to figure out what the issue might be.
Nevermind. I've found the issue... that opacity setting was the culprit. Removing it from the radwindow manager fixed it.

ASP.Net AJAX ValidatorCalloutExtender issue

I am building a User Control (requirement – has to be User Control).
This user control is inside an AJAX Update Panel on the parent page.
The user control has two Infragistics Web Date Chooser controls on it.
Both dates are required.
I have placed asp.net RequiredFieldValicators on both controls.
I have placed ValidatorCalloutExtenders on both.
One control gets validated every time without fail. The other is intermittent. To debug I first removed the ValidatorCalloutExtender from the failing control and sure enough the RequiredFieldValidator fires correctly every time so it appears that the problem is with the ValidatorCalloutExtender. There are not a lot of options for the ValidatorCalloutExtender but I did play with them every way feasible and nothing seems to make any difference. The TargetControlID has to point to the validation control you are extending. Any help appreciated.
Here is the code that works correctly every time:
<igsch:WebDateChooser ID="wdcEndDatePop" runat="server" EnableAppStyling="True"
NullDateLabel="" StyleSetName="eWERKS3" StyleSetPath="~/App_Themes/"
Width="200px" MinDate="2009-01-01" />
<asp:RequiredFieldValidator ID="rfvEndDate" runat="server"
ControlToValidate="wdcEndDatePop" Display="None"
ErrorMessage="End date required." ValidationGroup="endDatePop" />
<cc1:ValidatorCalloutExtender
ID="vceEndDatePop"
runat="server"
CloseImageUrl="~/images/close.gif"
HighlightCssClass="validatorCalloutHighlight"
TargetControlID="rfvEndDate"
WarningIconImageUrl="~/images/back_warning2.gif" />
And here is the code that works intermitemtly:
<igsch:WebDateChooser ID="wdcStartDate" runat="server" EnableAppStyling="True"
NullDateLabel="" StyleSetName="eWERKS3" StyleSetPath="~/App_Themes/"
MinDate="2009-01-01" />
<asp:RequiredFieldValidator ID="rfvStartDate" runat="server"
ControlToValidate="wdcStartDate" Display="None"
ErrorMessage="Start date required." ValidationGroup="access" />
<cc1:ValidatorCalloutExtender
ID="vceStartDate"
runat="server"
CloseImageUrl="~/images/close.gif"
HighlightCssClass="validatorCalloutHighlight"
TargetControlID="rfvStartDate"
WarningIconImageUrl="~/images/back_warning2.gif" />

Resources