Questions on UI for ASP.NET AJAX Forum

6 answers

787 views

dynamic reload PageView content for RadMultiPage

If there exists any possibility to make ajax reload of one PageView from RadMultiPage without reloading content of others pages ?

For example.
I'd like to load controls to RadMultiPage only after user select the corresponding Tab. My page is look like browser with many pages. Each PageView contains <frame>. But after new page loads content of all other's pages reloading :(.

TabStrip

answered on 30 May 2016

2 answers

55 views

Add to Undo Stack

Hello,

I am writing a number of custom shortcut commands activated by button clicks. While the commands are firing properly, most of them are not being recognized in the undo stack - i.e. user cannot press the undo button to reverse the command. When they do press it, they undo a command prior to running the custom command, stepping back to a document version they were not expecting. My question is, how do I have the undo stack recognize my custom commands and allow the user to undo them? Here's an example of a function with this issue.

            Telerik.Web.UI.Editor.CommandList["DoubleBottomBorder"] = function(commandName, editor, args) {
                       var elem = editor.getSelectedElement();
                       elem.style.borderBottom = "3px double #000000";
            };

Most of my functions are setting the style attribute of an element and are not using the pasteHtml() method (use of pasteHTML() method seems to work fine with the undo function).

Thanks,

Andrew

Documentation and Tutorials

answered on 27 May 2016

2 answers

424 views

AjaxManager with User Control

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

151 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

576 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

88 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

313 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

174 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

170 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

91 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