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

RadGrid with User Control as Edit form

2 Answers 200 Views

Grid

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

Dave Hollen asked on 15 Dec 2010, 09:52 PM

Hello,

I am using a RadGrid which is wrapped in a RadAjaxPanel.

This RadGrid contains a user control that we are using for the editing of grid data.

On the user control, I have several textboxes, a "Save" button and a "Cancel" button.

On the Save button, I have the OnClientClick set to OnClientClick = "return CanSave();". (I have also tried setting OnClientClick to OnClientClick="return true;" and OnClientClick = "if (CanSave()) return true;", all with the same results.)

CanSave() is a javascript procedure defined in the user control. My Javascript is wrapped in a RadScriptBlock.

CanSave() returns a TRUE if the Save should take place. I have verified that my "return true" line is being executed in this function.

Here is my problem:

When CanSave() returns true, no postback is happening. If I remove the RadGrid from the RadAjax panel, it works fine when I click "Save" and CanSave() runs and returns true. Or, if I leave the RadGrid in the RadAjax panel, and remove the OnClientClick event from the Save button and cilck the Save button, the PostBack occurs and everything works fine.

So, in short, having the RadGrid in a RadAjaxPanel and having the OnClientClick assigned to CanSave() on my user control that edits the data in the grid causes no Post Back to occur when clicking the Save button on my user control that edits the data in my RadGrid.

Any ideas as to what I might be doing wrong? Code is below.

Here is my RadGrid:

<asp:Panel ID="pnlNewsAdmin" runat="server">

<telerik:RadAjaxPanel ID="radAjaxPanel_MLONewsAdmin" runat="server" LoadingPanelID="radAjaxLoadingPanel_MLONewsAdmin">

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

<telerik:RadGrid ID="rgNewsAdmin" runat="server" HeaderStyle-Font-Size="Smaller"

ItemStyle-Font-Size="Smaller" AllowMultiRowSelection="false" AlternatingItemStyle-Font-Size="Smaller"

AllowPaging="true" PageSize="10" AllowSorting="true" AllowFilteringByColumn="false"

AutoGenerateColumns="false" GridLines="None" Skin="Default" ItemStyle-BackColor="#ddeeff"

AlternatingItemStyle-BackColor="White" HeaderStyle-BackColor="AliceBlue" HeaderStyle-CssClass="BACGridHeader"

OnNeedDataSource="rgNewsAdmin_OnNeedDataSource" OnInsertCommand="rgNewsAdmin_OnInsertCommand"

OnUpdateCommand="rgNewsAdmin_OnUpdateCommand" OnDeleteCommand="rgNewsAdmin_OnDeleteCommand"

OnItemCommand="rgNewsAdmin_OnItemCommand">

<PagerStyle Mode="NumericPages" />

<MasterTableView ShowHeadersWhenNoRecords="true" DataKeyNames="ManageNewsID" CommandItemDisplay="Top"

InsertItemPageIndexAction="ShowItemOnCurrentPage">

<CommandItemSettings AddNewRecordText="Add News Item..." />

<Columns>

<telerik:GridBoundColumn DataField="ManageNewsID" Visible="false" />

<telerik:GridBoundColumn DataField="Description" HeaderText="Description" SortExpression="Description" />

<telerik:GridBoundColumn DataField="URL" HeaderText="URL" SortExpression="URL" />

<telerik:GridTemplateColumn HeaderText="Start Date" SortExpression="StartDate">

<ItemTemplate>

<%# (DataBinder.Eval(Container,"DataItem.StartDate") != null ? DateTime.Parse(DataBinder.Eval(Container,"DataItem.StartDate").ToString()).ToShortDateString() : "") %>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Expire Date" SortExpression="ExpireDate">

<ItemTemplate>

<%# (DataBinder.Eval(Container,"DataItem.ExpireDate") != null ? DateTime.Parse(DataBinder.Eval(Container,"DataItem.ExpireDate").ToString()).ToShortDateString() : "") %>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="SelectedRoleDescriptions" HeaderText="Roles"

SortExpression="SelectedRoleDescriptions" ItemStyle-Width="275px" />

<telerik:GridEditCommandColumn ButtonType="ImageButton" EditImageUrl="edit.gif"

UniqueName="EditColumn" EditText="Edit News Item" />

<telerik:GridButtonColumn ConfirmText="Delete News Item?" UniqueName="DeleteColumn"

