Questions on UI for ASP.NET AJAX Forum

2 answers

123 views

Issues using WebControlAdapter on RadNumericTextBox

Hello Telerik,

I have been trying to add mobile support for your RadNumericTextBox Control. What I mean by that is when a user using a smartphone focuses on the control, a keyboard with only numbers will appear. This is easily achieved by changing the type of input from "text" to "tel". I also have js code to validate that the control has a valid value. I decided that I would use a WebControlAdapter to change the type.

Here is that code:

01.using System;

02.using System.IO;

03.using System.Web.UI.Adapters;

04.using System.Web.UI.WebControls;

05.using System.Web.UI;

06.using System.Web.UI.WebControls.Adapters;

07.using System.Reflection;

08.using Telerik.Web.UI;

09.

10.namespace LogicData.ControlAdapters

11.{

12. public class RadNumericTextBoxAdapter : WebControlAdapter

13. {

14. protected override void RenderContents(HtmlTextWriter writer)

15. {

16. HtmlTextWriter w = new HtmlTextWriter(new StringWriter());

17.

18. base.RenderContents(w);

19.

20. writer.Write(w.InnerWriter.ToString()

21. .Replace("type=\"text\"", "type=\"tel\""));

22. }

23. }

24.}

And here is the browser file:

1.<browsers>

2. <browser refID="Default">

3. <controlAdapters>

4. <adapter controlType="Telerik.Web.UI.RadNumericTextBox"

5. adapterType="LogicData.ControlAdapters.RadNumericTextBoxAdapter" />

6. </controlAdapters>

7. </browser>

8.</browsers>

Super simple nothing complicated about it and works perfectly:

HTML Output:

1.<input id="long_id" name="long_name" class="riTextBox riEnabled" onblur="big_function" type="tel">

(I simplified the some of it to make it easier to read)

However, my validation no longer worked. I inspected this and I found that the Telerik JS function $find() is no longer finding the control. (See js_output.png) When I compare the DOM Element of the changed control to the original I notice there are a few attributes missing. (See control_original.png and control_modified.png) From what I can tell the browser (Chrome in this case) isn't recognizing it as a "RadNumericTextBox" control anymore. I tried having the WebControlAdapter with nothing in it except an empty constructor and it still removed these attributes.

So after all of this explanation and assuming, what I would like to know is:

1. Why is the WebControlAdapter causing this?

2. Is the missing attributes the reason the $find() function is returning null for my control?

Thank you,

-Chris

General Discussions

answered on 11 Mar 2016

5 answers

208 views

[Solved] Issue updating display with code behind using RadAjaxManager AjaxRequest

Hello there,

I'm having some issues to get my RadAjaxManager AjaxRequest work in my project. Below is my source code.

RadAjaxManager configuration

01.<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">

02. <AjaxSettings>

03. <telerik:AjaxSetting AjaxControlID="RadComboBox1">

04. <UpdatedControls>

05. <telerik:AjaxUpdatedControl ControlID="RadComboBox2" LoadingPanelID="RadAjaxLoadingPanel1" />

06. <telerik:AjaxUpdatedControl ControlID="RadComboBox3" LoadingPanelID="RadAjaxLoadingPanel1" />

07. <telerik:AjaxUpdatedControl ControlID="RadComboBox4" LoadingPanelID="RadAjaxLoadingPanel1" />

08. </UpdatedControls>

09. </telerik:AjaxSetting>

10. <telerik:AjaxSetting AjaxControlID="RadComboBox2">

11. <UpdatedControls>

12. <telerik:AjaxUpdatedControl ControlID="RadComboBox4" LoadingPanelID="RadAjaxLoadingPanel1" />

13. </UpdatedControls>

14. </telerik:AjaxSetting>

15. </AjaxSettings>

16.</telerik:RadAjaxManager>

17.<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"

18. Width="75px" >

19. <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'

20. style="border: 0;" />

21.</telerik:RadAjaxLoadingPanel>

RadComboBox configuration, same for all of them so I just post one :

1.<telerik:RadComboBox RenderMode="Classic" ID="RadComboBox1" runat="server" CheckBoxes="true"

