Questions on UI for ASP.NET AJAX Forum

2 answers

443 views

Hi,

I have a problem when I use the ajaxmanager with user control. This generate a error on JavaScript and I don't understand why?

The first time everything is Ok, but when I press submit the page generate this issue:

Uncaught Sys.WebForms.PageRequestManagerParserErrorException: Sys.WebForms.PageRequestManagerParserErrorException: No se pudo analizar el mensaje recibido del servidor. Este error suele producirse cuando la respuesta resulta modificada por llamadas a Response.Write() o cuando los filtros de respuesta, los HttpModules o el seguimiento de servidor están habilitados.

Detalles: Error de análisis cerca de ':"text/javascript"}|

<!DOCTYPE html>

'.

I have tried placing a radajaxmanagerproxy in the user control as shown in Demo. But I always get the same result.

Any ideas?

Code User Control.

<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">

<style>

.rcInputCell

{

padding: 0 !important;

width: 0 !important;

}

.HiddenTextBox

{

width: 1px !important;

border: 0 !important;

margin: 0 !important;

background: none transparent !important;

display: none;

}

</style>

<script type="text/javascript">

function isValidDate(str) {

var parts = str.split('/');

if (parts.length < 3)

return false;

else {

var day = parseInt(parts[0]);

var month = parseInt(parts[1]);

var year = parseInt(parts[2]);

if (isNaN(day) || isNaN(month) || isNaN(year)) {

return false;

}

if (day < 1 || year < 1)

return false;

if (month > 12 || month < 1)

return false;

if ((month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) && day > 31)

return false;

if ((month == 4 || month == 6 || month == 9 || month == 11) && day > 30)

return false;

if (month == 2) {

if (((year % 4) == 0 && (year % 100) != 0) || ((year % 400) == 0 && (year % 100) == 0)) {

if (day > 29)

return false;

} else {

if (day > 28)

return false;

}

return true;

}

function getPosition(element) {

var xPosition = 0;

var yPosition = 0;

while (element) {

xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);

yPosition += (element.offsetTop - element.scrollTop + element.clientTop);

element = element.offsetParent;

}

return { x: xPosition, y: yPosition };

}

</script>

</telerik:RadScriptBlock>

<telerik:RadMaskedTextBox ID="rmtbFechaInicial" runat="server" ClientIDMode="Static" Width="130px">

</telerik:RadMaskedTextBox>

<telerik:RadDatePicker ID="rdpFechaInicial" runat="server" Culture="es-ES" ClientIDMode ="Static" Width="30px">

<DateInput CssClass="HiddenTextBox"></DateInput>

</telerik:RadDatePicker>

Code behind User Control

public partial class ctrlFecha : System.Web.UI.UserControl

{

public enum TipoDeUso

{

Normal,

Periodo

}

#region Propiedades

public DateTime? FechaSeleccionada

{

get { return rdpFechaInicial.SelectedDate; }

set { rdpFechaInicial.SelectedDate = Convert.ToDateTime(value); }

}

private string _nombreCtrlMascara = "rmtbFechaInicial";

public string NombreCtrlMascara { get { return _nombreCtrlMascara; } set { _nombreCtrlMascara = value; } }

private string _nombreCtrlPicker = "rdpFechaInicial";

public string NombreCtrlPicker { get { return _nombreCtrlPicker; } set { _nombreCtrlPicker = value; } }

private TipoDeUso _tipoDeUso = TipoDeUso.Normal;

public TipoDeUso TipoUso { get { return _tipoDeUso; } set { _tipoDeUso = value; } }

private string _mascaraUsar = "##/##/####";

public string MascaraUsar { get { return _mascaraUsar; } set { _mascaraUsar = value; } }

private bool _usarValidacionJS = false; ]

public bool UsarValidacionJS { get { return _usarValidacionJS; } set { _usarValidacionJS = value; } }

public RadMaskedTextBox CtrolMaskedTextBox { get { return rmtbFechaInicial; } set { rmtbFechaInicial = value; } }

public RadDatePicker CtrolDatePicker { get { return rdpFechaInicial; } set { rdpFechaInicial = value; } }

#endregion

protected void Page_Load(object sender, EventArgs e)

{

//if (!IsPostBack)

//{

rmtbFechaInicial.ID = NombreCtrlMascara;

rmtbFechaInicial.Mask = MascaraUsar;

rmtbFechaInicial.ClientEvents.OnBlur = "UpdateCalendar_" + NombreCtrlPicker;

rdpFechaInicial.DateInput.DateFormat = TipoUso == TipoDeUso.Normal ? "dd/MM/yyyy" : "MM/yyyy";

rdpFechaInicial.ID = NombreCtrlPicker;

rdpFechaInicial.DatePopupButton.Attributes["OnClick"] = "Popup_" + NombreCtrlPicker + "(); return false;";

rdpFechaInicial.ClientEvents.OnDateSelected = "UpdateTextBox_" + NombreCtrlPicker;

if (FechaSeleccionada != null)

rmtbFechaInicial.TextWithLiterals = Convert.ToDateTime(FechaSeleccionada).ToString(rdpFechaInicial.DateInput.DateFormat);

//rdpFechaInicial.SelectedDate = FechaSeleccionada;

rdpFechaInicial.Calendar.FastNavigationSettings.TodayButtonCaption = "Hoy";

rdpFechaInicial.Calendar.FastNavigationSettings.OkButtonCaption = "Aceptar";

rdpFechaInicial.Calendar.FastNavigationSettings.CancelButtonCaption = "Cancelar";

rdpFechaInicial.DatePopupButton.ToolTip = "Abrir calendario";

StringBuilder sbJS = new StringBuilder();

sbJS.AppendLine("");

sbJS.AppendLine("function UpdateTextBox_" + rdpFechaInicial.ID + "(sender, args) { ");

sbJS.AppendLine(" var maskedInput = $find('" + rmtbFechaInicial.ClientID + "');");

sbJS.AppendLine(" maskedInput.set_value(\"\");");

sbJS.AppendLine(" var fecha = args.get_newDate();");

sbJS.AppendLine(" var datePicker = $find('" + rdpFechaInicial.ClientID + "');");

sbJS.AppendLine(" var date = datePicker.get_dateInput().parseDate(args.get_newDate());");

sbJS.AppendLine(" var dateInput = datePicker.get_dateInput();");

sbJS.AppendLine(" var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());");

sbJS.AppendLine(" maskedInput.set_value(formattedDate);");

sbJS.AppendLine("}");

sbJS.AppendLine("");

sbJS.AppendLine("function UpdateCalendar_" + rdpFechaInicial.ID + "() {");

sbJS.AppendLine(" var maskedInput = $find('" + rmtbFechaInicial.ClientID + "');");

sbJS.AppendLine(" var datePicker = $find(\'" + rdpFechaInicial.ClientID + "');");

sbJS.AppendLine(" //Determinando si viene vacio");

sbJS.AppendLine(" if (maskedInput.get_value()==\"\") { datePicker.set_selectedDate(null); return; }");

sbJS.AppendLine(" //Determinando si es una fecha validad");

if (TipoUso == TipoDeUso.Periodo)

{

sbJS.AppendLine(" var dateValid = isValidDate(\"01/\" + maskedInput.get_valueWithLiterals());");

}

else if (TipoUso == TipoDeUso.Normal)

{

sbJS.AppendLine(" var dateValid = isValidDate(maskedInput.get_valueWithLiterals());");

}

sbJS.AppendLine(" if (!dateValid) {");

if (UsarValidacionJS)

{

sbJS.AppendLine(

"       var oAlert = radalert(\"Debe de ingresar una fecha valida.\", 256, 47, \"Campo requerido\", null, \"../imagenes/error1.jpg\");"

);

sbJS.AppendLine(" oAlert.show();");

}

//sbJS.AppendLine(" maskedInput.set_value(\"\");");

sbJS.AppendLine(" datePicker.set_selectedDate(null);");

sbJS.AppendLine(" return;");

sbJS.AppendLine(" }");

if (TipoUso == TipoDeUso.Periodo)

{

sbJS.AppendLine(" var fecha = \"01\" + maskedInput.get_value()");

sbJS.AppendLine(" var date = datePicker.get_dateInput().parseDate(fecha);");

}

else if (TipoUso == TipoDeUso.Normal)

{

sbJS.AppendLine(" var date = datePicker.get_dateInput().parseDate(maskedInput.get_value());");

}

sbJS.AppendLine(" var dateInput = datePicker.get_dateInput();");

sbJS.AppendLine(" if (date == null) {");

sbJS.AppendLine(" date = datePicker.get_selectedDate();");

sbJS.AppendLine(" }");

sbJS.AppendLine(" var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat()); ");

sbJS.AppendLine(" datePicker.set_selectedDate(date);");

sbJS.AppendLine(" if (!isNaN(date) && date > datePicker.get_minDate() && date < datePicker.get_maxDate()) {");

sbJS.AppendLine(" datePicker.set_selectedDate(date);");

sbJS.AppendLine(" }");

sbJS.AppendLine(" else {");

sbJS.AppendLine(" var oldSelectedDate = datePicker.get_selectedDate();");

sbJS.AppendLine(" if (oldSelectedDate == null) return;");

sbJS.AppendLine(" if (oldSelectedDate.toString() == datePicker.get_minDate().toString()) {");

sbJS.AppendLine(" maskedInput.set_value(\"\");");

sbJS.AppendLine(" }");

sbJS.AppendLine(" else {");

sbJS.AppendLine(" maskedInput.set_value(DateToString(oldSelectedDate));");

sbJS.AppendLine(" }");

sbJS.AppendLine("}");

sbJS.AppendLine("");

sbJS.AppendLine("function Popup_" + rdpFechaInicial.ID + "() {");

sbJS.AppendLine(" var datePicker = $find('" + rdpFechaInicial.ClientID + "');");

sbJS.AppendLine(" var maskedInput = $find('" + rmtbFechaInicial.ClientID + "');");

sbJS.AppendLine(" var textBox = datePicker.get_textBox();");

sbJS.AppendLine(" var position = getPosition(maskedInput._textBoxElement);");

sbJS.AppendLine(" var popupElement = datePicker.get_popupContainer();");

sbJS.AppendLine(" datePicker.showPopup(position.x, position.y + maskedInput._textBoxElement.offsetHeight);");

sbJS.AppendLine("}");

ScriptManager.RegisterStartupScript(Page, typeof(Page), rdpFechaInicial.ID.ToString(), sbJS.ToString(), true);

//}

}

Code page .aspx

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

<ClientEvents OnRequestStart="onRequestStart" />

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="btnconsultar">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="divContenido" LoadingPanelID="ralpCasos"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="ralpCasos" runat="server"></telerik:RadAjaxLoadingPanel>

<div class="row" id="divContenido" runat="server">

<div class="col-xs-12">

<div class="panel panel-info" style="margin-left: 10px; margin-right: 10px;">

<table class="table" border="0">

<tr>

<td style="width: 60px;"></td>

<td style="width: 100px; vertical-align: middle;">

<asp:Label ID="lblFechaInicial" runat="server" Font-Size="14px" Text="Desde"></asp:Label>

</td>

<td>

<uc1:ctrlFecha runat="server"

ID="ctrlFecha"

MascaraUsar="##/##/####"

NombreCtrlMascara="rmtbFechIni"

NombreCtrlPicker="rdpFechIni"

TipoUso="Normal" UsarValidacionJS="false" />

<asp:Label ID="lbErrorFechaIni" runat="server"></asp:Label>

</td>

<td></td>

<td style="width: 100px; vertical-align: middle;">

<asp:Label ID="lblFechaFinal" runat="server" Font-Size="14px" Text="Hasta"></asp:Label>

</td>

<td>

<uc1:ctrlFecha runat="server"

ID="ctrlFecha1"

MascaraUsar="##/##/####"

NombreCtrlMascara="rmtbFechaFinCasos"

NombreCtrlPicker="rdpFechaFinCasos"

TipoUso="Normal" UsarValidacionJS="false" />

</td>

</tr>

<tr>

<td style="width: 60px;"></td>

<td style="width: 100px; vertical-align: middle;">

<asp:Label ID="Label1" runat="server" Text="Buscar por"></asp:Label>

</td>

<td colspan="2">

<telerik:RadTextBox runat="server" ID="txtBusqueda"

Width="100%" EmptyMessage="No. Caso, Título, Solicitante, Usuario asignado o seguidor...">

</telerik:RadTextBox>

</td>

<td colspan="2" style="text-align: right; padding-right: 100px;">

<telerik:RadButton ID="btnconsultar" runat="server" OnClick="btnconsultar_Click" Style="display: inline-block !important;" Text="Consultar">

<Icon PrimaryIconUrl="../imagenes/buscar.png" />

</telerik:RadButton>

</td>

</tr>

<tr>

<td colspan="5">

<asp:Label runat="server" ID="lbMostrarErrores" ForeColor="Red"></asp:Label>

</td>

</tr>

</table>

</div>

Thanks for your help.

General Discussions

answered on 27 May 2016

1 answer

164 views

RadWindow Doesn't Close When Used with Validation Group

I've read a number of articles about this and thought I took the necessary steps to correct it, but it still isn't working.

I've got a RadWindow with a number of controls defined on it that are all in the same ValidationGroup. On the button to save the stuff I've specified:

ValidationGroup="attachmentValidations"

When I do this my data is saved, but the RadWindow will not close.

If I remove the above and add:

CausesValidation="true"

It will close the window, but doesn't appear to do any validation.

I've added the following lines per your help article:

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

Still no luck. Any help would be appreciated.

Rodney

Window

answered on 27 May 2016

3 answers

597 views

RadWindow closes after DropDownListBox postback

I have a DropDownListBox with the AutoPostBack="true" on a RadWindow, it is also defined as an AsyncPostBackTrigger inside the UpdatePanel of the RadWindow.

<asp:DropDownList ID="ddlAttachDocType" runat="server" CausesValidation="false" DataTextField="LookUpTypeDescription"

DataValueField="LookUpTypeValue" Width="300" OnSelectedIndexChanged="ddlAttachDocType_SelectedIndexChanged"

AutoPostBack="true" />

<asp:AsyncPostBackTrigger ControlID="ddlAttachDocType" EventName="SelectedIndexChanged" />

When the SelectedIndexChange event fires my RadWindow closes.

What am I missing? I need to hide/display certain div's on the page based on the SelectedIndexChange value.

Rodney

Window

answered on 27 May 2016

1 answer

100 views

Width to fill remaining area

Hi
I would like a RadNumericTextBox to extend its width to fill the Div its placed within.
This works fine when there is just a label and RadNumericTextBox. But when I place a RadDropDownList in front of the RadNumericTextBox
The Width doesn’t grow.
Please see the picture, and my markup code.
I have used many variations of css Setting the Width:100%; But try as I have, there seems something about the RadDropDownList that interferes.

Thanks for any help

Mark

<%--pcs_cost_per_unit--%>

<div class="rdfRow">

<asp:Label ID="Label1" runat="server" AssociatedControlID="pcs_cost_per_unitTextBox" CssClass="rdfLabel" Text="pcs_cost_per_unit"></asp:Label>

<telerik:RadDropDownList RenderMode="Lightweight" runat="server" ID="RadDropDownListpcs_cost_per_unit" Width="50" DataMember="pcs_cost_per_unit_currency"

SelectedValue='<%# DataBinder.Eval(Container.DataItem, "pcs_cost_per_unit_currency") %>'>

</telerik:RadDropDownList>

<telerik:RadNumericTextBox ID="pcs_cost_per_unitTextBox" runat="server" DataType="Decimal"

DbValue='<%# Bind("pcs_cost_per_unit") %>' RenderMode="Lightweight" Skin="<%#Container.OwnerDataForm.Skin %>" CssClass="rdfInput" />

</div>

<div class="rdfRow">

<asp:Label ID="pcs_dutyLabel2" runat="server" AssociatedControlID="pcs_dutyTextBox" CssClass="rdfLabel" Text="pcs_duty"></asp:Label>

<telerik:RadNumericTextBox ID="pcs_dutyTextBox" runat="server" DataType="Double"

DbValue='<%# Bind("pcs_duty") %>' RenderMode="Lightweight" Skin="<%#Container.OwnerDataForm.Skin %>" WrapperCssClass="rdfInput" />

</div>

<div class="rdfRow">

<asp:Label ID="pcs_contingencyLabel2" runat="server" AssociatedControlID="pcs_contingencyTextBox" CssClass="rdfLabel" Text="pcs_contingency"></asp:Label>

<telerik:RadNumericTextBox ID="pcs_contingencyTextBox" runat="server" DataType="Double"

DbValue='<%# Bind("pcs_contingency") %>' RenderMode="Lightweight" Skin="<%#Container.OwnerDataForm.Skin %>" WrapperCssClass="rdfInput" />

</div>

<div class="rdfRow">

<asp:Label ID="pcs_wastageLabel2" runat="server" AssociatedControlID="pcs_wastageTextBox" CssClass="rdfLabel" Text="pcs_wastage"></asp:Label>

<telerik:RadNumericTextBox ID="pcs_wastageTextBox" runat="server" DataType="Double"

DbValue='<%# Bind("pcs_wastage") %>' RenderMode="Lightweight" Skin="<%#Container.OwnerDataForm.Skin %>" WrapperCssClass="rdfInput" />

</div>

NumericTextBox

answered on 27 May 2016

6 answers

325 views

Border inside Table

I have a problem. I can't create a border inside cells. I think there is a bug inside style builder. On Your default example of RadEditor this doesn't work too. Help please!

There is a possibility to turn on a default style for cells inside a table?

Editor

answered on 27 May 2016

1 answer

193 views

Unable to get property 'value' in Telerik.Web.UI.RadInputExtender.prototype.isEmpty

Hi,

I received the following error , it triggered trough Telerik.Web.UI.WebResource.axd during processing submit event, so I cannot know which component causes the problem.

In Telerik.Web.UI.WebResource.axd at line 31126

"if(!(a.value&&a.value.replace(/ /g,""))){return true;"

it gives errors saying:

"Unable to get property 'value' of undefined or null reference"

well the "a" is null , but which telerik or ui item it really refers?

The Call Stack is:

Telerik.Web.UI.RadInputExtender.prototype.isEmpty [Line: 31126, Col: 1], Telerik.Web.UI.WebResource.axd

Telerik.Web.UI.RadInputExtender.prototype.get_value [Line: 31132, Col: 7], Telerik.Web.UI.WebResource.axd
Telerik.Web.UI.RadInputExtender.prototype._beforeSubmit [Line: 31248, Col: 1], Telerik.Web.UI.WebResource.axd
Telerik.Web.UI.RadInputManager.prototype._beforeSubmit [Line: 31311, Col: 6], Telerik.Web.UI.WebResource.axd
Telerik.Web.UI.RadInputManager.prototype._onSubmit [Line: 31307, Col: 58], Telerik.Web.UI.WebResource.axd
Telerik.Web.UI.RadInputManager.WebForm_OnSubmit [Line: 31322, Col: 56], Telerik.Web.UI.WebResource.axd
onsubmit [Line: 21, Col: 90], ManualInvoiceEdit2.aspx
Sys.WebForms.PageRequestManager.prototype._onFormSubmit [Line: 15, Col: 22512], Telerik.Web.UI.WebResource.axd
Sys.WebForms.PageRequestManager.prototype._doPostBack [Line: 15, Col: 15349], Telerik.Web.UI.WebResource.axd
Sys.WebForms.PageRequestManager.prototype._doPostBackWithOptions [Line: 15, Col: 16021], Telerik.Web.UI.WebResource.axd
Anonymous function [Line: 6, Col: 298], Telerik.Web.UI.WebResource.axd
Global code [Line: 1, Col: 1], script block (423)

I have

Telerik.Web.UI.dll 2016.2.504.40
Telerik.Web.UI.Skins.dll 2016.2.504.40
jQuery 1.11.1

Any help or comment?

Thanks.

General Discussions

answered on 27 May 2016

1 answer

196 views

Working with LineSeries colors

Hi,

How can I dynamically (with C# code) associate the same color to the LineSeries Name (along with the X Axis), and the actual chart line in the SeriesItems?

General Discussions

answered on 27 May 2016

0 answers

114 views

applying CSS for substring text in Treeview node text

Hi,

I am trying to find out a way to apply CSS for a substring of characters on kendo tree view nodes

For example in the below tree view node texts, I want the substrings (100), (55), (45) in the node texts to be shown in Red color. Can you help me achieve this? Appreciate your help on this.

ParentNode1 (100)

Childnode1

Childnode2 (55)

Childnode3 (45)

TreeView

asked on 26 May 2016

1 answer

61 views

How to change or fix the chart type from AreaChart to LineChart

Hi,

I have coded the ASPX page for LineChart (same as in the demo code) as below. But the chart is displayed as an AreaChart, not a LineChart.

Is the any way or dynamic code that i can force the chart from Area Chart to Line Chart?

<telerik:RadHtmlChart runat="server" ID="LineChart" Width="800" Height="500" Transitions="true" Skin="Silk"> ........

General Discussions

answered on 26 May 2016

3 answers

84 views

Image Does not Save in live system

In testing, editing the image works as expected.

When the site is published and a user edits an image, clicks save etc, the changes to the image are not saved.

Everything else about the site seems fine, I could not find anywhere if certain folder need certain permissions. I believe all the correct permissions on the folder where the images are stored is correct.

Is there anything anyone could suggest I try to resolve the issue.

ImageEditor

answered on 26 May 2016