Telerik Forums
UI for ASP.NET AJAX Forum
3 answers
160 views
Hi all,

I see a lot of implementations and other chatter about this, but I never see full solutions. I've been at it this afternoon, but not for the first time. The best way to go, I found, is a splitter with 2 stacked panes. The top pane containing the radTabStrip, the bottom (body) pane with height=100% containing the RadMultiPage.

Problem is that in my application the user can select the skin. The top pane can be set to height=40px, but with a Touch skin this is not enough. Also, I now have a RadTabStrip with two rows, so the height is heigher.

so, the top pane should ajust it's height to the RadTabStrip, the bottom pane should fille up the splitter.

I have this kind of working using:
height: auto !important; for the top pane (useing CssClass)
but all kind of problem start happening here. The RadMultiPage is not showing, or there are no scrollbars while the height is heigher than screen. 

I've also tried javascript. problem here is that RadTabStrip.offsetHeight always returnes the wrong offset the first time. in black skin ie it always returns 76px at load (all kinds of onClientLoad tried, splitter, pane, page and Splitter's OnClientResized, OnClientLoaded)
while the real offsetHeight = 53px. This happens with the glow skin to: 101 in stead of 63.
The second time (postback or resize browser) it returns the correct value.

So... What's the best appraotch?

ps: in my secenario there is always a postback. The splitter and script code are in a usercontrol that loads after a postback.

Erik


the aspx code:

<style type="text/css">
    .SystemSettingsTable
    {
        border: 0;
    }
    .SystemSettingsTable tr
    {
        height: 35px;
    }
     
    .AutoHeightPane
    {
        height: auto !important;
    }
    .FullHeightPane
    {
        height: 100% !important;
    }
</style>
<telerik:RadScriptBlock ID="RadCodeBlock_Proovit_NetBas_Modules_SystemModules_SystemSettings" runat="server">
    <script type="text/javascript">
        //<![CDATA[
        //alert('AA');
        //var myPane = $get('<%= RadPane1.ClientID %>');
        //var myMultipage = $get('<%= RadMultiPage1.ClientID %>');
        //var myTabStrip = $get('<%= tabStrip1.ClientID %>');
        //alert(myTabStrip.offsetHeight);
 
        //alert('AAx');
        $(document).ready(function () {
            //var myPane = $get('<%= RadPane1.ClientID %>');
            //var myMultipage = $get('<%= RadMultiPage1.ClientID %>');
            var myTabStrip = $get('<%= tabStrip1.ClientID %>');
            //alert(myTabStrip.offsetHeight);
            //var newHeight = (myPane.offsetHeight - myTabStrip.offsetHeight);
            //var myGrid = $get('<%= tbl_AccountSettings_Gerneral.ClientID %>');
            //myMultipage.style.height = newHeight + 'px';
            //myGrid.style.height = (newHeight - 60) + 'px';
 
            // Within the ready function...
            //Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, args) {
            //    alert('CC');
            //});
 
        });
 
        function TestOffsetHeight(sender, Args) {
 
            alert(sender.id);
            var myTabStrip = $get('<%= tabStrip1.ClientID %>');
            alert(myTabStrip.offsetHeight);
 
        }
        //]]>
    </script>
