Questions on UI for ASP.NET AJAX Forum

7 answers

237 views

[Solved] Force splitter height to height of page

Hi Telerik,

I am attempting to have my RadSplitter be 100% (-few pixels) of the browser windows height.

This is my relevant HTML mark-up.

<div class="style1">

<br />

CableSolve Web Dashboard

<br />

</div>

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Refresh All Graphs" />

<telerik:RadButton ID="RadButton3" runat="server" onclick="RadButton3_Click"

Skin="Web20" Text="Add Tab">

</telerik:RadButton>

<br />

<telerik:RadTabStrip ID="RadTabStrip1" runat="server"

MultiPageID="RadMultiPage1" SelectedIndex="0" Skin="Web20">

<Tabs>

<telerik:RadTab runat="server" Text="Home" Selected="True" >

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" Runat="server" SelectedIndex="0">

<telerik:RadPageView ID="RadPageView1" runat="server"><telerik:RadDockLayout ID="RadDockLayout1" Runat="server"

onloaddocklayout="RadDockLayout_LoadDockLayout"

onsavedocklayout="RadDockLayout_SaveDockLayout"><telerik:RadSplitter ID="RadSplitter1" Runat="server" BorderSize="0"

Height="600px" Skin="Web20" Width="100%" ><telerik:RadPane ID="RadPane1" Runat="server" CssClass="leftRoundedCorners" Scrolling="None" Width="20px"><telerik:RadSlidingZone ID="RadSlidingZone1" Runat="server" ClickToOpen="True"

OnClientLoaded="OnClientSlidingZoneLoaded" Width="20px"><telerik:RadSlidingPane ID="RadSlidingPane1" Runat="server" BackColor="#ECF4FD"

IconUrl="./Icons/document--pencil.png" MinWidth="160" Scrolling="Y" TabView="ImageOnly"

Title="Settings" Width="160px"><telerik:RadListBox ID="lstBxSettings" runat="server" EnableDragAndDrop="True"

onclientdragging="OnClientDragging" ondropped="LstBxSettings_Dropped"

ondropping="LstBxSettings_Dropping" Skin="Web20" Width="100%"><ButtonSettings TransferButtons="All" /><Items><telerik:RadListBoxItem Text="Horizontal Bar" /><telerik:RadListBoxItem Text="Vertical Bar" /></Items></telerik:RadListBox></telerik:RadSlidingPane><telerik:RadSlidingPane ID="RadSlidingPane2" Runat="server" BackColor="#ECF4FD"

IconUrl="./Icons/chart-pie-separate.png" MinWidth="160" Scrolling="Y" TabView="ImageOnly"

Title="Custom Widgets"><telerik:RadListBox ID="lstBxCustom" runat="server" EnableDragAndDrop="True"

onclientdragging="OnClientDragging" ondropped="RadListBox_Dropped" Skin="Web20"

Sort="Ascending" Width="100%"><ButtonSettings TransferButtons="All" /></telerik:RadListBox></telerik:RadSlidingPane><telerik:RadSlidingPane ID="RadSlidingPane3" Runat="server" BackColor="#ECF4FD"

IconUrl="./Icons/chart-up-color.png" MinWidth="160" Scrolling="Y" TabView="ImageOnly"

Title="Historical Widgets" Width="160px"><telerik:RadListBox ID="lstBxHistorical" runat="server"

EnableDragAndDrop="True" onclientdragging="OnClientDragging"

ondropped="RadListBox_Dropped" Skin="Web20" Sort="Ascending" Width="100%"></telerik:RadListBox></telerik:RadSlidingPane></telerik:RadSlidingZone></telerik:RadPane><telerik:RadPane ID="RadPane2" Runat="server" BackColor="White"

BorderColor="White" CssClass="rightRoundedCorners" Scrolling="None" ><telerik:RadDockZone ID="RadDockZone1" Runat="server" BorderWidth="0px"

CssClass="rightRoundedCorners" HighlightedCssClass="zoneClass" MinHeight="100%"

Skin="Web20"></telerik:RadDockZone></telerik:RadPane></telerik:RadSplitter></telerik:RadDockLayout></telerik:RadPageView>

</telerik:RadMultiPage>

<div style="width: 0px; height: 0px; overflow: hidden; position: absolute; left: -10000px;">

