Questions on UI for ASP.NET AJAX Forum

3 answers

314 views

Adding RadToolTip to Appointment client-side

Dear Telerik,

This example shows how to add a Tooltip to an appointment, and this example shows how to add a RadToolTip by making use of the Client-side API. Would it be possible to combine these two examples so I can add a RadToolTip to my Appointments by making use of the client-side API? And how would I do that?

Thanks in advance!

Scheduler

answered on 17 Sep 2009

10 answers

311 views

[Solved] "scrollIntoView" in client-side dynamically created tabs issue

Hi!

Complicated title, but is what it is. I'm creating tabs from client side that when pass the visible area area scrollable. The problem is that from the 2nd time towards, the same event for a particular tab (e.g., button event) should select the corresponding tab previously dynamically created in the client side and show the tab. I can easily select and show the content of the chosen tab by an exterior event, but it looks that using the scrollIntoView() method is messing all up.

My results, when selecting a tab from a client event of a button, for instance, where (with some variations):
IE8:
The tabs is selected, but the tab bar goes to a look-like random position (sometimes the selected tab is not in the visible part).

IE8 with compatibility mode to IE7:
When selecting a non-visible at the moment tab, only on the right of the visible area, the tab bar don't scroll to the selected one be visible.

FF:
Like IE8, all messed up.

The code:

    
            <head runat="server"> 
        
                <title></title> 
        
                <script type="text/javascript"> 
        
                    function SelecTabIndex(_index) { 
        
                        var _rts = $find("RadTabStrip1"); 
        
                        var _tab = _rts.get_tabs().getTab(_index); 
        
                        _tab.scrollIntoView(); 
        
                        _tab.select(); 
        
                    } 
        
                    function CreateDynamicTabs() { 
        
                        var names = new Array("Advanced", "Automatic Updates", "Remote", "General", "Computer Name", "Hardware", "System Restore"); 
        
                        var _rts = $find("RadTabStrip1"); 
        
                        if (!_rts) 
        
                            _rts = RadTabStrip1; 
        
                        var _tab; 
        
                        for (x in names) { 
        
                            _tab = new Telerik.Web.UI.RadTab(); 
        
                            _tab.set_text(names[x]); 
        
                            _rts.get_tabs().add(_tab); 
        
                        } 
        
                        _tab.select(); 
        
                        _rts._resize(); // to make the scroll buttons appear 
        
                        return; 
        
                    } 
        
                </script> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                </telerik:RadScriptManager> 
        
                <div> 
        
                    <input id="Button8" type="button" value="Create Dynamic Tabs" onclick="CreateDynamicTabs()"/><br /> 
        
                    <input id="Button1" type="button" value="Advanced" onclick="SelecTabIndex(0);" /> 
        
                    <input id="Button2" type="button" value="Automatic Updates" onclick="SelecTabIndex(1);" /> 
        
                    <input id="Button3" type="button" value="Remote" onclick="SelecTabIndex(2)" /> 
        
                    <input id="Button4" type="button" value="General" onclick="SelecTabIndex(3);" /> 
        
                    <input id="Button5" type="button" value="Computer Name" onclick="SelecTabIndex(4)" /> 
        
                    <input id="Button6" type="button" value="Hardware" onclick="SelecTabIndex(5)" /> 
        
                    <input id="Button7" type="button" value="System Restore" onclick="SelecTabIndex(6)" /> 
        
                    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Width="400px" ScrollChildren="True" 
        
                        ScrollButtonsPosition="Middle" Height="26px"> 
        
                    </telerik:RadTabStrip> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

Using static/hardcoded tabs the results where:
IE8:
When selecting tabs that aren't on the instant visible area of the Tab Bar, it shows some random area of the Tab Bar.

IE8 with compability to IE7:
Seems to work fine. :-)

FF:
Same as IE8.