2. EnableCheckAllItemsCheckBox="true" DataTextField="name" DataValueField="id" AutoPostBack="true"

3. OnClientDropDownClosed="ClientCollapsedComboBox">

4.</telerik:RadComboBox>

Javascript used for making AjaxRequest with OnClientDropDownClosed event :

1.<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

2. <script type="text/javascript">

3. function ClientCollapsedComboBox(sender, eventArgs) {

4. var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");

5. ajaxManager.ajaxRequest();

6. }

7. </script>

8.</telerik:RadCodeBlock>

And finally my AjaxRequest code behind method :

1.protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)

2.{

3. RadComboBox4.Items.Clear();

4. RadComboBox4.DataBind();

5. // doing some work here

6.}

On closing dropdown the event is correctly fired. So, here come my questions :

While debugging I enter in RadAjaxManager1_AjaxRequest method but the changes made are not displayed on the page.Is there something wrong in my config ?
Except retrieving the id of the element which fired the event and do some switch/case like job in RadAjaxManager1_AjaxRequest method is there another way to do some work based on the element that fired the event ?

If there is anything unclear with my questions or anything else, please tell me and I'll try to develop.

Regards,

Ajax

answered on 11 Mar 2016

2 answers

648 views

[Solved] Push Notifications in .Net web form application

Hi,

I am using RadNotifications to display success/fail messages for user induced database updates. Is it possible to use RadNotifications when an event occurs in the server due to some timer actions. For e.g., I am checking for inserts and updates in a database table for every 5 minutes and displaying the count in a label. I want to push notify the user on any DB updates in this timer event. Is that possible ?

Notification

answered on 11 Mar 2016

7 answers

156 views

Stop auto-correcting date

When a user enters a date of 1a/2/2015, the raddatepicker auto-corrects it to 1/2/2015. If a user enters a date of 13/01/2015 the raddatepicker auto-corrects it to 01/13/2015. I don't want the control to assume what the user meant to type. I would like to turn this feature off so that I can throw a validation error. Is this possible?

DatePicker

answered on 11 Mar 2016

6 answers

392 views

[Solved] Rad Grid Batch Editing Validation not working

Hi,

Telerik Team ,

I am facing validation related problem in Rad Grid (Batch Editing). It seems that validation is not working as expected .Please help me on the same.
My current telerik verion is '2015.2.826.45'. Please let me know whether this version supports validation or need to update it to never version .

sample code

<telerik:RadGrid ID="EmployeeRadGrid" GridLines="None" runat="server" Width="99.3%" PageSize="10"

AutoGenerateColumns="False"

AllowAutomaticInserts="True"

AllowAutomaticDeletes="True"

AllowAutomaticUpdates="True"

AllowSorting="false"

AllowPaging="True"

OnPreRender="EmployeeRadGrid_PreRender"

OnNeedDataSource="EmployeeRadGrid_NeedDataSource"

OnBatchEditCommand="EmployeeRadGrid_BatchEditCommand"

OnPageIndexChanged="EmployeeRadGrid_PageIndexChanged"

OnPageSizeChanged="EmployeeRadGrid_PageSizeChanged"

>

<MasterTableView CommandItemDisplay="TopAndBottom" HorizontalAlign="NotSet" EditMode="Batch" AutoGenerateColumns="False" CommandItemSettings-ShowRefreshButton="false" ValidateRequestMode="Enabled" >

<BatchEditingSettings EditType="Row" />

<Columns>

<telerik:GridBoundColumn DataField="EmployeeNumber" HeaderStyle-Width="15%" HeaderText="Employee Number" UniqueName="EmployeeNumber" ItemStyle-Width="10%" ColumnValidationSettings-EnableRequiredFieldValidation="true">

<ColumnValidationSettings EnableRequiredFieldValidation="true" EnableModelErrorMessageValidation="true">

<RequiredFieldValidator ForeColor="Red" ErrorMessage="*Required" Display="Static" SetFocusOnError="true">

</RequiredFieldValidator>

<ModelErrorMessage SetFocusOnError="true" />