Text="Delete News Item" ConfirmTitle="Delete" ConfirmDialogType="RadWindow" CommandName="Delete"

ButtonType="ImageButton" ImageUrl="delete.gif" />

</Columns>

<EditFormSettings EditColumn-ButtonType="ImageButton" EditColumn-UniqueName="EditColumn"

UserControlName="~/EditItem.ascx" EditFormType="WebUserControl" />

</MasterTableView>

</telerik:RadGrid>

</telerik:RadAjaxPanel>

</asp:Panel>

Here is my user control:

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

<script type="text/javascript">

String.prototype.trim = function()

{

return this.replace(/^\s\s*/,'').replace(/\s\s*$/,'');

}

function CanSave()

{

var errorMsg = "";

var txtDescription = $get("<%= txtDescription.ClientID %>");

var txtURL = $get("<%= txtURL.ClientID %>");

var rdpStartDate = $find("<%= rdpStartDate.ClientID %>");

var rdpExpireDate = $find("<%= rdpExpireDate.ClientID %>");

var description = txtDescription.value.trim();

var url = txtURL.value.trim();

var startDate = rdpStartDate.get_selectedDate();

var expireDate = rdpExpireDate.get_selectedDate();

if (description.length == 0)

{

errorMsg = "Description\n";

}

if (url.length == 0)

{

errorMsg = errorMsg + "URL\n";

}

if (startDate == null)

{

errorMsg = errorMsg + "Start Date\n";

}

if (expireDate == null)

{

errorMsg = errorMsg + "Expire Date\n";

}

if ((startDate != null) && (expireDate != null))

{

if (startDate > expireDate)

{

errorMsg = errorMsg + "Start Date must occur before Expire Date.\n";

}

try

{

if (!HasRolesSelected())

{

errorMsg = errorMsg + "At least one User Role must be selected.\n";

}

catch(e)

{}

if (errorMsg.length > 0)

{

alert("The following items must be completed in order to save this News Item:\n" + errorMsg);

return false;

}

return true;

}

</script>

</telerik:RadScriptBlock>

<table>

<tr>

<td valign="top" width="425px">

<table>

<tr>

<td>

<asp:Label ID="lblDescription" runat="server" Text="Description" />

</td>

<td>

<asp:TextBox ID="txtDescription" runat="server" MaxLength="255" Width="300px"

Text='<%# ((DataBinder.Eval(Container,"DataItem.Description").ToString() != "") ? DataBinder.Eval(Container,"DataItem.Description") : "") %>' />

</td>

</tr>

<tr>

<td>

<asp:Label ID="lblURL" runat="server" Text="URL" />

</td>

<td>

<asp:TextBox ID="txtURL" runat="server" MaxLength="255" Width="300px"

Text='<%# ((DataBinder.Eval(Container,"DataItem.URL").ToString() != "") ? DataBinder.Eval(Container, "DataItem.URL") : "") %>' />

</td>

</tr>

<tr>

<td>

<asp:Label ID="lblStartDate" runat="server" Text="Start Date" />

</td>

<td>

<telerik:RadDatePicker ID="rdpStartDate" runat="server" />

</td>

</tr>

<tr>

<td>

<asp:Label ID="lblExpireDate" runat="server" Text="Expire Date" />

</td>

<td>

<telerik:RadDatePicker ID="rdpExpireDate" runat="server" />

</td>

</tr>

</table>

</td>

<td>

<table>

<tr>

<td valign="top">

<asp:Label ID="lblRoles" runat="server" Text="Roles" />

</td>

<td>

<RoleSelector:roleSelector ID="roleSelector" runat="server" />

</td>

</tr>

</table>

</td>

</tr>

</table>

<div style="padding-top: 10px;">

<asp:Button ID="btnInsert" runat="server" Text="Save" CommandName="PerformInsert" OnClientClick="if(CanSave())return true;"

Visible='<%# (DataBinder.Eval(Container,"DataItem.ManageNewsID").ToString() != "" ? false : true) %>' />

<asp:Button ID="btnUpdate" runat="server" Text="Save" CommandName="Update" OnClientClick="if (CanSave()) return true;" Visible='<%# (DataBinder.Eval(Container,"DataItem.ManageNewsID").ToString() != "" ? true : false) %>' />

<asp:Button ID="btnCancel" runat="server" Text="Cancel" CommandName="Cancel" CausesValidation="false" />

</div>

RadGrid with User Control as Edit form

2 Answers, 1 is accepted