<asp:UpdatePanel runat="server" ID="UpdatePanel1">

</asp:UpdatePanel>

</div>

<div style="text-align: center;">

<telerik:RadButton ID="RadButton1" runat="server" Skin="Web20" Text="More"

ButtonType="LinkButton" CssClass="buttons" onclick="RadButton1_Click">

<Icon SecondaryIconUrl="./Icons/document--plus.png" />

</telerik:RadButton>

<telerik:RadButton ID="RadButton2" runat="server" Skin="Web20" Text="Less" ButtonType="LinkButton" CssClass="buttons" onclick="RadButton2_Click" >

<Icon SecondaryIconUrl="./Icons/document--minus.png" />

</telerik:RadButton>

</div>

<br />

<div class="style2">

</div>

I went ahead and tried setting RadSplitter1's height to 100%. This caused its height to be nothing, though, since it has no content inside of it that would force its height to stay larger.

I tried setting all of its parent controls (RadMultipPage/RadPageView)'s heights to 100%, as well. I saw the same results.

Do I need to do something like in this kb article except capturing the height of the window? How would I go about doing that, if so. If not, what steps do I need to take?

Regards,

Sean

Splitter

answered on 15 May 2013

3 answers

278 views

[Solved] MasterPage UpdatePanel and RadGrid

Hi everyone

I have a MasterPage with an Updatepanel with some info on. Then on the content page I have a radgrid with a nestedviewtemplate and on this template is a button that should update the Panel in the masterpage.

The code runs without error, but its not updating, When I put the NestedViewTemplate in an updatepanel as well, it breaks everything else:)

Is there a way around this? Here is my grid:

<telerik:RadGrid ID="uxTitleGrid" runat="server" ...>

<MasterTableView>

<NestedViewTemplate>

<h4>Change Title Details</h4>

<fieldset>

.

<div style="float:right;">

<telerik:RadButton ID="uxRequestChange" runat="server" OnClick="uxRequestChange_OnClick" Text="Request Change" />

</div>

</fieldset>

</NestedViewTemplate>

<Columns>

.

</Columns>

<NoRecordsTemplate>

No Records

</NoRecordsTemplate>

</MasterTableView>

</telerik:RadGrid>

and here is the code behind where I want to update the control

UpdatePanel uxHeaderUpdatePanel = (UpdatePanel)(Master.FindControl("uxHeaderUpdatePanel"));

uxHeaderUpdatePanel.Update();

I can add the uxRequestChange to the AsyncTrigger because it doesn't exist in the context when the page is loaded and because its in a grid, the ID will auto generate.

Any ideas?

General Discussions

answered on 15 May 2013

1 answer

49 views

Difference in upload control

Hi,

How radupload differ from radasyncupload?

Saravanan

Upload (Obsolete)

answered on 15 May 2013

2 answers

81 views

Tooltip inside a custom templated control, which itself is inside an UpdatePanel

Hello,

I have a templated server control, which is placed inside an ASP:UpdatePanel.
Inside this templated server control, I have placed a label/RadTooltip combination.

        <asp:UpdatePanel ID="pnl1" runat="server" UpdateMode="Conditional" >
            <ContentTemplate>

                <cc1:TemplatedControl ID="TemplatedControl1" runat="server">
                    <ContentTemplate>

                        <asp:Label runat="server" ID="Label1" Text="Click here for the toolip (Inside Custom Template, Inside UpdatePanel)" />

                        <telerik:RadToolTip ID="RadToolTip2" TargetControlID="Label1" runat="server">
                            <asp:Label ID="lblContent02" runat="server" Text="Test Tooltip inside Template" />
                       </telerik:RadToolTip>

                    </ContentTemplate>
                </cc1:TemplatedControl>

            </ContentTemplate>
        </asp:UpdatePanel>

The complete source code can be downloaded here (I was not allowed to attach a zip file):

http://dl.free.fr/v2CyhZhMQ

This is a very simple project which I created only to demonstrate the issue.