</ColumnValidationSettings>

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="OrganizationName" HeaderText="Organization" DataField="Organization" HeaderStyle-Width="10%">

<ItemTemplate>

<%#Eval("Organization") %>

</ItemTemplate>

<EditItemTemplate>

<telerik:RadComboBox runat="server" ID="OrganizationRadComboBox" Width="100px">

</telerik:RadComboBox>

<asp:RequiredFieldValidator ForeColor="Red" ControlToValidate="OrganizationRadComboBox" runat="server" ErrorMessage="*Required" Display="Static"></asp:RequiredFieldValidator>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridDateTimeColumn UniqueName="Date" PickerType="DatePicker" HeaderText="Date" HeaderStyle-Width="14%" DataField="TransactionDate" DataFormatString="{0:MM/dd/yyyy}" DataType="System.DateTime">

<ColumnValidationSettings EnableRequiredFieldValidation="true">

<RequiredFieldValidator ForeColor="Red" Text="*Required" Display="Static">

</RequiredFieldValidator>

</ColumnValidationSettings>

</telerik:GridDateTimeColumn>

<telerik:GridDateTimeColumn UniqueName="Time" PickerType="TimePicker" HeaderText="Time" HeaderStyle-Width="14%" DataField="TransactionTime" DataType="System.DateTime" DataFormatString="{0:HH:MM}">

<ColumnValidationSettings EnableRequiredFieldValidation="true">

<RequiredFieldValidator ForeColor="Red" Text="*Required" Display="Static">

</RequiredFieldValidator>

</ColumnValidationSettings>

</telerik:GridDateTimeColumn>

<telerik:GridTemplateColumn UniqueName="Contact" HeaderText="Contact" HeaderStyle-Width="10%" DataField="Contact">

<ItemTemplate>

<%#Eval("Contact") %>

</ItemTemplate>

<EditItemTemplate>

<telerik:RadNumericTextBox runat="server" ID="radNumericTextBox" MinValue="0" NumberFormat-DecimalDigits="0" MaxValue="2147483647" Width="200px">

</telerik:RadNumericTextBox>

<asp:RequiredFieldValidator ForeColor="Red" ControlToValidate="radNumericTextBox" runat="server" ErrorMessage="*Required" Display="Static"></asp:RequiredFieldValidator>

</EditItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<ClientSettings AllowKeyboardNavigation="true">

<%--<ClientEvents OnRowCreating="OnRowCreating" />--%>

</ClientSettings>

</telerik:RadGrid>

Grid

answered on 11 Mar 2016

1 answer

275 views

[Solved] Hide Edit Link Based on Condition

hi

How should i hide Edit link based on Permission Type. For example, if PermissionType is User then i want to hide the Edit link in the grid. Here is my code.

<telerik:GridBoundColumn DataField="PermissionType" FilterControlAltText="Filter PermissionType column" HeaderText="Type" SortExpression="PermissionType" UniqueName="PermissionType">
<ColumnValidationSettings>
<ModelErrorMessage Text="" />
</ColumnValidationSettings>
</telerik:GridBoundColumn>
<telerik:GridButtonColumn ButtonType="LinkButton" CommandName="editcolumn" FilterControlAltText="Filter column column" ItemStyle-ForeColor="Blue" ItemStyle-Font-Underline="true" HeaderText="Edit" Text="Edit"
UniqueName="editcolumn" >
<ItemStyle Font-Underline="True" ForeColor="Blue"></ItemStyle>
</telerik:GridButtonColumn>

Thanks a lot

Grid

answered on 11 Mar 2016

3 answers

149 views

[Solved] After upload image isn't selected if it's not on first page of file explorer file list

Using version: 2016.1.113.40

If i upload a file using the upload button found in the image manager and the file that is uploaded doesn't appear on the first page of results, then the image isn't pre-selected after upload. This is an issue if there are a lot of files and/or pages of files to choose from. in almost all cases when a user uploads an image they want to insert that image, so having to go find it in the file list is an inconvenience. everything works fine if the image that is uploaded appears on the current page of file results. It is only when there are multiple pages of files and the image uploaded appears to appear at the end of the list that the image isn't pre-selected after upload. The only other thing of interest to note is that we use the EditorDialogs files because we have some minor customizations that we've made in the default dialogs.