Code (with some variations):

    
            <head runat="server"> 
        
                <title></title> 
        
                <script type="text/javascript"> 
        
                    function SelecTabIndex(_index) { 
        
                        var _rts = $find("RadTabStrip1"); 
        
                        var _tab = _rts.get_tabs().getTab(_index); 
        
                        _tab.scrollIntoView(); 
        
                        _tab.select(); 
        
                    } 
        
                </script> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                </telerik:RadScriptManager> 
        
                <div> 
        
                    <input id="Button1" type="button" value="Advanced" onclick="SelecTabIndex(0);" /> 
        
                    <input id="Button2" type="button" value="Automatic Updates" onclick="SelecTabIndex(1);" /> 
        
                    <input id="Button3" type="button" value="Remote" onclick="SelecTabIndex(2)" /> 
        
                    <input id="Button4" type="button" value="General" onclick="SelecTabIndex(3);" /> 
        
                    <input id="Button5" type="button" value="Computer Name" onclick="SelecTabIndex(4)" /> 
        
                    <input id="Button6" type="button" value="Hardware" onclick="SelecTabIndex(5)" /> 
        
                    <input id="Button7" type="button" value="System Restore" onclick="SelecTabIndex(6)" /> 
        
                    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Width="400px" ScrollChildren="True" 
        
                        ScrollButtonsPosition="Middle" Height="26px"> 
        
                        <Tabs> 
        
                            <telerik:RadTab Text="Advanced" Value="2"> 
        
                            </telerik:RadTab> 
        
                            <telerik:RadTab Text="Automatic Updates" Value="1"> 
        
                            </telerik:RadTab> 
        
                            <telerik:RadTab Text="Remote" Value="3"> 
        
                            </telerik:RadTab> 
        
                            <telerik:RadTab Text="General" Value="4"> 
        
                            </telerik:RadTab> 
        
                            <telerik:RadTab Text="Computer Name" Value="5"> 
        
                            </telerik:RadTab> 
        
                            <telerik:RadTab Text="Hardware" Selected="True" Value="6"> 
        
                            </telerik:RadTab> 
        
                            <telerik:RadTab Text="System Restore" Value="7"> 
        
                            </telerik:RadTab> 
        
                        </Tabs> 
        
                    </telerik:RadTabStrip> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

Hope you can help me. It's very important, for me, to achieve the described.

Regards,

Rodrigo S.

TabStrip

answered on 17 Sep 2009

1 answer

114 views

GridHTMLEditorColumn in edit mode under Firefox

Hello,

I am using an GridHTMLEditorColumn and in edit mode, when I edit for first time, the size for content is quite zero, and size for upper control bar and lower status bar are over sized ???

Here is my code

    
                   <telerik:RadGrid ID="LocalizeGrid" runat="server" AllowPaging="True" 
        
                        AllowSorting="True" ShowStatusBar="true"  PageSize="20" GridLines="None" AutoGenerateColumns='false'>  
        
                        <PagerStyle Mode="NextPrevAndNumeric" /> 
        
                        <ClientSettings > 
        
                                <Resizing AllowColumnResize="True"  ResizeGridOnColumnResize="true" ClipCellContentOnResize="true"/>  
        
                                <Scrolling AllowScroll="True" ScrollHeight='500px' UseStaticHeaders="True" SaveScrollPosition="True" /> 
        
                            <Selecting AllowRowSelect="True" /> 
        
                        </ClientSettings> 
        
                        <MasterTableView DataKeyNames="TypeName,CrmId,FieldId" TableLayout="Fixed" > 
        
                        <Columns> 
        
                            <telerik:GridClientSelectColumn HeaderStyle-Width="40px" />   
        
                            <telerik:GridEditCommandColumn UniqueName="EditCommandColumn" ButtonType="ImageButton"  HeaderStyle-Width="40px" /> 
        
                            <telerik:GridButtonColumn UniqueName="DeleteColumn" CommandName='Delete' ButtonType="ImageButton"  HeaderStyle-Width="40px"   
        
                            ConfirmDialogType="RadWindow" /> 
        
                            <Telerik:GridBoundColumn DataField="CrmId" DataType='System.Guid' HeaderText="CRMID" UniqueName="CrmId" HeaderStyle-Width="200px" ReadOnly="true" /> 
        
                            <Telerik:GridBoundColumn DataField="FieldId" DataType='System.Int32' HeaderText="FIELDID" HeaderStyle-Width="80px" UniqueName="FieldId" ReadOnly="true" /> 
        
                            <Telerik:GridBoundColumn DataField="ShortValue" HeaderText="SHORTVAL" HeaderStyle-Width="300px" UniqueName="ShortValue" /> 
        
                            <telerik:GridHTMLEditorColumn UniqueName="LongValue" SortExpression="LongValue" HeaderText="LONGVAL" 
        
                                DataField="LongValue" HeaderStyle-Width="500px">  
        
                            </telerik:GridHTMLEditorColumn> 
        
                        </Columns> 
        
                        <EditFormSettings> 
        
                          <EditColumn ButtonType="ImageButton" /> 
        
                        </EditFormSettings> 
        
                    </MasterTableView> 
        
                    </telerik:RadGrid>

