Questions on UI for ASP.NET AJAX Forum

1 answer

15 views

How to pass parameter to OnClientClick function?

How can I pass the number to the confirm popup message like

===============================

Confirm to Delete Record ___(No)___?

===============================

CODE in .aspx

function DeleteConfirm(sender, args) {
args.set_cancel(!confirm('Confirm to Delete?'));
}

</script>

<telerik:RadButton ID="btnDelete" runat="server" Skin="Windows7" Text="Delete" CommandName="Delete"
CommandArgument='<%# Eval("CueId") + "|" + Eval("RevID") + "|" + Eval("No") %>' OnClientClicking="DeleteConfirm" visible='<%# If(Eval("AdminPage").ToString() = "Yes", true, false) %>'
Enabled='<%# If(Eval("ControlStatus").ToString() = "R", true, false) %>' >
</telerik:RadButton>

Button

updated question on 02 Sep 2025

1 answer

17 views

CheckBox, RadRadioButtonList used in radwindow it show double how we restrict

Hi sir,

I open the new page in radwindow. in that new page i add textbox, checkbox, RadRadioButtonList and comobobox.

but CheckBox, RadRadioButtonList it show double how we restrict.

it show in firefox, edge browser.

CheckBox

RadioButtonList

answered on 28 Aug 2025

6 answers

4.3K+ views

Hide a column programmatically

Hi

I have searched the forums and can't see anything that seesm to match my case.

I want to hide a column based on a value set in a settings table. No problem getting the
setting value as true or false, but I can't make the column hidden.

Columns are not autogenerated and the column in question is declared like this

    
            <telerik:GridBoundColumn DataField="StockQuantity" DataType="System.Int16"   
        
                        HeaderText="Stock" SortExpression="StockQuantity"   
        
                        UniqueName="StockQuantity">  
        
            </telerik:GridBoundColumn>

How can this be made visible/invisble from the code behind?
I have tried this below but I think it is applicable only to autogenerated columns.. Anyway it does not do anything.

    
            Protected Sub RadGrid1_ColumnCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridColumnCreatedEventArgs) Handles RadGrid1.ColumnCreated  
        
                    If e.Column.UniqueName = "StockQuantity" Then  
        
                        e.Column.Visible = False 
        
                    End If  
        
                End Sub

Thanks for help here!

Clive

Grid

answered on 27 Aug 2025

1 answer

19 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

12 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

20 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

14 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

17 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

118 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?