Questions on UI for ASP.NET AJAX Forum

9 answers

401 views

Hey there

I was looking at the alert, prompt and confirm functionality of RAD window. I am having couple of questions regarding the this.

1. Can I change the buttons alignment to center as the alert buttons are left aligned.

2. Can I change the alert and confirm images from alert and confirm dialogue box.

Thank you,

- Deepak

Window

answered on 18 May 2009

8 answers

150 views

Big Window outside a Small Window

I have a parent page that opens a modal small window. In the modal small window i have a search button where user can search. I want to pop up another window for the search. The problem is the search pop up window is inside the small modal window. I want it out like in this demo:

http://demos.telerik.com/aspnet-ajax/window/examples/dialogreturnvalue/defaultcs.aspx

but i want the window to be modal.

also i would like to see how the second window "The Eruption" showed the other window.

Window

answered on 18 May 2009

7 answers

136 views

[Solved] Localizing Rad Grids

Hi,

We are using several grids in our application and we support multi languages. we use resx files to localize our application.

Is there a way to localize all the grids (tooltips and any other telerik strings) at the same place/time and not set each parameter separately?

Thanks!

Ruth.

Grid

answered on 18 May 2009

1 answer

90 views

Need ItemClicked Example for Rotator

I have the ad rotator on the site but I am wanting to be able to track the clicks that happen.
I see that there is a ItemClicked Event but I am not sure how to retrieve the info I need to make this work.

    
                                                <telerik:RadRotator ID="AdRotate" runat="server" AutoPostBack="True" RotatorType="AutomaticAdvance" FrameDuration="3000" DataSourceID="SQLRotate" 
        
                                                    ScrollDirection="Up" Skin="Web20" Width="500px" Height="325px" OnItemClick="AdRotate_OnItemClick">  
        
                                                    <Items> 
        
                                                    <telerik:RadRotatorItem> 
        
                                                        <ItemTemplate> 
        
                                                        <table width="500" border="0" style="height:325px;" cellspacing="0" cellpadding="0">  
        
                                                            <tr> 
        
                                                                <td colspan="2">  
        
                                                                    <p> 
        
                                                                        <b><%# Eval("Title") %></b></p> 
        
                                                                    <p> 
        
                                                                        <%# Eval("Body") %></p>  
        
                                                                </td> 
        
                                                            </tr> 
        
                                                            <tr> 
        
                                                                <td> 
        
                                                                <div style="width:500px">  
        
                                                                    <div style="width:262px; margin-left:0px;">  
        
                                                                        <strong>Contact: <%# Eval("ContactName") %></strong><br /> 
        
                                                                        <strong><%# Eval("ContactNumber") %></strong><br /> 
        
                                                                        <strong><a href="<%# Eval("ContactWebAddress") %>"><%# Eval("ContactWebAddress") %></a></strong></div>  
        
                                                                <div style="width:235px; margin-left:265px; position:relative; margin-top:-65px;">  
        
                                                                <img src="<%# Eval("LogoAddress") %>" height="80px" width="235px" alt="Sigma Financial Corporation" /> 
        
                                                                    <asp:Image ID="logo" runat="server" Visible="false" Height="71px" Width="192px" /></div>  
        
                                                                </div> 
        
                                                                </td> 
        
                                                            </tr> 
        
                                                            <tr> 
        
                                                            <td colspan="2"><hr></hr></td> 
        
                                                            </tr> 
        
                                                        </table> 
        
                                                    </ItemTemplate> 
        
                                                    </telerik:RadRotatorItem> 
        
                                                    </Items> 
        
                                                </telerik:RadRotator> 
        
                                                <asp:SqlDataSource ID="SQLRotate" runat="server" ConnectionString="<%$ ConnectionStrings:BROKERConnectionString %>" 
        
                                                    SelectCommand="SELECT [Title], [Body], [ContactName], [ContactNumber], [ContactWebAddress], [LogoAddress], [Link], [ind] FROM [AdList]">  
        
                                                </asp:SqlDataSource>

Can someone help out with suggestions for the codebehind?

If I can get the "Link" Value that would be great it would be simple from there but same with getting the "ind" value would be just as good

Rotator

answered on 18 May 2009

1 answer

93 views

Rotator forces a gradiant due to filter

I have a division that holds my rotator. That division has a background image that is 1px semi transparent png file that repeats. When the page is initially loaded everything looks fine, however when a scroll is performed by clicking on a button the background develops a gradient on x and y.

