Questions on UI for ASP.NET AJAX Forum

43 answers

8.9K+ views

This sticky thread lists known issues and breaking changes introduced in the UI for ASP.NET AJAX releases.

Q3 2011 (Version number: 2011.3.1115)

Problem: When adding items to OData-enabled controls (RadMenu, RadTreeView, RadListBox, RadComboBox) through design time erroneous markup is applied to the control:

<telerik:RadListBox runat="server" ID="RadListBox1">
    <Items>
    </Items>
    <WebServiceSettings>
        <ODataSettings InitialContainerName="">
        </ODataSettings>
    </WebServiceSettings>
</telerik:RadListBox>

Please note the added ODataSettings section. It will cause JavaScript errors on the page.

Solution: Remove the ODataSetting section and the issue will vanish. The problem is also fixed in the Q3 SP1 release, version number 2011.3.1305

General Discussions

updated answer on 29 May 2025

1 answer

759 views

I'm getting an error with Telerik

When I run my project I'm getting this error

Could not load file or assembly 'Telerik.Web.UI' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)

In my web.config I checked that the version in the web.config is the same as the version I'm using in references

General Discussions

answered on 22 Oct 2021

1 answer

4 views

How to trigger the server-side event of a RadToolBarButton inside a RadGrid using the Enter key

I have a RadToolBar (RadToolBar1) placed inside a RadGrid. When I use Tab to focus a RadToolBarButton and press Enter, the server-side event doesn’t fire (e.g., CommandName="InitInsert"). How can I make pressing Enter trigger the button’s server-side event?

I've tried this code, but it was not working.

Keyboard Support

function pageLoadHandler() {
    var buttonList = document.querySelectorAll('.RadToolBar .rtbUL .rtbItem');

    if (buttonList) {
        buttonList.forEach((button) => {
            button.addEventListener("keydown", (e) => {
                if (e.code === "Enter") {
                    button.click();
                }
            })
        })
    }
}

Sys.Application.add_load(pageLoadHandler);