</telerik:RadScriptBlock>
<telerik:RadSplitter ID="RadSplitter_Module" BorderSize="0" BorderStyle="None" PanesBorderSize="0" Width="100%" Height="100%" Orientation="Horizontal" VisibleDuringInit="false" LiveResize="False" runat="Server" OnClientResized="TestOffsetHeight" OnClientLoaded="TestOffsetHeight">
    <telerik:RadPane ID="RadPane1" Width="100%" Scrolling="None" CssClass="AutoHeightPane" runat="server">
        <telerik:RadTabStrip ID="tabStrip1" runat="server" Style="width: 100%;" MultiPageID="RadMultiPage1" SelectedIndex="0" OnClientLoad="TestOffsetHeight">
            <Tabs>
                <telerik:RadTab Text="Account Settings" Selected="True" runat="server">
                    <Tabs>
                        <telerik:RadTab Text="General" Selected="True" PageViewID="RadPageView_AccountSettings_Gerneral" runat="server" />
                        <telerik:RadTab Text="Page2" PageViewID="RadPageView_AccountSettings_Page2" runat="server" />
                    </Tabs>
                </telerik:RadTab>
                <telerik:RadTab Text="User Group Settings" runat="server">
                    <Tabs>
                        <telerik:RadTab Text="General" PageViewID="RadPageView_UserGroupSettings_Gerneral" runat="server" />
                        <telerik:RadTab Text="Menu" PageViewID="RadPageView_UserGroupSettings_Menu" runat="server" />
                    </Tabs>
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
    </telerik:RadPane>
    <telerik:RadPane ID="RadPane2" Width="100%" Height="100%" CssClass="FullHeightPane" Scrolling="None" BorderColor="Red" BorderStyle="Solid" BorderWidth="1px" BackColor="Yellow" runat="server">
        <telerik:RadMultiPage ID="RadMultiPage1" Height="100%" CssClass="FullHeightPane" SelectedIndex="0" ScrollBars="Both" runat="server">
            <telerik:RadPageView ID="RadPageView_AccountSettings_Gerneral" Selected="True" runat="server">
                <table id="tbl_AccountSettings_Gerneral" border="0" cellpadding="0" cellspacing="0" class="SystemSettingsTable" runat="server">
                    <colgroup>
                        <col style="white-space: nowrap;" />
                        <col style="width: 15px;" />
                        <col style="color: black;" />
                    </colgroup>
                    <tr>
                        <td>
                            <nbui:Label ID="lbl_Account" Text="Account" TextSurfix=":" LanguageKey="General.Account" runat="server" />3
                        </td>
                        <td>
                        </td>
                        <td>
                            <telerik:RadDropDownTree ID="RadDropDownTree_Accounts" AutoPostBack="True" DataTextField="Name" DataFieldID="AccountId" DataFieldParentID="ParentAccountId" DataValueField="AccountId" Width="360px" DefaultMessage="(Please select...)" ExpandNodeOnSingleClick="false" FullPathDelimiter=" » " runat="server">
                                <DropDownSettings Width="360px" Height="400px" />
                            </telerik:RadDropDownTree>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <nbui:Label ID="lbl_AccountMainUser" Text="Account's main user" TextSurfix=":" LanguageKey="General.AccountsMainUser" runat="server" />
                        </td>
                        <td />
                        <td>
                            <telerik:RadDropDownList ID="rdl_SuperUser" DataTextField="FullNameLMF" DataValueField="ContactId" DefaultMessage="(Please select)" Width="360px" DropDownWidth="360" DropDownHeight="400" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="9">
                            <telerik:RadButton ID="rbt_SaveAccountSettings" Text="Save Account Settings" ButtonType="LinkButton" Font-Bold="true" Style="margin-right: 20px;" Icon-PrimaryIconCssClass="rbSave" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="9">
                            <hr />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <nbui:Label ID="lbl_UserGroup" Text="User group" TextSurfix=":" LanguageKey="General.UserGroup" runat="server" />
                        </td>
                        <td>
                        </td>
                        <td>
                            <telerik:RadDropDownTree ID="RadDropDownTree_UserGroups" AutoPostBack="True" DataTextField="Name" DataFieldID="UserGroupId" DataFieldParentID="ParentUserGroupId" DataValueField="UserGroupId" Width="360px" DefaultMessage="(Please select)" ExpandNodeOnSingleClick="False" FullPathDelimiter=" » " runat="server">
                                <DropDownSettings Width="360px" Height="400px" AutoWidth="Enabled" />
                            </telerik:RadDropDownTree>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <nbui:Label ID="lbl_Options" Text="Options" TextSurfix=":" LanguageKey="General.Options" runat="server" />
                        </td>
                        <td />
                        <td>
                            <telerik:RadButton ID="btn_HasMenu" ToggleType="CustomToggle" ButtonType="StandardButton" AutoPostBack="false" Width="100px" runat="server">
                                <ToggleStates>
                                    <telerik:RadButtonToggleState Text="Menu" Value="1" />
                                    <telerik:RadButtonToggleState Text="No Menu" Value="0" />
                                    <telerik:RadButtonToggleState Text="[Like Parent]" Value="^" />
                                </ToggleStates>
                            </telerik:RadButton>
                            <telerik:RadButton ID="btn_HasLeftPanes" ToggleType="CustomToggle" ButtonType="StandardButton" AutoPostBack="false" Width="100px" runat="server">
                                <ToggleStates>
                                    <telerik:RadButtonToggleState Text="Left Panes" Value="1" />
                                    <telerik:RadButtonToggleState Text="No Left Panes" Value="0" />
                                    <telerik:RadButtonToggleState Text="[Like Parent]" Value="^" />
                                </ToggleStates>
                            </telerik:RadButton>
                            <telerik:RadButton ID="btn_HasLeftNavigation" ToggleType="CustomToggle" ButtonType="StandardButton" AutoPostBack="false" Width="100px" runat="server">
                                <ToggleStates>
                                    <telerik:RadButtonToggleState Text="Left Navigation" Value="1" />
                                    <telerik:RadButtonToggleState Text="No Left Navigation" Value="0" />
                                    <telerik:RadButtonToggleState Text="[Like Parent]" Value="^" />
                                </ToggleStates>
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="9">
                              
                        </td>
                    </tr>
                    <tr>
                        <td colspan="9">
                            <telerik:RadTreeList ID="RadTreeList_MenuRights" DataKeyNames="MenuItemId" ParentDataKeyNames="ParentMenuItemId" Width="800px" Height="600px" AutoGenerateColumns="false" AllowMultiItemSelection="true" AllowSorting="true" AllowNaturalSort="true" runat="server">
                                <Columns>
                                    <telerik:TreeListBoundColumn DataField="Caption" UniqueName="Caption" HeaderText="Caption" HeaderStyle-Width="100px" ItemStyle-Wrap="false" />
                                    <telerik:TreeListTemplateColumn DataField="Toggle" UniqueName="Toggle" HeaderText="Option" HeaderStyle-Width="120px" HeaderStyle-HorizontalAlign="Center" ItemStyle-Wrap="false" ItemStyle-Height="20px">
                                        <ItemTemplate>
                                            <telerik:RadButton ID="btn_MenuItemToggleState" ToggleType="CustomToggle" ButtonType="StandardButton" AutoPostBack="false" Width="70px" runat="server">
                                                <ToggleStates>
                                                    <telerik:RadButtonToggleState Text="YES" Value="1" />
                                                    <telerik:RadButtonToggleState Text="NO" Value="0" />
                                                    <telerik:RadButtonToggleState Text="[Parent]" Value="^" />
                                                </ToggleStates>
                                            </telerik:RadButton>
                                            [<asp:Label ID="lbl_TestLabel" Text="?" runat="server" />]
                                        </ItemTemplate>
                                    </telerik:TreeListTemplateColumn>
                                    <telerik:TreeListBoundColumn DataField="Code" UniqueName="Code" HeaderText="Code" HeaderStyle-Width="100px" ItemStyle-Wrap="false" />
                                    <telerik:TreeListBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name" HeaderStyle-Width="150px" ItemStyle-Wrap="false" />
                                    <telerik:TreeListBoundColumn DataField="MenuItemId" UniqueName="Id" HeaderText="Id" HeaderStyle-Width="40px" HeaderStyle-HorizontalAlign="Right" HeaderStyle-ForeColor="GrayText" ItemStyle-HorizontalAlign="Right" ItemStyle-ForeColor="GrayText" ItemStyle-Font-Size="Smaller" />
                                </Columns>
                                <ClientSettings>
                                    <Selecting AllowItemSelection="true" AllowToggleSelection="true" UseSelectColumnOnly="true" />
                                    <Scrolling AllowScroll="false" SaveScrollPosition="true" UseStaticHeaders="true" ScrollHeight="400px" />
                                </ClientSettings>
                            </telerik:RadTreeList>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="9">
                            <telerik:RadButton ID="rbt_SaveUserGroupSettings" Text="Save User Group Settings" ButtonType="LinkButton" Font-Bold="true" Style="margin-right: 20px;" Icon-PrimaryIconCssClass="rbSave" runat="server" />
                        </td>
                    </tr>
                </table>
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView_AccountSettings_Page2" runat="server">
                [RadPageView_AccountSettings_Page2]
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView_UserGroupSettings_Gerneral" runat="server">
                [RadPageView_UserGroupSettings_Gerneral]
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView_UserGroupSettings_Menu" runat="server">
                [RadPageView_UserGroupSettings_Menu]
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </telerik:RadPane>
</telerik:RadSplitter>