Now the issue appears after a partial postback. The Tooltip behaviour is lost after the ASP:UpdatePanel is refreshed.
I cannot figure out how I should modify my templated control so that the toolip behavior is kept. (In practise, the JS line $create(Telerik.Web.UI.RadToolTip, .... is not called, and I guess the JQuery object is not created).

- If the tooltip is outside of any templated control, it works fine
- If the tooltip is inside an UpdatePanel, it works fine, even after postback
- If the tooltip is inside a custom templated control, it works fine

So it is somehow the conjunction of both the templated server control and the updatepoanel which makes the RadTooltip go crazy.

I someone could take a quick look at this source code and tell me what I did wrong, I would be very grateful.
If I should submit the source by somne other mean, please tell me how to do so.

Best Regards,

Jérémie

ToolTip

answered on 15 May 2013

3 answers

144 views

Accessing Gridview Control From a RadDock using JavaScript

I have a gridview im using to populate a chart. I use javascript to access the gridview to provide the data for the chart. The gridview sits in the main content holder for an aspx page.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"

<asp:Panel ID="Panel3" runat="server"><br

>

            <

asp:GridView ID="MyGridView" runat="server" CssClass="GridViewStyle"

 

			GridLines="None" Width="100%" PageSize="100">

<AlternatingRowStyle CssClass="AltRowStyle" /><br

>

                	<

EditRowStyle CssClass="EditRowStyle"

/>

<EmptyDataRowStyle CssClass="EmptyRowStyle" /><br

> 

               		<

HeaderStyle CssClass="HeaderStyle" /><br

> 

               		<

PagerStyle CssClass="PagerStyle" /><br

>    

            		<

RowStyle CssClass="RowStyle" HorizontalAlign="Center" VerticalAlign="Middle"

/>

<SelectedRowStyle CssClass="SelectedRowStyle" /><br

> 

          	 </

asp:GridView

> 

</

asp:Panel

</asp:Content>

var rows = $("#MainContent_MyGridView tr:gt(0)");//This is where I reference the gridview now.

var series = {

id: 'series',

name: 'MySeriesName',

data: []

}

rows.each(function (index) {

var myFloat = parseFloat($("td:nth-child(2)", this).text());

var myString = $("td:nth-child(1)", this).text();

series.data.push([myString, myFloat]);

});

I looked into using the raddock control and having the chart and gridview both display within a dock but when I have the gridview Inside the dock I cannot access it from within my .js file to get the data.

<telerik:RadDockZone Runat="server">

        <telerik:RadDock ID="RadDock1" runat="server">                   

        <ContentTemplate>             

    <div id="ChartRendersHere" style="min-width: 400px; height: 400px; margin: 0 auto"></div>             

        <asp:Panel ID="Panel2" runat="server">

            <asp:GridView ID="MyGridView" runat="server" CssClass="GridViewStyle" 

                GridLines="None" Width="100%" PageSize="100">

                <AlternatingRowStyle CssClass="AltRowStyle" />

                <EditRowStyle CssClass="EditRowStyle" />

                <EmptyDataRowStyle CssClass="EmptyRowStyle" />

                <HeaderStyle CssClass="HeaderStyle" />

                <PagerStyle CssClass="PagerStyle" />

                <RowStyle CssClass="RowStyle" HorizontalAlign="Center" VerticalAlign="Middle" />

                <SelectedRowStyle CssClass="SelectedRowStyle" />

            </asp:GridView> <asp:Panel ID="Panel1" runat="server">            

            </asp:Panel>           

        </asp:Panel>  

        </ContentTemplate>

         </telerik:RadDock>

        </telerik:RadDockZone>

Could someone suggest a way to reference this control if possible?

Thanks

Dock

answered on 15 May 2013

1 answer

58 views

IE 10 Problem with RadEditor PdfExport

Hello,

There is a problem with IE 10 when exporting content to PDF. The problem is on your demo site too.

http://demos.telerik.com/aspnet-ajax/editor/examples/pdfexport/defaultcs.aspx

so it's probably not on my side as I tried on a different machine and it still gives the same problem.

When you try to export using IE10 you will get the name of the page i.e. "default.aspx" instead of name of PDF and then the download dialog will tell you it cant download that file.

This issue is not present on Firefox or Chrome or Opera. And it worked on IE 9.

Editor

answered on 15 May 2013

4 answers

1.1K+ views

NeedDataSource Event was not firing

When using the Dynamic Linq datasource option NeedDataSource Event was not firing, then the grid will display all records.

Grid

answered on 15 May 2013

1 answer

75 views

Multiple Scheduler for different User.

Hi,

I have a requirement to show the three scheduler in to a single page for three different user like from first drop-down i select a user and scheduler will display the appointment for that user and again in the same page second drop down will get a second scheduler. Is it possible with RadScheduler.

thanks
Niharika Singh

Scheduler

answered on 15 May 2013

1 answer

68 views

Style Row when Dragging

Is there a way to change the background color of a row only when it is being dragged?

Grid

answered on 15 May 2013

11 answers

494 views

[Solved] UserControl LoadTemplate() button click event not firing

Hi,

I'm trying to load a UserControl in a RadWindow. It gets displayed but the button click events do not get fired.

When doing the exact same thing with a RadDock, the button click event in the UserControl gets call as expected. Here is the code used to load the UserControl (largely inspired from this thread).

Can you tell me what is wrong ? Why is the Button click event not callled with the RadWindow, but called with the RadDock ?

Thanks,

Dominic.

Default.aspx:

    
            <%@ Page Language="C#" AutoEventWireup="false" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
               <title></title> 
        
            </head> 
        
            <body> 
        
               <form id="form1" runat="server"> 
        
               <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
        
               <telerik:RadWindowManager ID="RadWindowManager1" ShowContentDuringLoad="true" VisibleStatusbar="false" runat="server" /> 
        
               <telerik:RadDockLayout runat="server" ID="RadDockLayout1"> 
        
                  <telerik:RadDockZone runat="server" ID="RadDockZone1" Width="300" MinHeight="200" /> 
        
               </telerik:RadDockLayout> 
        
               </form> 
        
            </body> 
        
            </html>

Default.aspx.cs

    
                  void Page_Init(object sender, EventArgs e) 
        
                  { 
        
                     this.EnableViewState = false; 
        
                     RadWindow RadWindow1 = new RadWindow(); 
        
                     RadWindow1.ID = "RadWindow1";   
        
                     RadWindow1.VisibleOnPageLoad = true; 
        
                     RadWindow1.ContentTemplate = new TestTemplate(Page); 
        
                     RadWindowManager1.Windows.Add(RadWindow1); 
        
                     RadDock RadDock1 = new RadDock ();   
        
                     RadDock1.Text = RadDock1.ID = "RadDock1";   
        
                     RadDock1.ContentTemplate = new TestTemplate(this.Page); 
        
                     RadDockZone1.Controls.Add(RadDock1); 
        
                  } 
        
               } 
        
               internal class TestTemplate : ITemplate 
        
               { 
        
                  private Page _page; 
        
                  public TestTemplate(Page page) 
        
                  { 
        
                     _page = page; 
        
                  } 
        
                  public void InstantiateIn(Control container) 
        
                  { 
        
                     System.Web.UI.UserControl userControl; 
        
                     userControl = (System.Web.UI.UserControl)_page.LoadControl("~/TestControl.ascx"); 
        
                     container.Controls.Add(userControl); 
        
                  } 
        
               }