Below is my radgrid

 <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowSorting="True" Width="100%"
                    CssClass="mx " GridLines="None" Skin="Bootstrap" PageSize="12"
                    OnNeedDataSource="RadGrid1_NeedDataSource" OnItemCommand="RadGrid1_ItemCommand"
                    OnUpdateCommand="RadGrid1_UpdateCommand" OnInsertCommand="RadGrid1_InsertCommand"
                    OnItemDataBound="RadGrid1_ItemDataBound" OnDeleteCommand="RadGrid1_DeleteCommand">
                    <PagerStyle Mode="NumericPages"></PagerStyle>
                    <MasterTableView Name="MASTER" AutoGenerateColumns="False"
                        DataKeyNames="aid,utype,uid,is_enabled,project,user_level,plan,salt,valid,mail"
                        CommandItemDisplay="Top" PageSize="20" TableLayout="Fixed" EditMode="EditForms">
                        <HeaderStyle BackColor="#D6F2F6" CssClass="mx header" />
                        <ItemStyle BackColor="beige" CssClass="mx item" />
                        <AlternatingItemStyle BackColor="white" CssClass="mx" />
                        <RowIndicatorColumn>
                            <HeaderStyle Width="20px"></HeaderStyle>
                        </RowIndicatorColumn>
                        <ExpandCollapseColumn ButtonType="ImageButton">
                            <HeaderStyle Width="24"></HeaderStyle>
                        </ExpandCollapseColumn>

                        <CommandItemStyle Height="40" BackColor="#45B3D8" Font-Size="1.1em" />
                        <CommandItemTemplate>
                            <telerik:RadToolBar RenderMode="Lightweight" ID="RadToolBar1" runat="server" 
                                CssClass="mm-cmd" AutoPostBack="true" BorderStyle="Groove">
                                <KeyboardNavigationSettings CommandKey="Alt" FocusKey="M" />
                                <Items>
                                    <telerik:RadToolBarButton Text="新增學校帳號" CheckOnClick="true" AllowSelfUnCheck="true"  CommandName="InitInsert" 
                                        ImageUrl="~/images/add.png"
                                        Visible='<%# ! (RadGrid1.MasterTableView.IsItemInserted ||  RadGrid1.EditIndexes.Count > 0 || Session["user_level"].ToString()!="1")  %>'>
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton Text="放棄編輯" CommandName="CancelAll"
                                        ImageUrl="~/images/cancel_103431.png" CausesValidation="false"
                                        Visible='<%# RadGrid1.MasterTableView.IsItemInserted ||  RadGrid1.EditIndexes.Count > 0 %>'>
                                    </telerik:RadToolBarButton>

                                    <telerik:RadToolBarButton runat="server" IsSeparator="true" BackColor="#45B3D8"
                                        Width="">
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton Text="更新" CommandName="Rebind"
                                        ImageUrl="~/images/refreshdata.png">
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton runat="server" IsSeparator="true" BackColor="#45B3D8"
                                        Width="">
                                    </telerik:RadToolBarButton>
                                </Items>
                            </telerik:RadToolBar>
                        </CommandItemTemplate>
                        <Columns>
                            <telerik:GridButtonColumn ConfirmText="確定刪除帳號?" ConfirmDialogType="RadWindow" Text="刪除帳號"
                                UniqueName="DeleteColumn"
                                ConfirmTitle="刪除帳號" ButtonType="ImageButton" CommandName="Delete" HeaderText="刪除"
                                ConfirmDialogHeight="200px" ConfirmDialogWidth="320px" HeaderStyle-Width="38"
                                ImageUrl="~/images/delete16x16.png" />
                            <%-- <telerik:GridEditCommandColumn UniqueName="EditCommandColumn1" HeaderStyle-Width="38"
                                ButtonType="ImageButton" EditImageUrl="~/images/edit16x16.png"
                                InsertImageUrl="~/images/save16x16.png" EditText="編輯這筆資料" HeaderText="編輯"
                                UpdateImageUrl="~/images/save16x16.png" UpdateText="保存資料" CancelText="放棄編輯"
                                CancelImageUrl="~/images/cancel16x16.png">
                            </telerik:GridEditCommandColumn> --%>


                            <telerik:GridTemplateColumn HeaderText="編輯" UniqueName="EditCol" HeaderStyle-Width="38">
                                <ItemTemplate>
                                    <asp:ImageButton ID="btnEdit" runat="server"
                                        ImageUrl="~/images/edit16x16.png"
                                        CommandName="Edit"
                                        AlternateText="編輯這筆資料" ToolTip="編輯這筆資料" />
                                    <!-- 這個 Label 會輸出 <label for="btnEdit的clientId"> -->
                                    <asp:Label ID="lblEditFor" runat="server"
                                        AssociatedControlID="btnEdit" CssClass="sr-only"
                                        Text="編輯這筆資料"></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="id" HeaderText="id" SortExpression="id" UniqueName="id"
                                Display="false" ReadOnly="True">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="uid" HeaderText="帳號"
                                HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"
                                SortExpression="uid" UniqueName="uid" HeaderStyle-Width="150" ReadOnly="True"
                                HeaderStyle-Font-Size="0.917em" ItemStyle-Height="22px" ItemStyle-Font-Size="0.917em">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="uname" HeaderText="帳號管理人姓名" SortExpression="uname"
                                HeaderStyle-Font-Size="0.917em" ItemStyle-Height="22px" ItemStyle-Font-Size="0.917em"
                                ItemStyle-Font-Names="微軟正黑體" HeaderStyle-Font-Names="微軟正黑體" UniqueName="uname"
                                HeaderStyle-Width="100px" HeaderStyle-HorizontalAlign="Center"
                                ItemStyle-HorizontalAlign="Center">
                            </telerik:GridBoundColumn>

                            <telerik:GridBoundColumn DataField="title" HeaderText="職稱" SortExpression="title"
                                HeaderStyle-Font-Size="0.917em" ItemStyle-Height="22px" ItemStyle-Font-Size="0.917em"
                                ItemStyle-Font-Names="微軟正黑體" HeaderStyle-Font-Names="微軟正黑體" UniqueName="unit"
                                HeaderStyle-Width="160px" HeaderStyle-HorizontalAlign="Center"
                                ItemStyle-HorizontalAlign="Center">
                            </telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn HeaderStyle-Width="140" HeaderText="帳號權限"
                                HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                                <ItemTemplate>

                                    <%# Eval("user_level").Equals("1")?"學校管理員":"老師帳號" %>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderStyle-Width="140" HeaderText="帳號狀態"
                                HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                                <ItemTemplate>
                                    <%# Eval("is_enabled").Equals("1")?"啟用":"停用" %>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderStyle-Width="140" HeaderText="信箱狀態"
                                HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                                <ItemTemplate>
                                    <%# Eval("mail").ToString().Equals("")?"尚未填寫信箱":(Eval("valid").Equals("Y")?"已驗證":"<a href=\"SendMailCheck\">尚未驗證</a>") %>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                        </Columns>
                        <EditFormSettings EditColumn-CancelText="取消" EditColumn-UpdateText="更新"
                            EditColumn-InsertText="新增" EditColumn-ButtonType="ImageButton" EditFormType="Template">
                            <EditColumn ButtonType="ImageButton" CancelText="取消" UpdateText="更新" InsertText="新增"
                                UniqueName="EditCommandColumn">
                            </EditColumn>
                            <FormTemplate>
                                <table class="mx m-table " style="padding: 10px;">
                                    <tr>
                                        <td style="padding: 3px; height: 1.3em; width: 150px">帳號</td>
                                        <td>
                                            <asp:TextBox ID="mUid" runat="server" onkeydown="txtOnKeyPress(this);"
                                                MaxLength="20" Width="120" Placeholder="使用者代碼"
                                                onkeyup="value=value.replace(/[\W]/g,'') "
                                                onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
                                            </asp:TextBox>
                                            <asp:Label runat="server" ID="LB"></asp:Label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 3px; height: 1.3em; width: 180px">帳號管理人姓名</td>
                                        <td>
                                            <asp:TextBox ID="mUname" runat="server" Text='<%# Bind("uname") %>' autocomplete="off"
                                                MaxLength="20" Width="120"></asp:TextBox>
                                        </td>
                                    </tr>

                                    <asp:Panel runat="server" ID="pass1Panel">
                                        <tr>
                                            <td style="padding: 3px; height: 1.3em; width: 180px">新密碼</td>
                                            <td>
                                                <asp:TextBox ID="mPassword1" TextMode="Password" runat="server" autocomplete="off"
                                                    MaxLength="20" Width="120"></asp:TextBox>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 3px; height: 1.3em; width: 180px">確認密碼</td>
                                            <td>
                                                <asp:TextBox ID="mPassword2" TextMode="Password" runat="server" autocomplete="off"
                                                    MaxLength="20" Width="120"></asp:TextBox>
                                            </td>
                                        </tr>
                                    </asp:Panel>
                                    <asp:Panel runat="server" ID="pass2Panel">
                                        <tr>
                                            <td style="padding: 3px; height: 1.3em; width: 180px">密碼</td>
                                            <td>
                                                <asp:TextBox ID="mPassword" TextMode="Password" runat="server" autocomplete="off"
                                                    MaxLength="20" Width="120"></asp:TextBox>
                                            </td>
                                        </tr>
                                    </asp:Panel>

                                    <tr>
                                        <td style="padding: 3px; height: 3em">職稱</td>
                                        <td>
                                            <asp:TextBox ID="mTitle" runat="server" Text='<%# Bind("title") %>'
                                                MaxLength="100" Width="420"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 3px; height: 3em">備用信箱</td>
                                        <td>
                                            <asp:TextBox ID="mEmail" runat="server" Text='<%# Bind("mail") %>'
                                                MaxLength="100" Width="420"></asp:TextBox>
                                            <asp:RegularExpressionValidator ID="revEmailAddress" runat="server"
                                                SetFocusOnError="true" Display="None" ControlToValidate="mEmail"
                                                resourceKey="revEmailAddress"
                                                ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
                                                ValidationGroup="forgetpassword"></asp:RegularExpressionValidator>
                                            <asp:Literal runat="server" ID="mEmailState" Text=""></asp:Literal>
                                        </td>

                                    </tr>
                                    <tr>
                                        <td style="padding: 3px; height: 1.3em; width: 150px">帳號權限</td>
                                        <td>
                                            <asp:RadioButtonList runat="server" ID="mUser_Level" RepeatColumns="2"
                                                Font-Size="Medium" CssClass="nontable">
                                                <asp:ListItem Value="1" Text="學校管理員"></asp:ListItem>
                                                <asp:ListItem Value="2" Text="老師帳號"></asp:ListItem>
                                            </asp:RadioButtonList>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 3px; height: 1.3em; width: 150px">開放計畫權限</td>
                                        <td>
                                            <asp:CheckBoxList RenderMode="Lightweight" ID="listbox" RepeatColumns="6"
                                                Width="100%" runat="server" DataSourceID="SqlDataSource1" DataTextField="name"
                                                DataValueField="plan_code">
                                            </asp:CheckBoxList>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 3px; height: 1.3em; width: 150px">帳號狀態</td>
                                        <td>
                                            <asp:RadioButtonList runat="server" ID="mIs_Enabled" RepeatColumns="2"
                                                Font-Size="Medium" CssClass="nontable">
                                                <asp:ListItem Value="1" Text="啟用"></asp:ListItem>
                                                <asp:ListItem Value="0" Text="停用"></asp:ListItem>
                                            </asp:RadioButtonList>

                                        </td>
                                    </tr>
                                </table>
                                <br />
                                <asp:ValidationSummary ID="mSummary" resourceKey="mSummary" runat="server"
                                    ShowSummary="false" ShowMessageBox="true" ValidationGroup="forgetpassword"
                                    HeaderText="輸入的信箱格式有誤" />
                                <telerik:RadButton CausesValidation="true" ID="btnUpdate" runat="server"
                                    CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'
                                    Width="120px" Height="36px" Font-Size="1em" ButtonType="LinkButton" ValidationGroup="forgetpassword"
                                    CssClass="customizeIcon"
                                    Text='<%# (Container is GridEditFormInsertItem) ? "保存" : "更新" %>'
                                    UseSubmitBehavior="false">
                                    <Icon PrimaryIconCssClass="rbSave" PrimaryIconTop="8px" PrimaryIconBottom="8px"
                                        PrimaryIconLeft="10"></Icon>
                                </telerik:RadButton>
                                <telerik:RadButton ID="btnCancel" CommandName="Cancel" Text="取消" runat="server"
                                    Width="120px" Height="36px" ButtonType="LinkButton" CssClass="customizeIcon"
                                    Font-Size="1em">
                                    <Icon PrimaryIconCssClass="rbCancel" PrimaryIconTop="8px" PrimaryIconBottom="8px"
                                        PrimaryIconLeft="10"></Icon>
                                </telerik:RadButton>
                            </FormTemplate>
                        </EditFormSettings>
                    </MasterTableView>
                </telerik:RadGrid>