I've created a video that you can watch that demonstrates this issue.

https://www.youtube.com/watch?v=39DnAbTI7Pc&feature=youtu.be&hd=1

Thanks!

-Mark

FileExplorer

answered on 11 Mar 2016

1 answer

209 views

how to populate FileExplorer from List?

Hi,

I am retrieving file names and meta data from Web Service and have them in a C# List.

How can I set this list as source to populate them in FileExplorer?

Tried something like that with no success.

List<Telerik.Web.UI.Widgets.FileItem> files = new List<Telerik.Web.UI.Widgets.FileItem>();
files.Add(new Telerik.Web.UI.Widgets.FileItem(filetmp.Name, filetmp.Extension, filetmp.Length, filetmp.FullName, filetmp.FullName, filetmp.FullName, Telerik.Web.UI.Widgets.PathPermissions.Delete | Telerik.Web.UI.Widgets.PathPermissions.Read | Telerik.Web.UI.Widgets.PathPermissions.Upload));

FileExplorer1.Grid.Source = files;

thanks

FileExplorer

answered on 11 Mar 2016

2 answers

156 views

RadGrid filters do not work when lazy loading

Hi,

I have a radgrid bound to serverside datasource. It is configured for delayed loading and that works like a charm.I have column filters on the rad-grid. But
after coding for lazy loading the filter has stopped working. No request is triggered to the server when I type text in the filter textbox. I tried all the filter specific options on the grid and column. If I comment the 'lazy loading' code the filters start working again. I am guessing the control IDs getting changed somewhere?

Code pasted below for your reference. Please help.

Thank You

ASPX Javascript

<telerik:RadCodeBlock runat="server">

<script type="text/javascript">

var isInitialLoad = true;

function pageLoad(sender, args)