After some investigating and inspecting i saw that rrItemList has a filter css, i tried setting explicitly that class to filter: none and that made it worse - causes the gradient to be there even on initial load. Here is my front end:
Css

    
            #pnlPhotoStrip  
        
            {  
        
            margin-top: -62px;  
        
            background-image: url(images/bgrndTransparentDark.png);  
        
            background-repeat:repeat;  
        
            background-color:Transparent;  
        
            position:relative;  
        
            width:608px;  
        
            height:62px;  
        
            z-index:1000;  
        
            filter: none!important;  
        
            }  
        
            .outerSpan  
        
                    {  
        
                        margin: 5px 4px 5px 4px;  
        
                        border: solid 1px #8a846c;  
        
                    }  
        
                    .outerSpan img  
        
                    {  
        
                        display: block;  
        
                    }

    
            <div id="pnlPhotoStrip">  
        
                    <table border="0" cellpadding="0" style="width:608px;" cellspacing="0" class="tableWrapper">  
        
                        <tr> 
        
                            <td> 
        
                                <asp:Image ID="imgLeftArrow" AlternateText="left" runat="server" ImageUrl="images/btnLeft.png" /> 
        
                            </td> 
        
                            <td> 
        
                                <telerik:RadRotator ID="thumbRotator" Skin="Black" runat="server" RotatorType="Buttons" 
        
                                    Width="550px" Height="62px" ItemHeight="62px" FrameDuration="1" OnItemClick="ShowImage" 
        
                                    ScrollDuration="1">  
        
                                    <ItemTemplate> 
        
                                        <div class="outerSpan">  
        
                                            <asp:Image ID="imgItem" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "imagefile") %>' 
        
                                                CssClass="RotatorImage" AlternateText='<%# DataBinder.Eval(Container.DataItem, "Caption")%>' 
        
                                                runat="server" /> 
        
                                        </div> 
        
                                    </ItemTemplate> 
        
                                    <ControlButtons LeftButtonID="imgLeftArrow" RightButtonID="imgRightArrow" /> 
        
                                </telerik:RadRotator> 
        
                            </td> 
        
                            <td> 
        
                                <asp:Image ID="imgRightArrow" AlternateText="right"  runat="server" ImageUrl="images/btnRight.png" /> 
        
                            </td> 
        
                        </tr> 
        
                    </table> 
        
                </div>

I need that background to be the same opacity in the entire div.I tried:
- changing the skin even disabling the embedded skins - no luck.
- creating another div to have the background image and overlaying the pnlPhotoStrip on top of it with margin:0; and higher z-index - no luck,
- looking at the skins css to find where that filter is being set- couldn't find the class.
- filter: none for .rrItemsList didn't help at all even with !important and I verified that it is using the infile stylesheet call to that css block by adding a border to it and that showed.

The gradient is the entire 608px x 62px which is the width / height of pnlPhotoStrip even though the rotator is smaller.

Any suggestions how i can fix this?

PS using asp.net with ajax version 2009 q1

Rotator

answered on 18 May 2009

2 answers

111 views

[Solved] Can I resize the InlineInsertTemplate ?

I want to bigger InlineInsertTemplate but when I use bigger size it interpenetrate.

Let's say I use table whose width = 400px and height=300px

Can I use bigger form in InlineInsertTemplate ? or I must use AdvancedInsertTemplate ?

Thanks

Burak ALTIN

www.poldy.com.tr

Scheduler

answered on 18 May 2009

5 answers

349 views

Matching parent row color in hierarchy

I'm using hierarchy to display course information, each row can be expanded to show a nested row of data for the course description. Functionally it looks great. Aesthetically I know the users are going to complain as the main grid rows alternate, but the nested rows are always the same color. They are always the the first color of whatever skin I'm using as there is only one row in each nested grid.