Regards,
LTY

Button

ToolBar

answered on 21 Aug 2025

1 answer

6 views

Telerik.Web.UI.OrgChartDrillDownEventArguments.SourceNode.get returns Nothing

I try to follow the example in https://demos.telerik.com/aspnet-ajax/orgchart/examples/applicationscenarios/drilldowntoviewdetails/defaultvb.aspx?show-source=true but if I run the code and click on an icon for drill-down I get the error at the line "If e.SourceNode.ID <> "1" Then":

Telerik.Web.UI.OrgChartDrillDownEventArguments.SourceNode.get returned Nothing.

The code is:

Private Sub RadOrgChart2_DrillDown(sender As Object, e As Telerik.Web.UI.OrgChartDrillDownEventArguments) Handles RadOrgChart2.DrillDown
If e.SourceNode.ID <> "1" Then
Dim item = New OrgChartGroupItem()
e.SourceNode.Renderer.Controls.Remove(e.SourceNode.Nodes.Renderer)
e.SourceNode.GroupItems.Clear()
e.SourceNode.Nodes.Clear()
e.SourceNode.GroupItems.Add(item)
End If
End Sub

Please advise!

Thx
Gerhard

General Discussions

OrgChart

answered on 19 Aug 2025

2 answers

10 views

Accessibility issues related to Telerik RadEditor Classic Render Mode

