Dear Telerik Team,
We are using the radgrid to perform insert/update/delete functionalities.
Problem:
The update button in the radgrid is not working when we add the grid in the ajax manager settings.
But if we do not include the radgrid in the ajax manager settings, the update button is hitting the server side while clicking it.
This happens when we add the client side javascript code for validation, while updating in the grid.
Required Solution:
After performing the validation in the client side for radgrid update button, If the validation is success, the grid update button should call the server side code.
Product: "Telerik RadControls for ASP.NET AJAX Q1 2012"
Please look into this issue and get back to us ASAP.
Please find below sample code for your reference.
--------------------sample code-----------------------
//-->this code is not calling the server side, on grid update button
----------------------------------
<telerik:RadAjaxManager ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1"
runat="server">
<ClientEvents />
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
----------------------------------
----------------------------------
//this code is calling the server side, on grid update button
----------------------------------
<telerik:RadAjaxManager ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1"
runat="server">
<ClientEvents />
<AjaxSettings>
</AjaxSettings>
</telerik:RadAjaxManager>
----------------------------------
---------
//////////////////////////////////
/////////////////About.aspx/////////////////////////////
<%@ Page Title="About Us" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="About.aspx.cs" Inherits="About" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1"
runat="server">
<ClientEvents />
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
</telerik:RadAjaxLoadingPanel>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function ValidateOnInsert(PRODUCTID) {
alert('ValidateOnInsert() called...');
var txtPRODUCTID = document.getElementById(PRODUCTID);
return true;
}
</script>
</telerik:RadCodeBlock>
<asp:Button ID="Button1" runat="server" Text="Button" />
<div>
<telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" BorderStyle="Solid"
CellSpacing="0" AllowPaging="True" Height="401px" OnItemDataBound="RadGrid1_ItemDataBound">
<MasterTableView CommandItemDisplay="Top" AllowPaging="true" PageSize="10">
<Columns>
<telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">
<ItemStyle></ItemStyle>
</telerik:GridEditCommandColumn>
<telerik:GridButtonColumn ConfirmText="Do you want to delete the PRODUCT?" ConfirmDialogType="RadWindow"
ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete"
UniqueName="DeleteColumn">
</telerik:GridButtonColumn>
</Columns>
<CommandItemTemplate>
<div style="padding: 5px 5px;">
<asp:LinkButton ID="lnkBtnAddNewPRODUCT" runat="server" CommandName="InitInsert"
Visible='<%# !RadGrid1.MasterTableView.IsItemInserted %>'><img style="border:0px;vertical-align:middle;" alt="" />Add new PRODUCT</asp:LinkButton>
<asp:LinkButton ID="lnkBtnRefreshPRODUCTList" runat="server" CommandName="RebindGrid"><img id="imgRefreshPRODUCTList" style="border:0px;vertical-align:middle;" alt="" />Refresh</asp:LinkButton>
</div>
</CommandItemTemplate>
<CommandItemSettings ExportToPdfText="Export to PDF" />
<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">
</RowIndicatorColumn>
<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">
</ExpandCollapseColumn>
<EditFormSettings EditFormType="Template">
<EditColumn FilterControlAltText="Filter EditCommandColumn column">
</EditColumn>
<FormTemplate>
<div>
<table id="Table2" border="0" cellpadding="1" cellspacing="2" rules="none" style="border-collapse: collapse;">
<tr class="EditFormHeader">
<td colspan="2" style="font-size: small">
<b>PRODUCT Details:</b>
</td>
</tr>
<tr>
<td>
<table id="tbl" border="0" cellpadding="1" cellspacing="1" class="module">
<tr>
<td>
<asp:Label runat="server" Text="*" ID="Label1" CssClass="lblMandatory"></asp:Label>
PRODUCTID:
</td>
<td>
<asp:TextBox ID="txtPRODUCTID" runat="server" Text='<%# Bind("PRODUCTID") %>'>
</asp:TextBox>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" align="right">
<asp:Button ID="btnUpdate" runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'
Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>' />
<asp:Button ID="btnCancel" runat="server" CausesValidation="False" CommandName="Cancel"
Text="Cancel" />
</td>
</tr>
</table>
</div>
</FormTemplate>
</EditFormSettings>
</MasterTableView>
<ClientSettings>
<Selecting AllowRowSelect="True" CellSelectionMode="None" />
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
</ClientSettings>
<FilterMenu EnableImageSprites="False">
</FilterMenu>
</telerik:RadGrid>
</div>
</asp:Content>
///////////////////////////////////////////////////////////////////
///////////////////////About.aspx.cs//////////////////////////////
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using Telerik.Web.UI;
public partial class About : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//if (!IsPostBack)
//{
// RadGrid1.DataSource = GetData();
//}
RadGrid1.DataSource = GetData();
}
private DataTable GetData()
{
DataTable dt = new DataTable();
dt.Columns.Add("PRODUCTID");
for(int i=0;i<50;i++)
{
DataRow dr=dt.NewRow();
dr["PRODUCTID"] = i;
dt.Rows.Add(dr);
}
return dt;
}
protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
if ((e.Item is GridEditFormItem) && (e.Item.IsInEditMode))
{
GridEditFormItem editFormItem = (GridEditFormItem)e.Item;
Button update = (Button)editFormItem.FindControl("btnUpdate");
TextBox box = null;
string paramerters = string.Empty;
box = editFormItem.FindControl("txtPRODUCTID") as TextBox;
paramerters += box.ClientID + "', '";
update.Attributes.Add("onclick", "return ValidateOnInsert('" + paramerters + "')");
}
}
}
///////////////////////////////////////////////////////////////////
Thanks & Regards,
D. Senthil kumar vijai.
2 Answers, 1 is accepted
Rank 1
Is there any update on this issue in "Telerik Radgrid update"?
Thanks & Regards,
D. Senthil kumar vijai.
Instead of attaching the ValidateOnInsert function to the update button you could execute your logic on the RequestStart client-side event of RadAjaxManager. Thus you will make sure that each control that makes postback will validate the input before sending it to the server.
You could find more information about this approach in this help topic.
Regards,
Andrey
Telerik