Vessy
Telerik team
 answered on 16 Apr 2013
7 answers
181 views
Hi,

I'm trying to get use attributes to pass some urls and icons around, so that I can incorporate a status icon next to the resource heading.

I've managed to come up with jQuery suitable for inserting the appropriate image element into the DOM, but when I look in my attributes, there aren't any. They were there on the server side however as it returned from GetResouces, so they don't appear to have been mapped to the client collection.

The code that I'm running on the client in response to a OnClientDataBound event is as follows:

        function refreshStatusIcons(sender, eventArgs) { 
            var allresources = sender.get_resources(); 
            var jobresources = allresources.getResourcesByType('Job'); 
 
            var resourceheaders = $('table.rsVerticalHeaderTable div.rsMainHeader', sender._element); 
 
            resourceheaders.each(function() { 
                var headerelement = $(this); 
 
                var icon = $('.ocStatusIcon', headerelement); 
                if (icon.size()==0) { 
                    headerelement.html('<img class="ocStatusIcon" />' + headerelement.html()); 
                    icon = $('.ocStatusIcon', headerelement); 
                } 
                var jobresource = jobresources.getResourceByTypeAndKey('Job''Res'+headerelement.text().trim()); 
                icon.attr('src', jobresource.getAttribute('IconURL')); 
            }); 
        } 
 