Am i the only ?

Thanks for help.

CS

Grid

answered on 17 Sep 2009

3 answers

516 views

Export to Excel and &nbsp

Hello,

I had an issue of empty cells in grid don't have borders,
I resolved it with adding &nbsp to all cells:

protected void grid_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
    {
        if (e.Column is GridBoundColumn)
        {
            (e.Column as GridBoundColumn).DataFormatString = "<nobr>&nbsp{0}</nobr>";
            //(e.Column as GridBoundColumn).DataFormatString = "<nobr>{0}</nobr>";
        }
    }

However this causes me another problem: the &nbsp is present when exporting to Excel.

What should I do?

Grid

answered on 17 Sep 2009

5 answers

344 views

[Solved] SelectionMode="Multiple" and OnSelectedIndexChanged

Hi,

    
                <asp:ListBox ID="m_UIlbTest" runat="server" SelectionMode="Multiple" OnSelectedIndexChanged="m_UIlbTest_SelectedIndexChanged" AutoPostBack="true"> 
        
                    <asp:ListItem Text="1" /> 
        
                    <asp:ListItem Text="2" /> 
        
                    <asp:ListItem Text="3" /> 
        
                </asp:ListBox> 
        
                <telerik:RadListBox ID="m_UIrlbTest" runat="server" SelectionMode="Multiple" OnSelectedIndexChanged="m_UIlbBranches_SelectedIndexChanged" AutoPostBack="true"> 
        
                    <Items> 
        
                        <telerik:RadListBoxItem Text="1" /> 
        
                        <telerik:RadListBoxItem Text="2" /> 
        
                        <telerik:RadListBoxItem Text="3" /> 
        
                    </Items> 
        
                </telerik:RadListBox>

If I have all three items selected in ASP's ListBox and I hold down Ctrl and click on one item to unselect it (leaving two items still selected), the event handler m_UIlbTest_SelectedIndexChanged is being hit. The same does not hold true for telerik's ListBox. Is there anything I can do to change this?

ListBox

answered on 17 Sep 2009

1 answer

134 views

Dynamic controls and ajax

Hi
i have a script there then you select 2 days in 2 RadDatePicker
updates a table with timepickers

    
                Protected Sub RadDatePicker2_SelectedDateChanged(ByVal sender As Object, ByVal e As Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs) Handles RadDatePicker2.SelectedDateChanged  
        
                    Dim Days As Integer 
        
                    If RadDatePicker2.SelectedDate.Value.Subtract(RadDatePicker1.SelectedDate.Value).Days >= 0 Then 
        
                        Days = RadDatePicker2.SelectedDate.Value.Subtract(RadDatePicker1.SelectedDate.Value).Days  
        
                        For i = 0 To Days Step 1  
        
                            Dim row As New TableRow  
        
                            Dim cell As New TableCell  
        
                            cell.Text = RadDatePicker1.SelectedDate.Value.AddDays(i)  
        
                            row.Cells.Add(cell)  
        
                            cell = New TableCell  
        
                            Dim timePicker As New Telerik.Web.UI.RadTimePicker  
        
                            timePicker.ID = "TimePickerA" & i  
        
                            timePicker.Skin = "Black" 
        
                            cell.Controls.Add(timePicker)  
        
                            row.Cells.Add(cell)  
        
                            timePicker = New Telerik.Web.UI.RadTimePicker  
        
                            timePicker.ID = "TimePickerB" & i  
        
                            timePicker.Skin = "Black" 
        
                            cell.Controls.Add(timePicker)  
        
                            row.Cells.Add(cell)  
        
                            EventDates.Rows.Add(row)  
        
                        Next 
        
                    End If 
        
                End Sub

the problem is then i use a button to submit the form how do i get access to my RadTimePicker controls
then i look in the table it is emtry the dynamic create rows disapers

