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

Urgent: Nested grid and Ajax

3 Answers 111 Views

Grid

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

Mansi asked on 28 Jul 2011, 12:22 PM

RadGrid.png

Hi,

I need to refresh the nested grid for some functions. Please check the attached image for clear idea.
There is one textbox below the nested grid and on enter key press of that textbox, I need to rebind the nested grid without postback.
The code for that is as below. Issue is it always posts back the page, which i don't want.
It stores the data in database which I store on "saveComment" function, but on success of that, it does not call the button event, inestead of that it post backs the page.
Where am I wrong?

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

<script type="text/javascript">

$(function () {

$('.water').bind('keypress', function (e) {

var bookID = document.getElementById(this.id.replace('txtComment', 'hdnCommentBookID')).value;

var btnRefreshComment = document.getElementById('<%=btnRefreshComments.ClientID %>');

if (e.keyCode == 13) {

e.preventDefault();

$.ajax({

type: "POST",

url: "LogbookForCoaches.aspx/saveComment",

data: '{commentText:"' + this.value + '",bookid:"' + bookID + '"}',

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

dataType: "json",

success: function (msg) {

btnRefreshComment.click(); //It does not call the event too }

});

}

});

//Delete comment from the comment list

$(function () {

$('.DelComment').click(function () {

var commentID = document.getElementById(this.id.replace('btnImgDelete', 'hdnCommentID')).value;

var bookID = document.getElementById(this.id.replace('btnImgDelete', 'hdnBookID')).value;

$.ajax({

type: "POST",

url: "LogbookForCoaches.aspx/DeleteComment",

data: '{commentID:"' + commentID + '",bookid:"' + bookID + '"}',

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

dataType: "json",

success: function (msg) {

}

});

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"

EnableAJAX="true">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="btnRefreshComments" EventName="Click">

<UpdatedControls>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadGrid ID="dtBook" AllowPaging="True" runat="server" PageSize="10" ShowHeader="false"

OnItemDataBound="dtBook_ItemDataBound">

<PagerStyle Mode="NumericPages" />

<MasterTableView TableLayout="Fixed" DataKeyNames="BookID">

<ItemTemplate>

<table>

<tr>

<td>

<div class="eg-bar">

<span id="faq2-title" class="iconspan">

<img src="../Images/Logbook_Images/down-arrow.png" class="attachmentImage" /></span>Comments:

<asp:Label ID="lblTotalComments" runat="server" ForeColor="Green"></asp:Label></div>

<div id="faq2" class="icongroup1" runat="server">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td>

<div id="divComments" class="Comments" runat="server" style="background-color: #EDEFF4;

border: 1px; border-style: solid; border-color: #dbdbdb; padding-left: 3px;">

<center>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">

</telerik:RadAjaxLoadingPanel>

</center>

<asp:Label ID="lblCommentMessage" runat="server" Text="No comments entered yet."

ForeColor="Red" Visible="false" class="CommentMessage"></asp:Label>

<telerik:RadGrid ID="radComments" AllowPaging="True" runat="server" PageSize="15"

Skin="" GridLines="None" BorderStyle="None" BorderColor="Transparent" ShowHeader="false"

OnItemDataBound="radComments_ItemDataBound" Width="97%" EnableTheming="false"

Style="padding-left: 16px;" OnPageIndexChanged="radComments_PageIndexChanged">

<PagerStyle Mode="NumericPages" />

<MasterTableView TableLayout="Fixed" Width="100%" Height="100%" BorderStyle="None"

DataKeyNames="BookID,commentid,CommentAttachment,userid,Commenttype">

<ItemTemplate>

<table width="100%" border="0" cellspacing="1" cellpadding="1">

<tr>

<td class="altbg" width="5%">

<asp:Image ImageAlign="AbsMiddle" ID="imgWriterImage" runat="server" />

</td>

<td class="altbg" width="20%" align="left">

<strong>

<%# Eval("UserName") + ":" %></strong>

</td>

<td class="altbg" width="55%" align="left">

<%# Eval("Commenttext") %>

</td>

<td align="center" class="altbg" width="20%">

<table border="0" cellspacing="0" cellpadding="4">

<tr>

<td align="center">

<asp:HiddenField ID="hdnCommentID" runat="server" Value='<%# Eval("commentid") %>' />

<asp:HiddenField ID="hdnBookID" runat="server" Value='<%# Eval("bookid") %>' />

<asp:ImageButton ID="btnImgDelete" runat="server" ImageUrl="~/Forum/ForumImages2/delete.gif"

class="DelComment" ToolTip="Delete" />

</td>

</tr>

</table>

</td>

</tr>

</table>

</ItemTemplate>

</MasterTableView>

</telerik:RadGrid>

</div>

</td>

</tr>

<tr>

<td height="30" class="commentstext">

Write Comments For:

</td>

</tr>

<tr>

<td class="writecommentpad">

<asp:RadioButton ID="rdoPublic" runat="server" AutoPostBack="false"

Checked="true" CssClass="PageLabel" GroupName="GrpCommentType" Text="Player & Coaches" />

<asp:RadioButton ID="rdocoaches" runat="server" AutoPostBack="false" CssClass="PageLabel"

GroupName="GrpCommentType" Text="Coaches" />

<asp:RadioButton ID="rdoPrivate" runat="server" AutoPostBack="false" CssClass="PageLabel"

GroupName="GrpCommentType" Text="Me (Private)" />

<br />

<asp:Panel ID="pnlComment" runat="server" Style="padding-left: 20px;">

<asp:HiddenField ID="hdnCommentBookID" runat="server" Value='<%# Eval("BookID")%> ' />

<asp:TextBox ID="txtComment" class="water" runat="server" Width="85%" BorderStyle="Solid"

BorderWidth="1px" ToolTip="Write a comment..." BorderColor="#dbdbdb" Text="Write a comment..."

ValidationGroup='<%# DataBinder.Eval(Container,"ItemIndex") %>'></asp:TextBox><br />

</asp:Panel>

</td>

</tr>

</table>

</div>

</td>

</tr>

</table>

<br />

</ItemTemplate>

</MasterTableView>

</telerik:RadGrid>

<asp:Button ID="btnRefreshComments" runat="server" Text='<%# DataBinder.Eval(Container,"ItemIndex") %>'

Style="display: none;" />

protected void dtBook_ItemDataBound(object sender, GridItemEventArgs e)

{

Book_Comment objComment = new Book_Comment();

DataTable dt = new DataTable();

System.Web.UI.WebControls.Label lblAttachmentMsg = null;

if ((e.Item.ItemType == GridItemType.AlternatingItem | e.Item.ItemType == GridItemType.Item))

{

ID = e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["BookID"].ToString();

string BookId = e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["BookID"].ToString();

TextBox txtComment = (TextBox)e.Item.FindControl("txtComment");

Button btnComment = (Button)e.Item.FindControl("btnComment");

#region "Comments"

RadGrid radComments = (RadGrid)e.Item.FindControl("radComments");

Button objButtonRefresh = (Button)e.Item.FindControl("btnRefreshComments");

HtmlGenericControl divComments = (HtmlGenericControl)e.Item.FindControl("divComments");

Label lblCommentMessage = (Label)e.Item.FindControl("lblCommentMessage");

if (radComments != null)

{

ShowComments(BookId, radComments);

Label lblTotalComments = (Label)e.Item.FindControl("lblTotalComments");

lblTotalComments.Text = "(" + radComments.Items.Count.ToString() + ")";

if (radComments.Items.Count < 1)

lblCommentMessage.Visible = true;

else

lblCommentMessage.Visible = false;

}

AjaxSetting objAjxSetting = new AjaxSetting();

objAjxSetting.AjaxControlID = btnRefreshComments.ClientID;// txtComment.ClientID;

AjaxUpdatedControl objUpdatedCntrl = new AjaxUpdatedControl();

objUpdatedCntrl.ControlID = radComments.ClientID;

objUpdatedCntrl.UpdatePanelRenderMode = UpdatePanelRenderMode.Inline;

objAjxSetting.UpdatedControls.Add(objUpdatedCntrl);

this.RadAjaxManager1.EnableAJAX = true;

this.RadAjaxManager1.AjaxSettings.Add(objAjxSetting);

AjaxUpdatedControl objUpdatedCntrl1 = new AjaxUpdatedControl();

objUpdatedCntrl1.ControlID = radComments.ClientID;

this.RadAjaxManager1.AjaxSettings[0].UpdatedControls.Add(objUpdatedCntrl1);

#endregion

}

    public void btnRefreshComments_Click(object sender, System.EventArgs e)

    {

    }

3 Answers, 1 is accepted

answered on 03 Aug 2011, 03:57 PM

Hi Mansi,

You could achieve the required functionality using both controls and invoke ajaxRequest on the onkeypress event of the textbox where you could rebind the grid. For example:

<script type="text/javascript">

function refreshGrid() {

$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");

}

</script>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1"/>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

C#:

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)

{

if (e.Argument == "Rebind") {

RadGrid1.MasterTableView.SortExpressions.Clear();

RadGrid1.MasterTableView.GroupByExpressions.Clear();

RadGrid1.Rebind();

}

I hope this helps.

Best wishes,
Maria Ilieva
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.