{

if (isInitialLoad)

{

isInitialLoad = false;

setTimeout(function()

{

var manager = $find('<%= ramManager.ClientID %>');

manager.ajaxRequest("BindTerms");

}, 1000);

}

</script>

</telerik:RadCodeBlock>

ASPX Grid

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<telerik:RadAjaxManager runat="server" ID="ramManager">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID = "ramManager">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1"

LoadingPanelID="pnlLoading"/>

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadAjaxPanel1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1"

LoadingPanelID="pnlLoading"/>

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnAddOpportunity">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1"

LoadingPanelID="pnlLoading" />

<telerik:AjaxUpdatedControl ControlID="msgPlaceHolder" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="lnkAddNew">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1"

LoadingPanelID="pnlLoading" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="pnlLoading" runat="server" meta:resourcekey="pnlLoadingResource1"></telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="pnlLoading">

<div id="popup">

<div id="msgPlaceHolder" runat="server" />

<table style="width: 100%">

<tr>

<td>

<div>

<telerik:RadGrid

runat="server"

AutoGenerateColumns="false"

OnNeedDataSource="grdPTerms_NeedDataSource"

AllowFilteringByColumn="true"

ID="grdPTerms">

<ClientSettings>

<Scrolling

AllowScroll="True"

UseStaticHeaders="True"

SaveScrollPosition="true"

ScrollHeight="290px"></Scrolling>

</ClientSettings>

<MasterTableView>

<ColumnGroups>

<telerik:GridColumnGroup

HeaderText="AMAR"

Name="Amar"

HeaderStyle-HorizontalAlign="Center">

</telerik:GridColumnGroup>

</ColumnGroups>

<ColumnGroups>

<telerik:GridColumnGroup

HeaderText="My Report License"

Name="MYReportLicense"

HeaderStyle-HorizontalAlign="Center">

</telerik:GridColumnGroup>

</ColumnGroups>

<ColumnGroups>

<telerik:GridColumnGroup

HeaderText="Demo Pack"

Name="DemoPack"

HeaderStyle-HorizontalAlign="Center">

</telerik:GridColumnGroup>

</ColumnGroups>

<ColumnGroups>

<telerik:GridColumnGroup

HeaderText="POC Pack"

Name="POCPack"

HeaderStyle-HorizontalAlign="Center">

</telerik:GridColumnGroup>

</ColumnGroups>

<ColumnGroups>

<telerik:GridColumnGroup

HeaderText="Quick Service"

Name="QuickService"

HeaderStyle-HorizontalAlign="Center">

</telerik:GridColumnGroup>

</ColumnGroups>

<ColumnGroups>

<telerik:GridColumnGroup

HeaderText="VirtDB License"

Name="VirtDB"

HeaderStyle-HorizontalAlign="Center">

</telerik:GridColumnGroup>

</ColumnGroups>

<Columns>

<telerik:GridBoundColumn

DataField="i_id"

UniqueName="i_id"

Display="false"

HeaderText="ID"></telerik:GridBoundColumn>

<telerik:GridBoundColumn

DataField="i_partner_id"

UniqueName="i_partner_id"

Display="false"

HeaderText="ID"></telerik:GridBoundColumn>

<telerik:GridBoundColumn

DataField="s_partner"

AllowFiltering="true"

CurrentFilterFunction="Contains"

FilterDelay="1000"

HeaderText="Name"

HeaderStyle-Width="110px">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn

HeaderText="Advance"

ColumnGroupName="Amar"

AllowFiltering="false"

UniqueName="ColMyAmarAdvance"

HeaderStyle-Width="55px">

<ItemTemplate>

<telerik:RadNumericTextBox ID='t_am_poapproved'

runat="server" MaxLength="2"

NumberFormat-DecimalDigits="0"

Text='<%# Bind("am_poapproved")%>'

Width="40px"

EnabledStyle-HorizontalAlign="Right">

</telerik:RadNumericTextBox>

<span>%</span>

<span style="color: red; font-size: 12px; font-weight: bold">*</span>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn

HeaderText="License Approval"

ColumnGroupName="Amar"

AllowFiltering="false"

UniqueName="ColAmarFinal"

HeaderStyle-Width="50px">

<ItemTemplate>

<telerik:RadNumericTextBox ID="t_am_final"

runat="server" MaxLength="2"

NumberFormat-DecimalDigits="0"

Text='<%# Bind("am_final")%>'

Width="40px"

EnabledStyle-HorizontalAlign="Right">

</telerik:RadNumericTextBox>

<span>%</span>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<GroupingSettings CaseSensitive="false" />

</telerik:RadGrid>

</div>

</td>

</tr>

</table>

</div>

</telerik:RadAjaxPanel>

</form>

</body>

Irrelevant code is removed.

Code Behind

protected void Page_Load(object sender, EventArgs e)

{

ramManager.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(RadAjaxManager1_AjaxRequest);

}

void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)

{

if (e.Argument == "BindTerms")

{

grdPTerms.Rebind();

}

protected void grdPTerms_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

if (Page.IsPostBack)

{

List<Partner> pList = (List<Partner>)Application["QRPartner"];

SrvPaymentTerm srvPT = new SrvPaymentTerm();

DataTable dt = srvPT.Select(pList);

grdPTerms.DataSource = dt;

}

else

{

DataTable dt = new DataTable();

grdPTerms.DataSource = dt;

}

Grid

answered on 11 Mar 2016

3 answers

415 views

[Solved] Export to PDF - filename is always coming back as "undefined"

I am using version 2016.1.225.40 of your asp.net for ajax controls.

I'm using ClientExportManager to export a PDF of a section of a page (a radgrid with page breaks).

It is exporting correctly, but when the browser gets the file, the filename is coming up as "undefined".

I've tried various things; nothing is working. The telerik tags and javascript are below.

I've tried it without the PdfSettings section in the clientexportmanager.

<telerik:RadClientExportManager ID="PDFExportManager" runat="server" OnClientPdfExported="onClientPdfExported">

I've tried the javascript by passing a pdfSettings to the export, and also by using set_pdfSettings. I get the same problem either way.

What am I doing wrong? Why do I get "undefined" for my filename???

Thanks,

Brent

ClientExportManager

answered on 11 Mar 2016