Questions on UI for ASP.NET AJAX Forum

5 answers

141 views

Column header semi-transparent hover effect

Hi All,

I've just implemented column reorder support in my grid by following this example Grid Reorder example.
In the example, whenever you re-order column by draggeding the column header, it displays a hover effect with semi-transparent view.
My problem is that the re-order works great but I don't get the hover effect.

Any ideas??

Regards,
Tzach.

Grid

answered on 21 May 2009

4 answers

263 views

[Solved] Rad Ajax Manager, Rad Ajax Manager Proxy and User Control. Ajaxification occurs alternatively

Hi,

I have a page with a user control and rad ajax manager proxy as shown in the code.

The rad ajax manager is configured to update the whole panel.

    
              <form id="form1" runat="server"> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                    </telerik:RadScriptManager> 
        
                    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
        
                        <AjaxSettings> 
        
                            <telerik:AjaxSetting AjaxControlID="Panel1"> 
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                        </AjaxSettings> 
        
                    </telerik:RadAjaxManager> 
        
                    <div> 
        
                        <asp:Panel ID="Panel1" runat="server" Width="100%" Height="100%"> 
        
                            <uc1:WebUserControl ID="WebUserControl1" runat="server"/> 
        
                            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> 
        
                        </asp:Panel> 
        
                        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="100%" 
        
                            Width="100%"> 
        
                            <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' 
        
                                style="border: 0px;" /> 
        
                        </telerik:RadAjaxLoadingPanel> 
        
                    </div> 
        
                </form>

my user control is like

    
            <div> 
        
                <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server"> 
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="Button1"> 
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="RadComboBox2" LoadingPanelID="RadAjaxLoadingPanel1" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                </telerik:RadAjaxManagerProxy> 
        
                <div> 
        
                    <table> 
        
                        <tr> 
        
                            <td> 
        
                                <telerik:RadComboBox ID="RadComboBox1" runat="server"> 
        
                                    <ItemTemplate> 
        
                                        <asp:CheckBox ID="chkbxSalesRep" runat="server" EnableViewState="true" Text="abc" /> 
        
                                    </ItemTemplate> 
        
                                    <CollapseAnimation Duration="200" Type="OutQuint" /> 
        
                                    <FooterTemplate> 
        
                                        <table> 
        
                                            <tr> 
        
                                                <td> 
        
                                                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /></td> 
        
                                            </tr> 
        
                                        </table> 
        
                                    </FooterTemplate> 
        
                                </telerik:RadComboBox> 
        
                            </td> 
        
                            <td> 
        
                                <telerik:RadComboBox ID="RadComboBox2" runat="server"> 
        
                                    <ItemTemplate> 
        
                                        <asp:CheckBox ID="chkbxSalesRep" runat="server" EnableViewState="true" Text="abc" /> 
        
                                    </ItemTemplate> 
        
                                    <CollapseAnimation Duration="200" Type="OutQuint" /> 
        
                                    <Items> 
        
                                        <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1" Value="RadComboBoxItem1" /> 
        
                                        <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2" Value="RadComboBoxItem2" /> 
        
                                        <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3" Value="RadComboBoxItem3" /> 
        
                                        <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem4" Value="RadComboBoxItem4" /> 
        
                                        <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem5" Value="RadComboBoxItem5" /> 
        
                                        <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem6" Value="RadComboBoxItem6" /> 
        
                                    </Items> 
        
                                </telerik:RadComboBox> 
        
                            </td> 
        
                        </tr> 
        
                        <tr> 
        
                        <td colspan="2"><asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" /></td> 
        
                        </tr> 
        
                    </table> 
        
                </div> 
        
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="100%" 
        
                    Width="100%"> 
        
                    <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' 
        
                        style="border: 0px;" /> 
        
                </telerik:RadAjaxLoadingPanel> 
        
            </div>

User control consists of two combo boxes: one with a button in the footer. On the click of button in the footer i wish to update the second combo box.

It also has a button. On the button click i wish to update the whole asp panel of the content page. so i have created a event which updates the whole desired controls. All this works fine.

But when button in the footer of the combo box is clicked the page postbacks alternatively. ie On first click partial post back(ajaxified) and on the other click full post back (no ajaxification). this continues to happen alternately.

Please let me know how should i attain this, or where have i made the mistake.

I also copied the cs code here (though it contains no logic), if it can help you.

    
            //     web user control 
        
            public partial class WebUserControl : System.Web.UI.UserControl 
        
            { 
        
                protected void Page_Load(object sender, EventArgs e) 
        
                { 
        
                } 
        
                protected void Button1_Click(object sender, EventArgs e) 
        
                { 
        
                } 
        
                protected void Button2_Click(object sender, EventArgs e) 
        
                { 
        
                } 
        
            } 
        
            // the page 
        
            public partial class _Default : System.Web.UI.Page  
        
            { 
        
                protected void Page_Load(object sender, EventArgs e) 
        
                { 
        
                } 
        
            }

Ajax

answered on 21 May 2009

3 answers

124 views

[Solved] Grab nth recurrence info

Is there a function that can be used to grab the info for the nth occurrence of a recurring appointment...I guess, mainly the date/time info.

