This is a migrated thread and some comments may be shown as answers.

RadAjaxManager and JQuery

3 Answers 124 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

3 Answers, 1 is accepted

answered on 07 Mar 2014, 03:50 PM

Hello Vasil.

Here is my ASPX:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="CadEdit_Bairros.aspx.cs" Inherits="SWM.Web.UI.Cadastro.CadEdit_Bairros" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

<link href="../Content/Style/controles.css" rel="stylesheet" />

<script type="text/javascript" src="../Content/Script/jquery-2.0.3.min.js"></script>

<script type="text/javascript" src="../Content/Script/Cadastro/CadEdit_Bairros.js"></script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<div id="formscreen">

<h1>

Cadastro/Edição de Bairros

</h1>

<div class="groupform">

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

<ajaxsettings>

<telerik:AjaxSetting AjaxControlID="rgBairros">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rgBairros" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</ajaxsettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" AnimationDuration="10" BorderStyle="Solid" Skin="Metro" />

<telerik:RadWindowManager ID="rwmGerenciador" runat="server" EnableShadow="true"></telerik:RadWindowManager>

<h3>

Bairros

</h3>

<br />

<telerik:RadGrid

ID="rgBairros"

Name="rgBairros"

runat="server"

Culture="pt-BR"

AutoGenerateColumns="false"

AllowMultiRowSelection="false"

OnNeedDataSource="rgBairros_NeedDataSource"

OnItemDataBound="rgBairros_ItemDataBound"

OnUpdateCommand="rgBairros_UpdateCommand"

OnDeleteCommand="rgBairros_DeleteCommand"

OnInsertCommand="rgBairros_InsertCommand"

AllowAutomaticInserts="false"

AllowPaging="true"

PageSize="20"

ShowStatusBar="false" >

<GroupingSettings casesensitive="false" />

<MasterTableView

CommandItemDisplay="Top"

ShowHeadersWhenNoRecords="true"

CommandItemStyle-CssClass="radgrid-header"

NoMasterRecordsText = "Não existe dados cadastrados"

AllowFilteringByColumn="true"

DataKeyNames="ID"

CommandItemSettings-RefreshText="Atualizar"

CommandItemSettings-AddNewRecordText="Adicionar" >

<Columns>

<%--Coluna Descrição--%>

<telerik:GridTemplateColumn

HeaderText="Descrição"

DataField="Descricao"

UniqueName="Descricao" >

<ItemTemplate>

<%# DataBinder.Eval(Container.DataItem, "Descricao")%>

</ItemTemplate>

<EditItemTemplate>

<telerik:RadTextBox

ID="txtDescricao"

runat="server"

Width="400px" >

</telerik:RadTextBox>

<asp:RequiredFieldValidator

ID="rfvDescricao"

runat="server"

ForeColor="Red"

ErrorMessage=" *Campo obrigatório"

ControlToValidate="txtDescricao" >

</asp:RequiredFieldValidator>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<%--Coluna Município--%>

<telerik:GridTemplateColumn

HeaderText="UF"

DataField="ID"

UniqueName="ID"

Visible ="false">

<ItemTemplate>

<%# DataBinder.Eval(Container.DataItem, "ID")%>

</ItemTemplate>

<EditItemTemplate>

<asp:DropDownList

ID="ddlUF"

runat="server"

Width="400px" >

</asp:DropDownList>

<asp:CustomValidator

ID="cfvUF"

runat="server"

ForeColor="Red"

ErrorMessage=" *Campo obrigatório"

ClientValidationFunction="ValidaDdlUF" >

</asp:CustomValidator>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<%--Coluna Município--%>

<telerik:GridTemplateColumn

HeaderText="Municipio"

DataField="Municipio.ID"

UniqueName="Municipio.ID"

Visible ="false">

<ItemTemplate>

<%# DataBinder.Eval(Container.DataItem, "Municipio.ID")%>

</ItemTemplate>

<EditItemTemplate>

<asp:DropDownList

ID="ddlMunicipio"

runat="server"

Width="400px" >

</asp:DropDownList>

<asp:CustomValidator

ID="cfvMunicipio"

runat="server"

ForeColor="Red"

ErrorMessage=" *Campo obrigatório"