Clearly this is susceptible to changes in css class names and markup etc. so it's not perfect.

What do I have to do to get the resource's attributes to load into the client? Is this fixed in a later version? How do I download the latest version?

Cheers.


Plamen
Telerik team
 answered on 16 Apr 2013
1 answer
121 views
I am developing a page to allow the user to send out emails to a large number of recipients.  I am using a RADProgressArea to notify her that something is happening - and to prevent timeouts.  Unfortunately, when the job completes the control - poof! disappears from the page.  Is this expected behavior?
Hristo Valyavicharski
Telerik team
 answered on 16 Apr 2013
5 answers
68 views
I'm wondering if its possible in some way to turn OFF the scrolling (or ON)?  I've tried to find a way via javascript, but it doesn't look like you have access to this feature.  In my case users can specifically set the height on a grid, but until its drawn on the page (and depending on the skin used) you wont know if the scrollbar is active or not, so it doesn't seem possible from ServerSide.  Is this possible somehow??

<Scrolling AllowScroll="true" />

 

 

 

Angel Petrov
Telerik team
 answered on 16 Apr 2013
1 answer
54 views
Hi,
  I just saw the new updates to RadAsynUpload Component. I love it. The only addition I wish to make to it is to call my own upload mechanism. Here is the case:

1) User Uploads 1 or many files.
2) Calls my own upload mechanism.
3) Use the progress bar for 1 or many files from Telerik. 
2) As the file completes I want to add additional fields like description and Date.
3) Finally save the data to sql server.

Any help would greatly be appreciated.

Thanks,
Amin

Plamen
Telerik team
 answered on 16 Apr 2013
1 answer
219 views

I want to hide the verion number in viewstate for the AJAX teltrik controls that i am using in my web application as we dont want our client to have that information. we are able to see there controls version number when i do a viewsource.

Please help me, I have this issue to fix ASAP.

Thanks,
Swapna
Rumen
Telerik team
 answered on 16 Apr 2013
2 answers
114 views
Hi Friends, 

I have the telerik rad chart,  when i click on  specific item in the Legend it has to redirect to other page with selected item id with query string, can you please help me for this.

Ex: default.aspx?id=io# 1388249 or  default.aspx?id=io# 1389656

Thanks in advance


Chandu
Top achievements
Rank 1
 answered on 16 Apr 2013
2 answers
193 views
How can I set different prices(or another info ) for different periods in RadCalendar?




Tnx
Ahmad
Ahmad
Top achievements
Rank 1
 answered on 16 Apr 2013
2 answers
100 views
Hi Peter,

When validating a drop down list, is there a way to make it so that only data in the last level of a branch is selected?  ie in the example below only the bold text would count as a selected value and as such allow the control to validate to true.

1
1.1
1.1.1
1.1.2
1.2

1.3
1.3.1

Regards

Jon
Jon
Top achievements
Rank 1
 answered on 16 Apr 2013
1 answer
397 views
Hi Telerik,

I am a bit confused with the usage of the various modes of protection in RadCaptcha. Can someone get me how the Captcha, time out and Hidden textfield differ?

Thanks for your reply,
Saira
Princy
Top achievements
Rank 2
 answered on 16 Apr 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?