I have a Circular Gauge within a bootstrap card. I cannot seem to get the "CenterTemplate" value centered in the gauge. Is there a setting I'm missing or does someone have a custom CSS to help. below is the html markup along with an attached image of the gauge.
Thank you in advance for any help!
<div class="card shadow mb-4" id="gaugecontainer1">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Daily Productivity Rate</h6>
</div>
<div class="card-body">
<div class="container-fluid align-content-center">
<telerik:RadCircularGauge ID="Gauge1" runat="server" Width="90%" Height="350px" Font-Size="X-Large" Skin="Silk" CssClass="gauge-left-padd">
<ClientEvents OnLoad="Gauge1_OnLoad" />
<CenterTemplate>
#:value # %
</CenterTemplate>
<Scale Min="0" Max="200">
<Labels Visible="true" Position="Inside" Font="12px Arial,Helvetica,sans-serif" Format="{0}%" />
<MajorTicks Visible="true" Size="20" Color="Black" />
<MinorTicks Visible="true" Color="Black" />
</Scale>
<ColorsCollection>
<telerik:ArcGaugeColor From="0" To="79" Color="Red" />
<telerik:ArcGaugeColor From="80" To="90" Color="Orange" />
<telerik:ArcGaugeColor From="91" To="100" Color="Yellow" />
<telerik:ArcGaugeColor From="101" To="120" Color="LightGreen" />
<telerik:ArcGaugeColor From="121" To="200" Color="Blue" />
</ColorsCollection>
</telerik:RadCircularGauge>
</div>
</div>
</div>
.gauge-left-padd {
padding-left: 2em;
}
<script type="text/javascript">
var gauge1, TO = false;
function Gauge1_OnLoad(sender, args) {
gauge1 = sender.get_kendoWidget();
}
window.onresize = (function () {
if (TO !== false)
clearTimeout(TO);
TO = setTimeout(resizeGauge, 200);
});
function resizeGauge() {
if (gauge1) {
gauge1.resize();
}
}
</script>
<telerik:RadListView ID="listParent" DataKeyNames="Parent_ID" DataSourceID="sqlParent" RenderMode="Lightweight" runat="server">
<ItemTemplate>
ID: <%# Eval("Parent_ID") %>
<%# Eval("Parent_Name") %>
<telerik:RadListView ID="listChild" DataKeyNames="Parent_ID" DataSourceID="sqlChild" RenderMode="Lightweight" runat="server">
<ItemTemplate>
<!-- child details would go here -->
</ItemTemplate>
</telerik:RadListView>
<asp:SqlDataSource ID="sqlChild" runat="server" ConnectionString="<%$ ConnectionStrings:cs %>" SelectCommand="Impact.usp_exe_get_Child" SelectCommandType="StoredProcedure">
<SelectParameters>
<asp:Parameter Name="Parent_ID" /> <!-- Parent ID from listParent-->
</SelectParameters>
</asp:SqlDataSource>
</ItemTemplate>
</telerik:RadListView>
<asp:SqlDataSource ID="sqlParent" runat="server" ConnectionString="<%$ ConnectionStrings:cs %>" SelectCommand="Impact.usp_exe_get_Parent" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
I am implementing a one time password with google authenticator for login page. After checking the user id and password is correct, I need to hidden the login box and show the QR code, OTP textbox and submit button. I saw sample using Panel.visible = true/false to switch. It is work in Page_Load to set default Panel_GoogleAuth.visible = false, but it is not work in the login button onClick event. It can't show the Panel_GoogleAuth and just hidden the login button but not the whole Panel_Login. Does anyone know why?
My reference: Sample
aspx:
<asp:Panel ID="Panel_GoogleAuth" runat="server" Font-Names="Arial" Font-Size="12pt" HorizontalAlign="Center" Width="1024px">
<div class="row">
<div class="col-3"></div>
<div class="col-5">
<fieldset class="TOTP">
<asp:Label ID="lblScanQRCode" runat="server" Style="padding-top: 4px">Sceen the QR Code in Google Authenticator</asp:Label>
<br />
<asp:Image ID="imgQRCode" runat="server" Width="200" Height="200" />
<asp:HiddenField ID="hfSecretKey" runat="server" />
<br />
<asp:TextBox ID="txtOTP" runat="server" placeholder="Enter One-Time-Password"></asp:TextBox>
<asp:Button ID="btnVerify" runat="server"Text="Verify OTP" />
<br /><br />
<asp:Label ID="lblMessage" runat="server"></asp:Label>
</fieldset>
</div>
</div>
</asp:Panel>
<telerik:RadAjaxPanel ID="StaffPanel" runat="server" Width="99%">
<div id="wrap-content">
<asp:Panel ID="Panel_Login" runat="server" Font-Names="Arial" Font-Size="12pt" HorizontalAlign="Center" Width="1024px">
<asp:Login ID="LoginUser" Class="Login" runat="server" EnableViewState="false" RenderOuterTable="false">
<div class="accountInfo">
<div class="row">
<div>
<asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">Staff ID:</asp:Label>
</div>
<div>
<asp:TextBox ID="UserName" runat="server" CssClass="textEntry" Width="114%" Height="20"></asp:TextBox>
</div>
</div>
<div class="row">
<div>
<asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password" Style="padding-top: 4px">Password</asp:Label>
</div>
<div>
<asp:TextBox ID="Password" runat="server" CssClass="passwordEntry" TextMode="Password" Width="114%" Height="20"></asp:TextBox>
</div>
</div>
<div class="row">
<telerik:RadButton ID="btnLogin" runat="server" Text="Login" OnClick="RadButton_LoginCheck_Click" RenderMode="Lightweight" Width="93%" Font-Size="X-Large" Skin="Silk" Height="35px" Font-Names="Arial"></telerik:RadButton>
</div>
</div>
</asp:Login>
</asp:Panel>
</div>
</telerik:RadAjaxPanel>
aspx.vb:
Protected Sub btnLogin_Click(sender As Object, e As System.EventArgs) Handles btnLogin.Click If staffIDRegex.Match(checkStaffId).Success Then Panel_Login.Visible = False Panel_GoogleAuth.Visible = True End If End Sub
How can I pass the number to the confirm popup message like
===============================
Confirm to Delete Record ___(No)___?
===============================
CODE in .aspx
<script>
function DeleteConfirm(sender, args) {</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>
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.
<telerik:GridBoundColumn DataField="StockQuantity" DataType="System.Int16" |
HeaderText="Stock" SortExpression="StockQuantity" |
UniqueName="StockQuantity"> |
</telerik:GridBoundColumn> |
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 |
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.
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);
<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>
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:
Please advise!
Thx
Gerhard