Just ran across a weird thing. We have a page with items rendered in a Repeater. The items in the list have one panel for display and a PlaceHolder for edit mode where controls are added in the item data binding.
We have some client side code working with the fields that got added, and the code was expecting the ids to follow the same container structure you usually see, but for some reason, one level is getting skipped and I don't know why.
With the template below, you'd have the outer panel with an id like ...Repeater_ctl46_ctl100_Display. The PlaceHolder itself doesn't render, nor get included in the id structure in the html, but the id of a HiddenField added to the EditPlaceHolder ends up like ...Repeater_ctl46_ctl100_valueHidden.
The _Display level just doesn't appear. This threw off our client side script because it was expecting the outer panel container to be reflected in all the child controls in the edit template, and it was using that to look them up.
Anyone know why the containing Panel wouldn't be in the id hierarchy?
<ItemTemplate>
...
<asp:Panel ID="Display" runat="server">
<asp:Panel ID="ViewPanel" runat="server"><asp:Label ID="ValueLabel" runat="server" /></asp:Panel>
<asp:PlaceHolder ID="EditPlaceHolder" runat="server" />
</asp:Panel>
<asp:Panel ID="ModButtons" runat="server"><asp:LinkButton ID="EditButton" Text="<%$ Resources:Messages,Edit %>" runat="server" /></asp:Panel>
...
</ItemTemplate>
Okay, after a lot of digging, asp:Panel does not implement INamingContainer, which is why the Panel is not participating in the id naming conventions.
INamingContainer is just a marker interface; it has no properties or methods associated.
So if you want a Panel that can participate in naming conventions, you can make a little derivation and use that instead:
public class NamingPanel : Panel, INamingContainer
{...}
Related
I am making some changes to an internal application that has a Telerik RadGrid component on one .aspx page.
Each row in the RadGrid represents an order and there is a dropdown which allows setting the status of the order. Changing the status of the order updates a couple of other properties of the order which are displayed on that row.
Up until now, changing the order status has resulted in a complete page post back and re-render. I'm keen to change this to a partial post back using an UpdatePanel. I could wrap the status dropdown (a RadCombo) in an UpdatePanel which would take care of the actual database changes that are required (as per the code sample below), but then without updating the other properties on the RadGrid row, the updates are not presented to the user.
<telerik:RadGrid ID="OrdersGrid" runat="server" ...>
<MasterTableView DataKeyNames="OrderId" AllowMultiColumnSorting="false">
<NoRecordsTemplate ...></NoRecordsTemplate>
<Columns>
<telerik:GridBoundColumn ... />
...
<telerik:GridTemplateColumn HeaderText="Order Status" UniqueName="OrderStatus">
<ItemTemplate>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<telerik:RadComboBox ID="RadOrderStatus" DataSourceID="OrderStatusDataSource" runat="server"
SelectedValue='<%# Bind("OrderStatus") %>' Skin="Metro" Width="180px" DataTextField="OrderStatus"
DataValueField="OrderStatus" AutoPostBack="True" EnableLoadOnDemand="False" OnSelectedIndexChanged="RadOrderStatus_SelectedIndexChanged">
</telerik:RadComboBox>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
<SortExpressions>...</SortExpressions>
</MasterTableView>
</telerik:RadGrid>
I'm wondering how I can use the UpdatePanel to effectively wrap the row of the RadGrid so that the entire row can be updated as opposed to just the cell that the dropdown is in. I've tried experimenting already with tag placement but I'm new to Telerik and therefore not very clued up.
At what level in the mark up can I place the UpdatePanel to get this to work as I'd like?
Or is there a Telerik way of doing this?
I could wrap the whole grid but if possible, I'd rather not have the whole grid update on each partial post back, the permitted operations are limited to the row level so I see a full grid update as wasteful.
You can't place an UpdatePanel around each row. For starters, there is no provision to do that (you can't do it with the standard GridView either). Then, if you manage to do that (e.g., override the Render event), you would get invalid markup because you can't have <div> elements inside the <table> and between the other <tr> nodes.
One note on the performance—the AJAX request will have the page go through its entire lifecycle on the server, so all code will be executed again and any time consuming operation will also be executed. The only difference between the AJAX and the full postback is what gets rendered and returned in the response, so you basically shave off network time only.
What you can do is the following:
wrap the entire grid. I would use RadAjaxPanel and RadAjaxLoadingPanel so you have a pretty loading indicator. Something like:
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Black"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
<telerik:RadGrid ID="RadGrid1" runat="server"></telerik:RadGrid>
</telerik:RadAjaxPanel>
OR, use client-side code and jQuery. The combo can call a WebService or a PageMethod that will return the data and you can use jQuery to traverse the DOM and update the other elements (textboxes, dropdowns, whatever you have). This is going to be more difficult.
I've seen a looot of questions about this and I've tried to overload/override VerifyRenderingInServerForm method and it isn't helping (the compiler complains if I try overrides).
To be sure:
In the master page, we have:
<form id="form1" runat="server">
so it definitely is inside a form/server tag.
The gridview has:
<asp:GridView
ItemStyle-CssClass="Item"
ID="grdInfo"
runat="server"
CssClass="grdCss"
Width="100%"
CellPadding="3"
AutoGenerateColumns="false"
HeaderStyle-CssClass="Header"
RowStyle-CssClass="Item"
AlternatingRowStyle-CssClass="AltItem"
AllowSorting="false"
AllowPaging="false">
....
Unlike other people, I'm not trying to render excel. I am, however, attempting to bind to a enumerable collection:
Public Class colInfoSet
Inherits CollectionBase
We use this type of object elsewhere without problems.
I just found out what the problem is. When the master page and child page/controls are loaded, the grid isn't rendered because it has no rows. The grid is then retrieved via ajax and then populated.
Since it was not rendered when the page was rendered, it cannot be added to the control tree.
Hence it doesn't work.
The solution I will be going with is to use a repeater instead.
I have a repeater control that repeats a DevExpress ASPxGridView for every item bound to the repeater. The repeater is contained within an update panel. Events on the page, outside of the UpdatePanel, trigger the UpdatePanel (and subsequently the repeater) to update. All works fine if records are present to bind to the repeater. The repeater renders a grid for each record and all styles look perfect.
If the page initially loads and there are no items to display in the repeater, no grids are rendered (works as intended up until this point). If a record is eventually added and the repeater rebinds (because of the triggered UpdatePanel), the grid styles don't display. If the entire page is refreshed, the grid's styles display perfectly. Keep in mind that I'm using one of the default styles that comes with the grid, so these are being pulled from an AXD and not included in my MasterPage.
A bit too much code to post, but the nuts of the markup looks similar to this:
<asp:UpdatePanel ID="the UpdatePanelInQuestion" runat="server" UpdateMode="Conditional">
<asp:Repeater ID="theRepeaterInQuestion" runat="server" OnItemDataBound="theMethodThatHandlesGridPopulation">
<ItemTemplate>
<dxwgv:ASPxGridView ID="theGridViewInQuestion" runat="server" EnableViewState="false">
<Columns>
...
</Columns>
</ItemTemplate>
</asp:Repeater>
</asp:UpdatePanel>
Any ideas on how to make the styles of the grid display correctly without:
1) Refreshing the entire page instead of triggering.
2) Placing another empty grid on the page with style="display: none;" to force the styles to download.
This problem is caused by the fact that the required scripts for the DX ASP.NET controls are not registered on the page initially. It is possible to register them explicitely via the DevExpress.Web.ASPxClasses.ASPxWebControl.RegisterBaseScript method.
Please check the http://www.devexpress.com/issue=B191046 Support Center ticket regarding this.
I have a data class that I want to show in a list on one page and also alone in another page. I know how to do the first:
<asp:Repeater ID="ctrl" runat="server">
<ItemTemplate>
Here's the name: <asp:Literal runat="server" Text='<%# Eval("Name") %>' />
</ItemTemplate>
</asp:Repeater>
On the other page, I want to show exactly one instance, and I want to reuse the item template. Is there a control that I can bind to a single instance of this class, instead of a list which contains a single element?
You can use the same Repeater but with a DataSource of on specific record/instance.
You can also use FormView control.
The FormView control gives you the ability to work with a single record from a data source. The FormView control does not specify a pre-defined layout for displaying the record. Instead, you create a template containing controls to display individual fields from the record. For information about programming the FormView control, see FormView Class in the MSDN library.
I developed a user control that displays a list of products and it works pretty good. Then I dropped this user control into another user control that allows the user to pick different criteria and the product UC updates to show those products, all pretty slick and with AJAX via UpdatePanel.
All was working just fine... then another requirement came in. The "search" control needs to be separate from the product control (so they can be positioned separately). Initially, I thought this was no problem as I would give the search control a reference to the product control and then it would talk to it via reference instead of directly inside the control (which has been removed).
And they do talk. But the product control loads, but refuses to display.
I checked and it is being passed via reference and not a copy ( as best I can tell ).
There is an updatepanel in the search control. There is an update panel in the product control. And then for good measure, there is an update panel surrounding them both in the actual search aspx page.
I've tried setting the product control update panel to conditional and then fire the .Update() method manually.
What's the secret here?
TIA!
SOLVED
Thanks to Jamie Ide for the tip to use events.
Search Control and Product control still have internal update panels, and NO LONGER have them on this particular page.
Search Control now raises an event OnSearchResultsUpdated and exposes the found items in properties. The page subscribes to this event and takes the properties and passes them to the product control and triggers triggers a .Refresh() method on the product control which simply calls the .Update() on its internal updatepanel.
The Product control, FYI, accepts products in several different flavors. A list of distinct SKUs, a list of product ids, a named collection in our database and finally a given product category.
Our designers need to be able to create a new page, drop the control onto it and set some properties and voila! New site page. They don't want to require a programmer's involvement. So keeping the controls self contained is a requirement. Fortunately all the changes I made still work completely with the other uses of the product control.
THANKS AGAIN SO MUCH!
I don't think there's really enough information to work with here, but my best guess is that the Product control is not getting data bound. You may try calling myProdcutsCtrl.DataBind() from the search control (or something inside the Product control that cause a DataBind() for instance myProductCtrl.Search(value1, value2, value3).
One other thing you might try is removing the UpdatePanels and seeing if things work. Then add them back in once you get core functionality going.
UPDATE: I've gone ahead and put some example code that works here which I believe accomplishes what you want. What follows are snippets for the sake of saving space, but include all code necessary to make it run. Hopefully this will at least give you something for reference.
Things to try:
EnablePartialRendering="true|false" setting it to false will force the natural postbacks and is good for debugging UpdatePanel problems.
Make sure you are seeing Loading... come up on your screen. (maybe too fast depending on your dev computer)
Page.aspx
<%# Register Src="~/Product.ascx" TagPrefix="uc" TagName="Product" %>
<%# Register Src="~/Search.ascx" TagPrefix="uc" TagName="Search" %>
...
<asp:ScriptManager runat="server" ID="sm" EnablePartialRendering="true" />
Loaded <asp:Label ID="Label1" runat="server"><%= DateTime.Now %></asp:Label>
<asp:UpdateProgress runat="server" ID="progress" DynamicLayout="true">
<ProgressTemplate><b>Loading...</b></ProgressTemplate>
</asp:UpdateProgress>
<uc:Search runat="server" ID="search" ProdcutControlId="product" />
<uc:Product runat="server" ID="product" />
Search.ascx
<asp:UpdatePanel runat="server" ID="searchUpdate" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<p>
<asp:Label runat="server" AssociatedControlID="filter">Less than</asp:Label>
<asp:TextBox runat="server" ID="filter" MaxLength="3" />
<asp:Button runat="server" ID="search" Text="Search" OnClick="SearchClick" />
</p>
</ContentTemplate>
</asp:UpdatePanel>
Search.ascx.cs
public string ProdcutControlId { get; set; }
protected void SearchClick(object sender, EventArgs e)
{
Product c = this.NamingContainer.FindControl(ProdcutControlId) as Product;
if (c != null)
{
c.Search(filter.Text);
}
}
Product.ascx
<asp:UpdatePanel runat="server" ID="productUpdate" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:Label runat="server">Request at <%= DateTime.Now %></asp:Label>
<asp:ListView runat="server" ID="product">
<LayoutTemplate>
<ul>
<li id="itemPlaceHolder" runat="server" />
</ul></LayoutTemplate>
<ItemTemplate>
<li><%# Container.DataItem %></li></ItemTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
Product.ascx.cs
IEnumerable<int> values = Enumerable.Range(0, 25);
public void Search(string val)
{
int limit;
if (int.TryParse(val, out limit))
product.DataSource = values.Where(i => i < limit);
else
product.DataSource = values;
product.DataBind();
productUpdate.Update();
}
Code does NOT represent best practices, just a simple example!
I'm fairly new to AJAX, but I don't think it's a good idea for user controls to have UpdatePanels. I would also advise you not to have the user controls reference each other; they should communicate through events and methods controlled by their container.
I do something similar with two user controls for a master-details display. The master raises an event when an item is selected from a list, the containing page handles the event and calls a method on the details display to display the selected item. If I remember correctly, my first attempt had UpdatePanels in the user controls and I wasn't able to make that work. Having the user controls inside an UpdatePanel on the page works fine.
If I understand you right you have a layout like this:
Outer UpdatePanel
SearchControl
Search UpdatePanel
ProductControl
Product UpdatePanel
Databound Control
Which one of those update panels is actually being called?
I assume that if you check the network traffic with something like Fiddler or Firebug if you're using Firefox, you aren't seeing any HTML for the product update panel coming back?
Have you tried doing something like:
UpdatePanel productUpdate =
Page.FindControl("Product UpdatePanel") as UpdatePanel;
if (null != productUpdate){
productUpdate.Update();
}
By default, if a postback is made from an UpdatePanel, only that control will be updated/re-rendered (this is called partial page-rendering).
To also update/re-render other UpdatePanels, you have to either:
set their UpdateMode property to Always
add the control that makes the postback to their Triggers collection
Check this page in MSDN for details.