TestControl.ascx

    
            <%@ Control Language="C#" AutoEventWireup="false" CodeBehind="TestControl.ascx.cs" Inherits="WebApplication1.TestControl" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            User control used as template with button events. 
        
            <div> 
        
               <asp:Button ID="btn1" runat="server" Text="Button with tooltip" ToolTip="Hello World" /> 
        
               <asp:Button ID="btn2" runat="server" Text="Button" /> 
        
            </div> 
        
            <p><asp:Literal ID="ltrl" runat="server" /></p> 
        
            <telerik:RadToolTipManager ID="rttm" runat="server" AutoTooltipify="true" />

TestControl.ascx.cs :

    
               public partial class TestControl : System.Web.UI.UserControl 
        
               { 
        
                  override protected void OnInit(EventArgs e) 
        
                  { 
        
                     base.OnInit(e); 
        
                     btn1.Click += new EventHandler(btn1_Click); 
        
                     btn2.Click += new EventHandler(btn2_Click); 
        
                  } 
        
                  void btn1_Click(object sender, EventArgs e) 
        
                  { 
        
                     ltrl.Text = "Button 1 was clicked"; 
        
                  } 
        
                  protected void btn2_Click(object sender, EventArgs e) 
        
                  { 
        
                     ltrl.Text = "Button 2 was clicked"; 
        
                  } 
        
               }

Window

answered on 15 May 2013