ClientValidationFunction="ValidaDdlMunicipio" >

</asp:CustomValidator>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<%--Coluna Botão Editar--%>

<telerik:GridButtonColumn

HeaderText="Editar"

ButtonType="ImageButton"

Text="Editar"

CommandName="Edit"

ImageUrl="~/Images/bt-edit.png"

ItemStyle-HorizontalAlign="Center"

ItemStyle-Width="8px" />

<%--Coluna Botão Excluir--%>

<telerik:GridButtonColumn

HeaderText="Excluir"

ButtonType="ImageButton"

Text="Excluir"

HeaderStyle-Width="40"

CommandName="Delete"

ConfirmText="Tem certeza que deseja excluir o registro?"

ItemStyle-HorizontalAlign="Center"

ItemStyle-Width="8px"

ImageUrl="~/Images/bt-del.png" />

</Columns>

<%--Configurações gerais do modo de edição--%>

<EditFormSettings ColumnNumber="2" >

<FormTableItemStyle Wrap="False" />

<FormCaptionStyle CssClass="EditFormHeader" />

<FormMainTableStyle

GridLines="None"

CellSpacing="0"

CellPadding="3"

BackColor="White"

Width="100%" />

<FormTableStyle

CellSpacing="0"

CellPadding="2"

Height="110px"

BackColor="White" />

<FormTableAlternatingItemStyle Wrap="False" />

<EditColumn

ButtonType="ImageButton"

InsertText="Inserir"

UpdateText="Atualizar"

UniqueName="EditCommandColumn1"

CancelText="Cancelar"

UpdateImageUrl="~/Images/bt-update.png"

InsertImageURL="~/Images/bt-include.png"

CancelImageUrl="~/Images/bt-incl-cancel.png" >

</EditColumn>

<FormTableButtonRowStyle

HorizontalAlign="Right"

CssClass="EditFormButtonRow">

</FormTableButtonRowStyle>

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

</div>

</asp:Content>

My JS:

$(document).ready(function () {

//Encontra o ID do DropDownList de UF

var idDdlUF = "#" + $("[id$='ddlUF']").attr("id");

//Evento é chamado quando o valor do DropDownList UF é modificado

$(idDdlUF).change(function () {

//Verifica o valor do DropDownList de UF

var idUF = $(this).val();

//Tenta carregar o DropDownList de Municipio de acordo com o UF escolhido

$.ajax({

type: "Post",

url: "CadEdit_Bairros.aspx/CarregarDropDownListMunicipio",

data: "{'idUF': '" + idUF + "'}",

dataType: "json",

contentType: "application/json; charset=utf-8",

success: function (data) {

//Deserializa o retorno do JSON

var itens = $.parseJSON(data.d);

//Limpa o DropDownList de Município

var idDdlMunicipio = "#" + $("[id$='ddlMunicipio']").attr("id");

$(idDdlMunicipio).empty();

//Carrega o DropDownList de Município

$.each(itens, function () {

$(idDdlMunicipio).append("<option value='" + this.ID + "'>" + this.Nome + "</option>");

});

$(idDdlMunicipio + ">option[value='0']").prop('selected', true);

},

error: function (data) {

alert("Não foi possível carregar os municípios.");

}

});

/************************************************************************************/

/* Validação dos campos                                                             */

/************************************************************************************/

//DropDownList de UF

function ValidaDdlUF(source, args) {

if ($("[id$='ddlUF']").val() > 0) {

args.IsValid = true;

}

else {

args.IsValid = false;

}

//DropDownList de Municipio

function ValidaDdlMunicipio(source, args) {

if ($("[id$='ddlMunicipio']").val() > 0) {

args.IsValid = true;

}

else {

args.IsValid = false;

}

answered on 12 Mar 2014, 02:22 PM

Hello Mariano,

Use pageLoad instead of the document ready, to be sure that all server IScriptControls are created client side for executing your custom Ajax call. Also make sure you have enabled the script debugging in your browser and you don't see any JavaScript error in the page.
If you have doubts that the problem is in the RadAjaxManager, you can wrap the grid inside normal asp:UpdatePanel and see if it will behave differently.

Regards,
Vasil
Telerik

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.