Scheduler

answered on 21 May 2009

1 answer

141 views

hierarchy bind to ObjectDatasource

RadGrid hierarchy is a very nice feature, but very little is explained in all the documents. An example is provided with Sqldatasource by setting the MasterField and DetailField and maintain a link by a select parameter like this:
            <SelectParameters>
                <asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="string" />
            </SelectParameters>
the magic is that this SessionField does not need to be updated by any code after row change, server side or client side. Maybe there's embeded special treatment for Sqldatasource ? I used an ObjectDatasouce as the datasource and how could I get the current MasterField value during the OnSelecting event of ObjectDatasource ? One solution could be getting the current row in the masterview during OnHierarchyExpanding event and save it for selecting parameter of the childview. This way only one level of the master-detail hierarchy can be maintained (OnHierarchyExpanding event only attach to the MasterView). When tried to implement this fix I found out that OnHierarchyExpanding client event never fired off, is this a problem or something extra must be done to enable it besides setting the client event handler like this:
            <ClientEvents OnHierarchyCollapsing="OnHierarchyExpanding" />
I would be much appreciated if anyone could help me out here!!!

Grid

answered on 21 May 2009

5 answers

220 views

[Solved] Unskinned Date Picker Textbox

I really like the date picker control, but the web site that I'm putting it on uses all standard html input textboxes and buttons. When I add this control with the rest of the controls, my form looks like it is wearing a suit with sneakers. The 2 styles just don't merge well.

Is there any simple way to set the date picker to look like a standard <input type="text" /> html control?

I have been through the skins, and can't find one that supports the look I need.

Calendar

answered on 21 May 2009

3 answers

259 views

[Solved] how to add image to node?

Hello,

I would like to add an image to all the nodes of a treeview. Between the Plus-Minus image (to extend and reduce the tree) and the text.

how can I do it?

Thank you in advance.

Patxi.

TreeView

answered on 21 May 2009

6 answers

263 views

[Solved] RadToolTipManager problems with radgrid

I have a radgrid with paging that is totally populated by a SqlDataSource. I want to have each row of the grid show a tooltip with dynamic content on mouseover.

Here is my rad grid:

    
            <radT:RadGrid ID="table" Skin="WebBlue" GridLines="Both" AllowPaging="true"   
        
            EnableEmbeddedSkins="false" OnPreRender="HighlightRows" PageSize="15" runat="server">  
        
            <MasterTableView Width="100%" ClientDataKeyNames="ID,Question" ></MasterTableView>  
        
            <PagerStyle Mode="NextPrevAndNumeric" PagerTextFormat="Change page: {4} | Displaying page {0} of {1}, questions {2} to {3} of {5}" >  
        
            </PagerStyle>  
        
            <ClientSettings>  
        
            <Selecting AllowRowSelect="True" />  
        
            <ClientEvents OnRowContextMenu="RowContextMenu" OnRowSelected="ModifyHeader" OnRowMouseOver="test" />  
        
            </ClientSettings>  
        
            </radT:RadGrid>

here is how i defined the radtooltipmanager:

    
            <radT:RadToolTipManager ID="RadToolTipManager1" runat="server" OnAjaxUpdate="RadToolTipManager1_AjaxUpdate" 
        
            RelativeTo="Mouse" Position="BottomLeft" AutoTooltipify="false"   
        
            Title="Question Preview" ManualClose="true" ShowEvent="OnClick">  
        
            </radT:RadToolTipManager>

My first problem is that I could not get it to work with individual rows here is how i added the rows in the code behind:

    
            foreach (Telerik.Web.UI.GridDataItem gdi in table.Items)  
        
            {  
        
            RadToolTipManager1.TargetControls.Add(gdi.ClientID, true);  
        
            }

with this setup the . OnAjaxUpdate event does not fire.

I then tried just adding the whole rad grid to the tooltip manager with this:
<TargetControls><radT:ToolTipTargetControl TargetControlID="table" /></TargetControls>

The problem I had with this is that the OnAjaxUpdate event only fires and the tooltip shows after the table first does an event that causes a postback such as if I change the page index or have ClientSettings-EnablePostBackOnRowClick enabled and do a postback.

Can anyone tell me what I am doing wrong? I do not think I have the latest versions of the controls (I think I have RadControls for ASPNET AJAX Q1 2008), and will have to contact someone else apout updateing. Is this caused from a bug in the control or something I am doing wrong?

Grid

answered on 21 May 2009

1 answer

203 views

The state information is invalid for this page and might be corrupted.

Hi People,
I have two queries to clarrify.
A) I have used the Rad scheduler on my client page".aspx" which refers to a master page.
While clicking any link in the scheduler am getting an error called
"The state information is invalid for this page and might be corrupted."
Can you please help me to solve this problem.
B)How to modify the skin of the Rad scheduler in accordance with the sharepoint cardinal theme

Awaiting for your reply
Thanks
Regards
N.Balaji

Scheduler

answered on 21 May 2009

1 answer

290 views