Ajax

answered on 17 Sep 2009

1 answer

126 views

Get Reference to the UserControl Within the Grid

Hi All,

Is there a way to get the usercontrol within the radgrid on client side? I have searched everywhere and i can't find a way to do it.

Here is the scenario, I have a Radgrid with WebUserControl as the EditMode. Within the usercontrol I call a popup with dropdown on it where the user will be able to select some data. The data that was selected from the popup should be passed to the Editfrom User control Textbox.

I tried using radwindow but it still cannot find the usercontrol. I really need suggestions.

Thank you so much.

Grid

answered on 17 Sep 2009

3 answers

145 views

Slow Grid Rendering whe Using AJAX

Hello,

I have a page which contains a grid (1000 cells).
When the page called for the first time, it load in about 0.05 sec, which is good.
Now I need to update the grid every period of time.
I've done so by using radajaxmanager.ajaxrequest. It works fine, but the grid rendering takes about 2 sec, which is bad.
Can any one suggest me how to imporve the grid render time (the period of time browser need to draw the grid ) (grid view state is disabled,I am using paging and cannot go under 10 items, and bandwidth in no factor)?

10x guys.

code behind:

    
              public partial class _Default : System.Web.UI.Page  
        
                {  
        
                    protected void Page_Load(object sender, EventArgs e)  
        
                    {  
        
                        setGridDesign();  
        
                        this.RadGrid1.DataSource = GetDataFromDB();  
        
                    }  
        
                    private void setGridDesign()  
        
                    {  
        
                        this.RadGrid1.AutoGenerateColumns = false;  
        
                        this.RadGrid1.Columns.Clear();  
        
                        this.RadGrid1.Enabled = true;  
        
                        for (int i = 0; i < 100; i++)  
        
                        {  
        
                            GridCheckBoxColumn flightColumn = new GridCheckBoxColumn();  
        
                            flightColumn.HeaderText = i.ToString();  
        
                            flightColumn.UniqueName = i.ToString();  
        
                            flightColumn.ReadOnly = false;  
        
                            this.RadGrid1.Columns.Add(flightColumn);  
        
                        }  
        
                    }  
        
                    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)  
        
                    {  
        
                        GridDataItem dataItem = e.Item as GridDataItem;  
        
                        if (dataItem != null)  
        
                        {  
        
                            for (int i = 0; i < 100; i++)  
        
                            {  
        
                                (dataItem[i.ToString()].Controls[0] as CheckBox).Checked = true;  
        
                                (dataItem[i.ToString()].Controls[0] as CheckBox).Enabled = true;  
        
                            }  
        
                        }  
        
                    }  
        
                    private string[] GetDataFromDB()  
        
                    {  
        
                        string[] dataSource = null;  
        
                        return (dataSource = new string[20]);  
        
                    }  
        
                    protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)  
        
                    {  
        
                        setGridDesign();  
        
                        this.RadGrid1.DataSource = GetDataFromDB();  
        
                        this.RadGrid1.DataBind();  
        
                    }  
        
                    DateTime m_ResponseStart = DateTime.Now;  
        
                    DateTime m_ResponseEnd;  
        
                    protected void LabelActionTime_Unload(object sender, EventArgs e)  
        
                    {  
        
                        this.m_ResponseEnd = DateTime.Now;  
        
                        (sender as Literal).Text += (this.m_ResponseEnd - this.m_ResponseStart).TotalSeconds;  
        
                    }  
        
                }