Is there an easy way to make the expanding row background match the color of it's parent row? This would be useful as it would make the data for each course look contained.

    
            <telerik:RadPageView ID="Elective" runat="server"> 
        
                    <telerik:RadGrid ID="GridElective" runat="server" Skin="WebBlue" AutoGenerateColumns="false" PageSize="20" AllowPaging="True" AllowSorting="true"> 
        
                        <MasterTableView DataKeyNames="CRN"> 
        
                            <DetailTables> 
        
                                <telerik:GridTableView DataKeyNames="CRN" ShowHeader="false" BorderWidth="0" AllowPaging="false"> 
        
                                    <ParentTableRelation> 
        
                                        <telerik:GridRelationFields DetailKeyField="CRN" MasterKeyField="CRN" /> 
        
                                    </ParentTableRelation> 
        
                                    <Columns> 
        
                                        <telerik:GridBoundColumn HeaderText = "CRN" DataField = "CRN" Visible="false"/> 
        
                                        <telerik:GridBoundColumn HeaderText = "Description" DataField = "Description"/> 
        
                                    </Columns> 
        
                                </telerik:GridTableView> 
        
                            </DetailTables> 
        
                            <Columns> 
        
                                <telerik:GridBoundColumn HeaderText = "CRN" DataField = "CRN" Visible="false"/> 
        
                                <telerik:GridBoundColumn HeaderText = "Course" DataField = "Course"/> 
        
                                <telerik:GridBoundColumn HeaderText = "Section" DataField = "Section" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"/> 
        
                                <telerik:GridBoundColumn HeaderText = "Title" DataField = "Title"/> 
        
                                <telerik:GridHyperLinkColumn HeaderText = "Syllabus" DataNavigateUrlFields="Syllabus" Text="<img src='pdf-icon_sm.png' alt='Download' border='0'/>" Target="_blank" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"/> 
        
                                <telerik:GridBoundColumn HeaderText = "Session" DataField = "Session" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"/> 
        
                                <telerik:GridBoundColumn HeaderText = "Professor(s)" DataField = "Professor(s)"/> 
        
                                <telerik:GridBoundColumn HeaderText = "Units" DataField = "Units" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"/> 
        
                                <telerik:GridBoundColumn HeaderText = "Schedule" DataField = "Schedule"/> 
        
                                <telerik:GridBoundColumn HeaderText = "Specialization" DataField = "Specialization"/> 
        
                            </Columns> 
        
                        </MasterTableView> 
        
                        <SortingSettings SortedBackColor="Azure"/> 
        
                        <PagerStyle Mode="NextPrevNumericAndAdvanced" AlwaysVisible="true" ></PagerStyle> 
        
                    </telerik:RadGrid>

Grid

answered on 18 May 2009

3 answers

117 views

[Solved] Custom PagerTemplate and ChangePageSizeComboHandler

I have created a custom PagerTemplate. I have done this because none of the inbuilt pager modes suited me.

My issue is with the radcombo I have put in the pager to deal with the page size. I have wired it up as follows:

                    comboBox.OnClientSelectedIndexChanged = "Telerik.Web.UI.Grid.ChangePageSizeComboHandler";         

This works well and fires the following code from gridcommon.js:

                    Telerik.Web.UI.Grid.ChangePageSizeComboHandler = function (sender, args)         
            {         
                if(args.get_item())         
                {             
                    var ownerTableViewId = args.get_item().get_attributes().getAttribute("ownerTableViewId");             
                    var newPageSize = null;         
                          
                    if(sender.get_text())         
                    {         
                        newPageSize = sender.get_text();         
                    }         
                             
                    if(ownerTableViewId && newPageSize)         
                    {         
                        var value = parseInt(newPageSize);         
                        var tableView = $find(ownerTableViewId);         
                        if(tableView)         
                        {         
                            tableView.set_pageSize(value);         
                        }         
                    }         
                }         
            };         

This too works well. My issue is that I want to have the following page sizes:

Text Value

10 10

20 20
50 50
All 9999999

The javascript code above does not work with "All" as it takes the text value rather than the "value" value. I am able to put the following code in the bottom of my page to resolve this issue:

                             Telerik.Web.UI.Grid.ChangePageSizeComboHandler = function(sender, args) {         
                        if (args.get_item()) {         
                            var ownerTableViewId = args.get_item().get_attributes().getAttribute("ownerTableViewId");         
                            var newPageSize = null;         
                     
                            if (sender.get_text()) {         
                                newPageSize = sender.get_value(); <------------ CHANGES HERE        
                            }         
                     
                            if (ownerTableViewId && newPageSize) {         
                                var value = parseInt(newPageSize);         
                                var tableView = $find(ownerTableViewId);         
                                if (tableView) {         
                                    tableView.set_pageSize(value);         
                                }         
                            }         
                        }         
                    };         

Notice the change here.

I am not sure if this is a bug - but i suspect it is.

thanks,

Grid

answered on 18 May 2009

1 answer

74 views

Focus on RadEditor (ajax q1 2009)