client-side RadToolTip set_Position() problem

    I'm currently having a problem using the RadToolTip (not the manager). When I create my tooltip on the server, I assign the 'OnClientBeforeShow' property to a client side function. This function will then call the 'set_Position()' function of the client-side API.

    However, there seems to be some problem with doing this here... The only way the client-side code has any effect on the tooltip position is if I apply an animation to it. However, I would like to show the tooltip w/o animation. Example:
    If I put a 'fade' animation on the tooltip, the tooltip will show (fading in), center itself, then go to the bottom-right position. This   appears very jumpy. It seems like the 'fade' animation also does not take into account the default position set on the server-side. It seems like the position is set after a lot of other things have taken place.

Thanks

Here is the server and client side code:

Server-side code:

    
            Me.EnableEmbeddedSkins = False   
        
            Me.Animation = Telerik.Web.UI.ToolTipAnimation.None   
        
            Me.ContentScrolling = Telerik.Web.UI.ToolTipScrolling.None   
        
            Me.HideDelay = 5000   
        
            Me.Position = Telerik.Web.UI.ToolTipPosition.BottomRight   
        
            Me.RelativeTo = Telerik.Web.UI.ToolTipRelativeDisplay.Element   
        
            Me.ShowDelay = 350   
        
            Me.ShowCallout = False   
        
            Me.Sticky = True   
        
            Me.HideEvent = Telerik.Web.UI.ToolTipHideEvent.LeaveToolTip   
        
            Me.OnClientBeforeShow = "Tooltip_OnBeforeShow" 
        
            Client-side:  
        
            function Tooltip_OnBeforeShow(sender, eventArgs) {   
        
            var intPosition, intWidth, intHeight;   
        
            intHeight = document.body.offsetHeight;  
        
            intWidth = document.body.offsetWidth;  
        
            if (sender._mouseY <= (intHeight / 3))   
        
            {  
        
              intPosition = 30;  
        
            }  
        
            else if ((sender._mouseY <= (intHeight / 3) * 2))   
        
            {  
        
              intPosition = 20;  
        
            }  
        
            else if ((sender._mouseY > (intHeight / 3) * 2))   
        
            {  
        
              intPosition = 10;  
        
            }  
        
            if (sender._mouseX <= (intWidth / 2))   
        
            {  
        
              intPosition += 3;  
        
            }  
        
            else if (sender._mouseX > (intWidth / 2))   
        
            {  
        
              intPosition += 1;  
        
            }  
        
            sender.set_position(intPosition);   
        
            }

ToolTip

answered on 21 May 2009

2 answers

115 views

[Solved] After Adding Form Decorator Controls do not render

I have laid out a simple form as and example.

    
            <form id="form1" runat="server">  
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                    </telerik:RadScriptManager> 
        
                    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" /> 
        
                    <div> 
        
                        <table class="myTable">  
        
                            <!-- Date & Time Call Received --> 
        
                            <tr> 
        
                                <th class="inputLabel">  
        
                                    <asp:Label ID="lblCallReceivedDate" CssClass="inputLabel" runat="server" Text="Call received:" 
        
                                        ToolTip="Date and time the call was received"></asp:Label> 
        
                                </th> 
        
                                <td class="input">  
        
                                    <telerik:RadDateTimePicker ID="dpCallReceived" runat="server" Skin="Office2007" ToolTip="Date and time the call was received">  
        
                                        <TimePopupButton HoverImageUrl="" ImageUrl="" /> 
        
                                        <TimeView CellSpacing="-1" Culture="English (United Kingdom)">  
        
                                        </TimeView> 
        
                                        <Calendar Skin="Office2007" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" 
        
                                            ViewSelectorText="x">  
        
                                        </Calendar> 
        
                                        <DatePopupButton HoverImageUrl="" ImageUrl="" /> 
        
                                    </telerik:RadDateTimePicker> 
        
                                </td> 
        
                            </tr> 
        
                            <!-- Received from (Stakeholder) --> 
        
                            <tr> 
        
                                <th class="inputLabel">  
        
                                    <asp:Label ID="lblAnonymous" CssClass="inputLabel" runat="server" Text="Anonymous:" 
        
                                        ToolTip="Check this box if caller's identity is unknown"></asp:Label> 
        
                                </th> 
        
                                <td class="input">  
        
                                    <asp:CheckBox ID="chkAnonymous" runat="server" ToolTip="Check this box if caller's identity is unknown" 
        
                                        Text="&nbsp;" /> 
        
                                </td> 
        
                            </tr> 
        
                            <tr> 
        
                                <th class="inputLabel">  
        
                                    <asp:Label ID="lblCaller" CssClass="inputLabel" runat="server" Text="Caller:" ToolTip="Person/organisation who reported the incident"></asp:Label>&nbsp;  
        
                                </th> 
        
                                <td class="input">  
        
                                    <asp:Label ID="lblAnon" runat="server" Text="Anonymous"></asp:Label> 
        
                                </td> 
        
                            </tr> 
        
                        </table> 
        
                    </div> 
        
                </form>

Strangely the DateTime Picker and the checkbox do not render at runtime.

Any suggestions as to why?

Regards

FormDecorator

answered on 21 May 2009