aspx:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication7._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">  
        
                    <script language="javascript" type="text/javascript">  
        
                        var g_RenderingStartTime = new Date();  
        
                        var g_RenderingEndTime = null;  
        
                </script> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                </telerik:RadScriptManager> 
        
                <telerik:RadAjaxManager OnAjaxRequest="RadAjaxManager1_AjaxRequest"   
        
                ClientEvents-OnRequestStart="RadAjaxManager1_AjaxRequest_RequestStart"   
        
                ClientEvents-OnResponseEnd="RadAjaxManager1_AjaxRequest_ResponseEnd"   
        
                ID="RadAjaxManager1"   
        
                runat="server"   
        
                DefaultLoadingPanelID="RadAjaxLoadingPanel1">  
        
                <AjaxSettings > 
        
                    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">  
        
                        <UpdatedControls> 
        
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
        
                        </UpdatedControls> 
        
                    </telerik:AjaxSetting> 
        
                </AjaxSettings> 
        
                </telerik:RadAjaxManager> 
        
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">  
        
                </telerik:RadAjaxLoadingPanel> 
        
                <div> 
        
                       <telerik:RadGrid EnableViewState="false" AllowSorting="false"  PageSize="10"   
        
                            AllowPaging="true"   ID="RadGrid1"   
        
                            runat="server" style="margin-left:auto;margin-right:auto;" 
        
                             Width="100%" OnItemDataBound="RadGrid1_ItemDataBound" 
        
                            HeaderStyle-Wrap="false"  > 
        
                            <HeaderStyle Width="60px"  /> 
        
                            <PagerStyle  Mode="NextPrev" AlwaysVisible="true" /> 
        
                            <MasterTableView TableLayout="Fixed">  
        
                            </MasterTableView> 
        
                            <PagerStyle Mode="NextPrev" /> 
        
                        </telerik:RadGrid> 
        
                </div> 
        
                <telerik:RadCodeBlock runat="server">  
        
                       <asp:Literal runat="server" EnableViewState="false" ID="LabelActionTime" Text="Page cycle: "   
        
                    OnPreRender="LabelActionTime_Unload"></asp:Literal>    
        
                    Client Render time: <div id="clientRenderTime"></div> 
        
                <script language="javascript" type="text/javascript">  
        
                    function RadAjaxManager1_AjaxRequest_ResponseEnd(i_sender, i_args) {  
        
                        g_RenderingEndTime = new Date();  
        
                        writeclientRenderTime()  
        
                    }  
        
                    function RadAjaxManager1_AjaxRequest_RequestStart(i_sender, i_args) {  
        
                        g_RenderingStartTime = new Date();  
        
                    }  
        
                    function MillisecondsToDuration(n) {  
        
                        var hms = "";  
        
                        var dtm = new Date();  
        
                        dtm.setTime(n);  
        
                        var h = "000" + Math.floor(n / 3600000);  
        
                        var m = "0" + dtm.getMinutes();  
        
                        var s = "0" + dtm.getSeconds();  
        
                        var cs = "0" + Math.round(dtm.getMilliseconds() / 10);  
        
                        hhms = h.substr(h.length - 4) + ":" + m.substr(m.length - 2) + ":";  
        
                        hms += s.substr(s.length - 2) + "." + cs.substr(cs.length - 2); return hms;  
        
                    }  
        
                    function writeclientRenderTime() {  
        
                        var div = $get("clientRenderTime");  
        
                        div.innerHTML = MillisecondsToDuration(g_RenderingEndTime.getTime() - g_RenderingStartTime.getTime());  
        
                    }  
        
                    function updateGrid() {  
        
                        var grid = $get("<%= RadGrid1.ClientID %>");  
        
                        grid.disabled = true;  
        
                        var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");  
        
                        ajaxManager.ajaxRequest( "Refresh");  
        
                    }  
        
                    var g_IntervalID = null;  
        
                    function setRefreshTableIntrval() {  
        
                        g_IntervalID = setInterval("updateGrid()", 6000);  
        
                    }         
        
                    function clearRefreshTableIntrval() {  
        
                        clearInterval(g_IntervalID);  
        
                    }  
        
                    // setaddNewUserIntrval();  
        
                    setRefreshTableIntrval();  
        
                   // setaddNewFlightIntrval();  
        
                    g_RenderingEndTime = new Date();  
        
                    writeclientRenderTime();  
        
                </script> 
        
                    </telerik:RadCodeBlock> 
        
                </form> 
        
            </body> 
        
            </html>

Ajax

answered on 17 Sep 2009

3 answers

129 views

How to close download window

When I double-click on a file to download it, an empty RadWindow appears. How to I either prevent this from appearing, or close if after the download begins/finishes?

Thanks,
Ada,

FileExplorer

answered on 17 Sep 2009

1 answer

148 views

AutoResize Windows

I want to resize the windows automatically .........................The Window contain the Radgrid. When i click ADd it will add in radgrid and open in the RAdgrid inside the RAdwindows. I want to it will resize automatically ?

How to resize the windows ?

Urgentttttttttttttt

Window

answered on 17 Sep 2009