The tab toolbar items (Bold (B), italic (I), underlined (U), etc.) act like a Tab list (one can be selected), but when we navigate on it, the screen reader announces the role as a link, which is confusing.

Also, with the role link, the user is not getting enough information about which one is currently selected (visually with colour indication). The screen reader announces as 'Bold, link'.

The recording is attached in the zip file.

Editor

Grid

answered on 13 Aug 2025

1 answer

6 views

difficulty in RadDatePicker responsiveness

As you can see from the image, on mobile devices the date ends up breaking and making it impossible to view it completely.

This is my code:
<div class="col-xl-3 col-sm-6 col-md-6 col-xs-12 mb-2">
<span class="EstiloLabelSimples">Data Vencimento:</span>
<telerik:RadDatePicker RenderMode="Lightweight" ID="txtDataVencimentoCadastro" Width="100%" runat="server" />
</div>

I've tried using other RenderMode types, but none of them worked. Could someone help me achieve this responsiveness?

UI for ASP.NET AJAX in ASP.NET MVC

Window

answered on 07 Aug 2025

1 answer

11 views

Add link to the right of radtreeNode

Hello,

I'm loading a RadTreeView from an xml file. This has been working fine for a long time.

I've been tasked with adding a text link to another page to the right of specific nodes.

Since I'm using LoadContentFile of my RadTreeView, I'm not sure if there is a way to manipulate the nodes to add a link when loading data.

In my example below I need to find a way to add the Section links to the right of my nodes. Can I add the section text and url as properties of a node in my xml?

Example layout

-Top

-2000s

-2021 Section 1

-2022 Section 1

-2023 Section 2

Thank you

TreeView

answered on 07 Aug 2025

1 answer

110 views

Multiple Y axis on same line?

Hi there

In order to get differing steps to show the levels on my stacked chart I can kind of do it using additional Y axis, but obviously this is showing them on separate lines.

Is it possible to manipulate the layout so that the lines are on top of each other so it looks like 1 line?