I have RadEditor (ajax) and submit button along with other asp.net controls. In c# if I do btnSubmit.Focus() it works. But it does not work for editor. How can I make it work for editor?

Editor

answered on 18 May 2009

2 answers

198 views

Telerik and Azure

Hi guys,

I followed the tutorial to use telerik and Windows Azure on http://tv.telerik.com/aspnet/video/getting_started_with_radcontrols_azure & http://tv.telerik.com/aspnet/video/deploying_azure_cloud.

The solution works locally but when I want to deploy it on Azure it doesn't work.
I can't realy explain, please take a look at http://sharedfood.cloudapp.net/ ( It's a RadMenu component)

Can anybody help me resolving this problem ?

I tried on Windows 7 RC and Windows Server 2008.

Thanks in advance.

General Discussions

answered on 18 May 2009

	<telerik:RadRotator ID="AdRotate" runat="server" AutoPostBack="True" RotatorType="AutomaticAdvance" FrameDuration="3000" DataSourceID="SQLRotate"
	ScrollDirection="Up" Skin="Web20" Width="500px" Height="325px" OnItemClick="AdRotate_OnItemClick">
	<Items>
	<telerik:RadRotatorItem>
	<ItemTemplate>
	<table width="500" border="0" style="height:325px;" cellspacing="0" cellpadding="0">
	<tr>
	<td colspan="2">
	<p>
	<b><%# Eval("Title") %></b></p>
	<p>
	<%# Eval("Body") %></p>
	</td>
	</tr>
	<tr>
	<td>
	<div style="width:500px">
	<div style="width:262px; margin-left:0px;">
	<strong>Contact: <%# Eval("ContactName") %></strong><br />
	<strong><%# Eval("ContactNumber") %></strong><br />
	<strong><a href="<%# Eval("ContactWebAddress") %>"><%# Eval("ContactWebAddress") %></a></strong></div>
	<div style="width:235px; margin-left:265px; position:relative; margin-top:-65px;">
	<img src="<%# Eval("LogoAddress") %>" height="80px" width="235px" alt="Sigma Financial Corporation" />
	<asp:Image ID="logo" runat="server" Visible="false" Height="71px" Width="192px" /></div>
	</div>
	</td>
	</tr>
	<tr>
	<td colspan="2"><hr></hr></td>
	</tr>
	</table>

	</ItemTemplate>
	</telerik:RadRotatorItem>
	</Items>

	</telerik:RadRotator>
	<asp:SqlDataSource ID="SQLRotate" runat="server" ConnectionString="<%$ ConnectionStrings:BROKERConnectionString %>"
	SelectCommand="SELECT [Title], [Body], [ContactName], [ContactNumber], [ContactWebAddress], [LogoAddress], [Link], [ind] FROM [AdList]">
	</asp:SqlDataSource>

	#pnlPhotoStrip

	{

	margin-top: -62px;

	background-image: url(images/bgrndTransparentDark.png);

	background-repeat:repeat;

	background-color:Transparent;

	position:relative;

	width:608px;

	height:62px;

	z-index:1000;

	filter: none!important;

	}
	.outerSpan
	{
	margin: 5px 4px 5px 4px;
	border: solid 1px #8a846c;
	}
	.outerSpan img
	{
	display: block;
	}

	<div id="pnlPhotoStrip">
	<table border="0" cellpadding="0" style="width:608px;" cellspacing="0" class="tableWrapper">
	<tr>
	<td>
	<asp:Image ID="imgLeftArrow" AlternateText="left" runat="server" ImageUrl="images/btnLeft.png" />
	</td>
	<td>
	<telerik:RadRotator ID="thumbRotator" Skin="Black" runat="server" RotatorType="Buttons"
	Width="550px" Height="62px" ItemHeight="62px" FrameDuration="1" OnItemClick="ShowImage"
	ScrollDuration="1">
	<ItemTemplate>
	<div class="outerSpan">
	<asp:Image ID="imgItem" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "imagefile") %>'
	CssClass="RotatorImage" AlternateText='<%# DataBinder.Eval(Container.DataItem, "Caption")%>'
	runat="server" />
	</div>
	</ItemTemplate>
	<ControlButtons LeftButtonID="imgLeftArrow" RightButtonID="imgRightArrow" />
	</telerik:RadRotator>
	</td>
	<td>
	<asp:Image ID="imgRightArrow" AlternateText="right" runat="server" ImageUrl="images/btnRight.png" />
	</td>
	</tr>
	</table>
	</div>