I'm using VS2008 with .NET 3.5 and C#.
I have a hierarchal RadGrid. Sometimes based on a selected value of a RadCombobox I need to expand the hierarchy to the next level using ServerOnDemand.
I'm not sure if the following is the best approach, but if the client meets certain criteria I issue the following:
__doPostBack(
"<%= this.UniqueID %>", "GridExpand:" + i + ":" + j);
Where "this" is the current user control where the grid is located, "i" is the current detail view and "j" is the current row. This is caught successfully on the server "RaisePostBackEvent(string eventArgument)".The hierarchy even expands.
However this does a full postback, even though the grid is also wrapped with an AJAX Update Panel.
Is there a way to ajaxify this or am I completely on the wrong track?
Kind regards
Mark Eaton
8 Answers, 1 is accepted
You can use the "Prometheus" ajax to achieve this. Here is an example:
http://www.telerik.com/DEMOS/ASPNET/Prometheus/Ajax/Examples/Manager/ClientSideAPI/DefaultCS.aspx
Kind regards,
Vlad
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 2
Thanks.
The "Prometheus" version of the RadGrid does not have build in ajax and that is why RadAjaxManager should be used to handle such scenarios.
All the best,
Vlad
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Using your suggestion I now have the hierarchy expand AJAX style with Load On Demand when a certain option is selected from a RadCombobox.
I now have a different problem.
Using server side code I hide the expand/collapse if there are no detail views to show. So when the user selects a certain option from the RadCombobox the detail view will show with a expand/collapse button.
If I then click on this button the detail will collapse and expand correctly. But the RadComboboxes and RadDateInputs within my grid cease working.
Please note that I also have ASP.NET DropDownLists in the same grid and these work fine.
In fact I can no longer reference the grid either in Javascript. The $find method returns null.
Kind regards
Mark Eaton
It seems that the nested RadComboBoxes/RadDateInputs are not reinitialized properly after an ajax request. Can you please paste the aspx and the code-behind code related to the grid in this forum thread to familiarize with your implementation completely? Thus I will do my best to provide up-to-the-point answer/fix.
Kind regards,
Stephen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
As requested I have copied in the grid relates aspx and aspx.cs code.
Please note, I have omitted JavaScript and C# relating to custom client validation due to its length and in C# have not included ItemDataBound events also.
ASCX Code:
<telerik:RadGrid ID="grdProducts" runat="server" AutoGenerateColumns="False" GridLines="None" Skin="Office2007" ShowGroupPanel="false" Width="100%" ondetailtabledatabind="grdProducts_DetailTableDataBind" onitemdatabound="grdProducts_ItemDataBound" OnPreRender="grdProducts_PreRender">
<ExportSettings>
<Pdf PaperSize="Letter" FontType="Subset"></Pdf>
<Excel Format="Html"></Excel>
</ExportSettings>
<MasterTableView CurrentResetPageIndexAction="SetPageIndexToFirst" Dir="LTR" Frame="Void" TableLayout="Fixed" CommandItemDisplay="None" DataKeyNames="ProductID" Name="Products" HierarchyLoadMode="Client" HierarchyDefaultExpanded="true" ShowHeader="false" Width="100%" HorizontalAlign="Right">
<RowIndicatorColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" Visible="False">
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<ExpandCollapseColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" Visible="False" Resizable="False" >
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
<EditFormSettings>
<EditColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType">
</EditColumn>
</EditFormSettings>
<Columns>
<telerik:GridTemplateColumn UniqueName="clmProductSelect">
<HeaderStyle Width="25px" />
<ItemTemplate>
<asp:CheckBox id="chkProductSelect" runat="server"
OnClick='<%# string.Format("javascript:chkProductSelect_OnClick({0})", Eval("ProductID")) %>' />
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn UniqueName="clmProductID" DataField="ProductID" Visible="true" Display="false">
<HeaderStyle Width="50px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="clmProductName" HeaderText="" DataField="ProductName" ItemStyle-Font-Bold="true">
<HeaderStyle Width="1000px" />
</telerik:GridBoundColumn>
</Columns>
<DetailTables>
<telerik:GridTableView AutoGenerateColumns="false" Name="Modules" HierarchyDefaultExpanded="false" HierarchyLoadMode="ServerOnDemand" Width="100%" HorizontalAlign="Right" runat="server" TableLayout="Fixed">
<Columns>
<telerik:GridTemplateColumn UniqueName="clmModuleSelect">
<HeaderStyle Width="25px" />
<ItemTemplate>
<asp:CheckBox ID="chkModuleSelect" runat="server" />
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn UniqueName="clmModuleID" DataField="ModuleID" Visible="true" Display="false">
<HeaderStyle Width="150px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="clmModuleName" HeaderText="Module" DataField="ModuleName">
<HeaderStyle Width="150px" />
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn UniqueName="clmStatus" HeaderText="Status" >
<HeaderStyle Width="90px" />
<ItemTemplate>
<asp:DropDownList ID="cboStatus" runat="server" Width="90px"></asp:DropDownList>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="clmSubType" HeaderText="Subscription Type">
<HeaderStyle Width="90px" />
<ItemTemplate>
<telerik:RadComboBox ID="cboSubType" runat="server" Width="90px" Skin="Office2007" ValidationGroup="vgProducts" CausesValidation="true" OnClientSelectedIndexChanged="cboSubType_SelectedIndexChanged" OnClientDropDownOpening="cboSubType_DropDownOpening">
</telerik:RadComboBox>
<asp:CustomValidator ID="cvSubType" runat="server" ErrorMessage="Required!" ValidationGroup="vgProducts" Display="Dynamic" ControlToValidate="cboSubType"
ClientValidationFunction="cboSubType_ClientValidate" OnServerValidate="cboStatus_ServerValidate" Text="<img src='ApplicationImages\icon_err.gif' originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" />" ToolTip="Required!"></asp:CustomValidator>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="clmFrom" HeaderText="From">
<HeaderStyle Width="100px" />
<ItemTemplate>
<telerik:RadDatePicker ID="dateFrom" runat="server" Width="100px" SelectedDate='<%# Eval("From") %>'>
<DateInput runat="server" ValidationGroup="vgProducts" CausesValidation="true"></DateInput>
</telerik:RadDatePicker>
<asp:CustomValidator ID="cvDateFrom" runat="server" ErrorMessage="Required!" ValidationGroup="vgProducts" Display="Dynamic" ControlToValidate="dateFrom" ClientValidationFunction="dateFrom_ClientValidate" OnServerValidate="dateFrom_ServerValidate" Text="<img src='ApplicationImages\icon_err.gif' originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" />" ToolTip="Required!" ValidateEmptyText="true">
</asp:CustomValidator>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="clmTo" HeaderText="To">
<HeaderStyle Width="100px" />
<ItemTemplate>
<telerik:RadDatePicker ID="dateTo" runat="server" Width="100px">
<ClientEvents OnPopupOpening="dateTo_PopupOpening" />
<DateInput runat="server" ValidationGroup="vgProducts" CausesValidation="true"></DateInput>
</telerik:RadDatePicker>
<asp:CustomValidator ID="cvDateTo" runat="server" ErrorMessage="Required!" ValidationGroup="vgProducts" Display="Dynamic" ControlToValidate="dateTo" ClientValidationFunction="dateTo_ClientValidate" OnServerValidate="dateTo_ServerValidate" Text="<img src='ApplicationImages\icon_err.gif' originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" />" ToolTip="Required!" ValidateEmptyText="true">
</asp:CustomValidator>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="clmVolumeCycle" HeaderText="Volume Cycle" >
<HeaderStyle Width="90px" />
<ItemTemplate>
<asp:DropDownList ID="cboVolumeCycle" runat="server" Width="90px"></asp:DropDownList>
<asp:CustomValidator ID="cvVolumeCycle" runat="server" ErrorMessage="Required!" ValidationGroup="vgProducts" Display="Dynamic" ControlToValidate="cboVolumeCycle"
ClientValidationFunction="cboVolumeCycle_ClientValidate" OnServerValidate="cboVolumeCycle_ServerValidate" Text="<img src='ApplicationImages\icon_err.gif' originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" />" ToolTip="Required!">
</asp:CustomValidator>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="clmBillingCycle" HeaderText="Billing Cycle">
<HeaderStyle Width="90px" />
<ItemTemplate>
<asp:DropDownList ID="cboBillingCycle" runat="server" Width="90px" ValidationGroup="vgProducts" CausesValidation="true"></asp:DropDownList>
<asp:CustomValidator ID="cvBillingCycle" runat="server" ErrorMessage="Required!" ValidationGroup="vgProducts" Display="Dynamic" ControlToValidate="cboBillingCycle" ClientValidationFunction="cboBillingCycle_ClientValidate" OnServerValidate="cboBillingCycle_ServerValidate" Text="<img src='ApplicationImages\icon_err.gif' originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" />" ToolTip="Required!">
</asp:CustomValidator>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="clmRenew" HeaderText="Renew">
<HeaderStyle Width="50px" />
<ItemTemplate>
<asp:CheckBox ID="chkRenew" runat="server" />
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="clmHistory" HeaderText="History">
<HeaderStyle Width="50px" />
<ItemTemplate>
<asp:Button ID="btnHistory" runat="server" Text='' Width="25px" OnClientClick='<%# string.Format("ShowHistory({0})", Eval("ModuleID")) %>' />
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
<DetailTables>
<telerik:GridTableView AutoGenerateColumns="false" Name="Volumes" Width="100%" HorizontalAlign="Right" runat="server" TableLayout="Fixed">
<Columns>
<telerik:GridBoundColumn UniqueName="clmSubVolume" HeaderText="" DataField="SubVolumeID" Display="false">
<HeaderStyle Width="50px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="clmRangeFrom" HeaderText="Range From" DataField="RangeFrom">
<HeaderStyle Width="175px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="clmRangeTo" HeaderText="Range To" DataField="RangeTo">
<HeaderStyle Width="150px" />
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn UniqueName="clmPrice" HeaderText="Price">
<HeaderStyle Width="150px" />
<ItemTemplate>
<telerik:RadNumericTextBox ID="txtPrice" Runat="server" Skin="Office2007" MinValue="0" MaxLength="9" MaxValue="999999.99" NumberFormat-DecimalDigits="2" Value='<%# Convert.ToDouble(Eval("Price")) %>'>
</telerik:RadNumericTextBox>
<asp:RequiredFieldValidator ID="rfvPrice" runat="server" ErrorMessage="Required!" ValidationGroup="vgProducts" Display="Dynamic" ControlToValidate="txtPrice" Text="<img src='ApplicationImages\icon_err.gif' originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" originalAttribute="src" originalPath="ApplicationImages\icon_err.gif" />" ToolTip="Required!">
</asp:RequiredFieldValidator>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</telerik:GridTableView>
</DetailTables>
</telerik:GridTableView>
</DetailTables>
</MasterTableView>
<ClientSettings AllowExpandCollapse="true">
<Selecting AllowRowSelect="false" />
</ClientSettings>
</telerik:RadGrid>
<
script type="text/javascript">
// Constants
var PRODUCTS_CHECK_COL = 1;
var PRODUCTS_ID_COL = 2;
var MODULES_CHECK_COL = 1;
var MODULES_STATUS_COL = 4;
var MODULES_SUBTYPE_COL = 5;
var MODULES_FROM_COL = 6;
var MODULES_TO_COL = 7;
var MODULES_VOLUME_COL = 8;
var MODULES_BILLING_COL = 9;
var SUBTYPE_DEMO = "Demo";
var SUBTYPE_VOLUME = "Volume";
var SUBTYPE_UNLIMITED = "Unlimited";
var GRID_MODULES = "Modules"
// Variables
var gwinHistory = null;
var gcboSubTypeText = null;
function
cboSubType_DropDownOpening(sender, e)
{
// We need to get the original value in case they are changing from "Volume" to any other type as the hierarchy grid needs to be adjusted accordingly
gcboSubTypeText = sender.get_text();
}
function
cboSubType_SelectedIndexChanged(sender, e)
{
var item = e.get_item();
var combo = item.get_comboBox();
var rowElement = combo.get_parent();
var grid = $find("<%= grdProducts.ClientID %>");
// Loop through Detail Tables
for(var i = 0; i < grid.get_detailTables().length; i++)
{
if(grid.get_detailTables()[i].get_name() == GRID_MODULES)
{
// Loop through Rows
for(var j = 0; j < grid.get_detailTables()[i].get_dataItems().length; j++)
{
if(grid.get_detailTables()[i].get_dataItems()[j] == rowElement)
{
// Enable / Disable controls based on selection
if(combo.get_text() == "Demo")
{
DatePickerEnable($find(grid.get_detailTables()[i].get_dataItems()[j].get_element().cells[MODULES_TO_COL].firstChild.children[0].id), true);
grid.get_detailTables()[i].get_dataItems()[j].get_element().cells[MODULES_VOLUME_COL].firstChild.disabled = true;
grid.get_detailTables()[i].get_dataItems()[j].get_element().cells[MODULES_BILLING_COL].firstChild.disabled = true;
}
else if(combo.get_text() == "Volume")
{
DatePickerEnable($find(grid.get_detailTables()[i].get_dataItems()[j].get_element().cells[MODULES_TO_COL].firstChild.children[0].id), true);
grid.get_detailTables()[i].get_dataItems()[j].get_element().cells[MODULES_VOLUME_COL].firstChild.disabled = false;
grid.get_detailTables()[i].get_dataItems()[j].get_element().cells[MODULES_BILLING_COL].firstChild.disabled = false;
// Enable Volume detail of the grid. 'this' is for the current user-control
var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
ajaxManager.ajaxRequest("GridExpand:" + i + ":" + j);
}
else if(combo.get_text() == "Duration")
{
DatePickerEnable($find(grid.get_detailTables()[i].get_dataItems()[j].get_element().cells[MODULES_TO_COL].firstChild.children[0].id), true);
grid.get_detailTables()[i].get_dataItems()[j].get_element().cells[MODULES_VOLUME_COL].firstChild.disabled = true;
grid.get_detailTables()[i].get_dataItems()[j].get_element().cells[MODULES_BILLING_COL].firstChild.disabled = false;
}
else if(combo.get_text() == "Unlimited")
{
DatePickerEnable($find(grid.get_detailTables()[i].get_dataItems()[j].get_element().cells[MODULES_TO_COL].firstChild.children[0].id), false);
grid.get_detailTables()[i].get_dataItems()[j].get_element().cells[MODULES_VOLUME_COL].firstChild.disabled = true;
grid.get_detailTables()[i].get_dataItems()[j].get_element().cells[MODULES_BILLING_COL].firstChild.disabled = false;
}
// We have stored the previous value from the cboSubType_DropDownOpening() event
// If it was originally "Volume" we need to perfrom a postback to adjust the hierarchal "Volumes" grid
if(gcboSubTypeText == "Volume")
{
var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
ajaxManager.ajaxRequest("GridCollapse:" + i + ":" + j);
}
}
}
}
}
}
function
DatePickerEnable(datepicker, blnEnable)
{
if(blnEnable)
$get(datepicker.get_dateInput().get_id() + "_text").disabled = "";
else
$get(datepicker.get_dateInput().get_id() + "_text").disabled = "disabled";
}
function
dateTo_PopupOpening(sender, e)
{
// If the RadDateInput is disabled then we want to prevent the calendar popup
if($get(sender.get_dateInput().get_id() + "_text").disabled)
e.set_cancel(true);
}
</
script>
C# Code:
protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e){
try
{
if (e.Argument.IndexOf("GridExpand") != -1)
{
GridTableView view = grdProducts.MasterTableView.Items[int.Parse(e.Argument.Split(':')[1])].ChildItem.NestedTableViews[0];
view.Items[int.Parse(e.Argument.Split(':')[2])].Expanded = true;
}
else if (e.Argument.IndexOf("GridCollapse") != -1)
{
}
}
catch (Exception Ex)
{
Debug.Assert(false, Ex.Message);
}
}
protected void grdProducts_PreRender(object sender, EventArgs e)
{
// The following needs to be done after each postback:
// 1. Share RadDatePickers with one Rad Calendar to minimise HTML markup
// 2. Hide expand/collapse columns for "Modules" detail grid if no child records currently visible
// 3. If in NEW mode:
// Hide Renew column
// Hide History column
// Set Status to 'Subscribe' and disable
Telerik.Web.UI.GridColumn col = null;
TableCell cell = null;
TableCell cellCollapseExpand = null;
RadDatePicker datePicker = null;
DropDownList cboASPNET = null;
RadComboBox cboRad = null;
try
{
foreach (Telerik.Web.UI.GridDataItem grdProductsMaster in grdProducts.MasterTableView.Items)
{
foreach (Telerik.Web.UI.GridTableView ModulesDetailView in grdProductsMaster.ChildItem.NestedTableViews)
{
if (ViewState[EDIT_MODE_KEY] != null && (EditModes)ViewState[EDIT_MODE_KEY] == EditModes.New)
{
// Hide Renew column
col = ModulesDetailView.GetColumnSafe("clmRenew");
if (col != null)
col.Visible = false;
// Hide History column
col = ModulesDetailView.GetColumnSafe("clmHistory");
if (col != null)
col.Visible = false;
}
// This is still part of the "Modules" detail grid
foreach (Telerik.Web.UI.GridDataItem ModuleItems in ModulesDetailView.Items)
{
cell = ModuleItems["clmFrom"];
if (cell != null)
{
datePicker = (RadDatePicker)cell.FindControl("dateFrom");
if (datePicker != null)
datePicker.SharedCalendar = RadCalendar1;
}
cell = ModuleItems["clmTo"];
if (cell != null)
{
datePicker = (RadDatePicker)cell.FindControl("dateTo");
if (datePicker != null)
datePicker.SharedCalendar = RadCalendar1;
}
cell = ModuleItems["clmSubType"];
if (cell != null)
cboRad = (RadComboBox)cell.FindControl("cboSubType");
else
cboRad = null;
if (ViewState[EDIT_MODE_KEY] != null && (EditModes)ViewState[EDIT_MODE_KEY] == EditModes.New)
{
// Disable Status DropDownList and set the default to "Subscribe"
cell = ModuleItems["clmStatus"];
if (cell != null)
{
cboASPNET = (DropDownList)cell.FindControl("cboStatus");
if (cboASPNET != null)
cboASPNET.Enabled = false;
else
cboASPNET = null;
}
}
// Go inside the "Volumes" detail grid
foreach (Telerik.Web.UI.GridTableView VolumesDetailView in ModuleItems.ChildItem.NestedTableViews)
{
// Get the "Modules" expand/collapse column
cellCollapseExpand = VolumesDetailView.ParentItem["ExpandColumn"];
// Check the Subscription Type. If not "Volume" then hide the expand/collapse
if (cboRad != null)
{
if (cboRad.Text == SUBTYPE.Volume.ToString())
{
cellCollapseExpand.Controls[0].Visible = true;
VolumesDetailView.Visible = true;
}
else
{
cellCollapseExpand.Controls[0].Visible = false;
VolumesDetailView.Visible = false;
// Check if this previously showed the "Volumes" detail grid and remove all data
if (VolumesDetailView.Items.Count > 0)
{
}
}
}
}
}
}
}
}
catch (Exception Ex)
{
Debug.Assert(false, Ex.Message);
}
}
I reviewed your code implementation and here are my findings:
- I see that you set the shared calendars inside the PreRender handler of the grid. Can this be related to the issue with the date pickers re-initializition after an ajax request? You may relocate this part inside the ItemCreated event handler of the grid to see whether this makes a difference. How to determine the level of the hierarchy in the ItemCreated handler you can understand from this topic:
http://www.telerik.com/help/radcontrols/prometheus/?grdDistinguishGridRowsInHierarchyOnItemDataBound.html - You set ShowHeader = false for your master table. Does changing this property to true changes the behavior?
- You might put debugger keywords in your javascript methods and debug the code to see whether these methods are reached as expected.
If these directions do not solve the issue, I suggest you prepare a stripped working version of your project and send it enclosed to a formal support ticket. I will examine it carefully and will get around to you with my findings.
Best regards,Stephen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
I tried your suggestions however they made no difference.
I have created a small project which replicates this problem and will open a support ticket.
Kind regards
Mark Eaton