Click here to Skip to main content
Email Password   helpLost your password?

The DropDownCatalogZone when used

Introduction

My last piece on a collapsible EditorZone got me really going. This time I�ll show how to create a CatalogZone which displays a dropdown combobox instead of a list of checkboxes.

There are two main components which need to interact to make this possible. A class derived from CatalogZone takes care of rendering the header and footer. This class is called DropDownCatalogZone. The header shows an informative title. The footer is used to display a dropdown combobox which can be used to select a WebPartZone to add the WebPart to. The footer also shows the �Add� and �Close� buttons used to add a WebPart from the catalog to the page and to close the zone again. For each CatalogPart which is displayed in the CatalogZone, a dropdown combobox is rendered by a class derived from CatalogPartChrome called DropDownCatalogPartChrome.

First let�s examine the DropDownCatalogPartChrome class. It contains one method used to render a CatalogPart. This method is displayed in figure 1. The implementation takes the following steps:

  1. Get the WebPart descriptions stored in the CatalogPart.
  2. Create a DropDownList.
  3. Attach the ID of the list to a preformatted ID in the CatalogZone. (I�ll explain the why later.)
  4. Add each WebPart description to the DropDownList.
  5. Render the list.
public override void RenderCatalogPart(HtmlTextWriter writer,
       CatalogPart catalogPart)
{
    WebPartDescriptionCollection partDescriptions =
        catalogPart.GetAvailableWebPartDescriptions();
    DropDownList list = new DropDownList();
    list.Width = new Unit(150, UnitType.Pixel);
    list.ID = ((DropDownCatalogZone)Zone).ModuleSelectorControlID;

    foreach (WebPartDescription description in partDescriptions)
    {
        list.Items.Add(new ListItem(description.Title, description.ID));
    }
    writer.Write("Select a module:");
    list.RenderControl(writer);
}

The interesting bit about this code is the use of the CatalogZone to provide the ID for the DropDownList. This is necessary because the Chrome class doesn�t load postback data itself, the DropDownCatalogZone loads this data based on the ID. By using it on the DropDownList, the DropDownCatalogZone is able to load the WebPartDescription of the selected item in the list.

The DropDownCatalogZone contains the bulk of the code. It will need to perform the following tasks:

  1. Create an instance of DropDownCatalogPartChrome.
  2. Render the header and footer.
  3. Handle postback data sent by the DropDownCatalogPartChrome class.
  4. Handle postback data sent by the buttons shown in the footer.

The first step is easy enough. A simple override of the CreateCatalogPartChrome is sufficient. The rendering of the header is trivial as well, it only writes a title to the output stream.

The third and fourth steps are more of a challenge. The DropDownCatalogZone will need to override the LoadPostData and RaisePostBackEvent methods. The LoadPostData method is used to load the selected WebPart and the selected WebPartZone from the posted values.

protected override bool LoadPostData(string postDataKey, 
                        NameValueCollection postCollection)
{
    _selectedPart = postCollection[ModuleSelectorControlID];
    _selectedZone = postCollection[ZoneSelectorControlID];
    return false;
}

The selected WebPart is loaded using the same key as used by the DropDownCatalogPartChrome class to render the DropDownList. The DropDownList which is rendered in the footer uses the same mechanism as used by the DropDownCatalogPartChrome class, but it uses a different ID, the ZoneSelectorControlID.

The RaisePostBackEvent method only needs to verify whether the postback is performed by the �Add� button, and take the necessary actions to actually add the WebPart to the WebPartZone.

protected override void RaisePostBackEvent(string eventArgument)
{
    if (eventArgument == ((DropDownCatalogVerb)AddVerb).EventArgument &&
        AddVerb.Visible && AddVerb.Enabled)
    {
        WebPartZoneBase zone = base.WebPartManager.Zones[_selectedZone];
        WebPartDescriptionCollection descriptions =
            SelectedCatalogPart.GetAvailableWebPartDescriptions();
        WebPart webPart = SelectedCatalogPart.GetWebPart(
            descriptions[_selectedPart]);
        WebPartManager.AddWebPart(webPart, zone, 0);
    }
    base.RaisePostBackEvent(eventArgument);
}

The rest of the code found in the DropDownCatalogZone class is plumbing to wire up the �Add� and �Remove� buttons and handle their state management.

Just a few little steps were required to change the default behavior of the CatalogZone, happy coding!

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
QuestionUsing CheckBoxList Instead of DropDownList
payam.ace
0:28 12 May '09  
I need to use CheckBoxList instead of DropDownList.
when I use a checkboxlist it seems the RaisePostBackEvent cannot find the selected checkbox in order to add the webpart.
Can anyone help me with this please?
Thanks
GeneralNice article but incomplete sample
Member 179330
6:45 28 Jun '08  
The downloadable code should have a fully functioning sample Web Page.

saurabh

GeneralCheckbox control instead of Dropdown - having problem
Venkatesh Kumar
10:13 21 May '08  
As per our client requirement I need to display a checkbox follwoed by one image followed by catalog description. So I used CheckBox control instead of your Dropdown control. The description.id is not set into the variable _SelectedPart in LoadPostData(). I didnt change any of your coding. just change in RenderCatalogPart. This is how I did.

CheckBoxList cbl = new CheckBoxList();
cbl.ID = ((ImageCatalogZone)Zone).ModuleSelectorControlID;
foreach (WebPartDescription description in partDescriptions)
{
cbl.Items.Add(new ListItem(description.Title, description.ID));
}
writer.Write("Select a module:");
cbl.RenderControl(writer);

The _SelectedPart in LoadPostData() show null.Do I need to override any other methods? Can you help me to sort it out.
QuestionPlease Help
hakeeem
11:01 26 Feb '07  
Can some one help me to use this Display a DropDownList in a CatalogZone ? .it is giving me error (object refernce is not set to instance of an object) .

thanks
AnswerRe: Please Help [modified]
bsevo
10:07 30 Sep '07  
You are probably receiving this error because you didn't specified and PageCatalogPart in a ZoneTemplate of your CatalogZone.
So, you need to have something like this:
<CCZ:DropDownCatalogZone ID="CatalogZone2" runat="server">
<b><ZoneTemplate>
<asp:PageCatalogPart ID="PageCatalogPart2" runat="server" />
</ZoneTemplate></b>
</CCZ:DropDownCatalogZone>



-- modified at 15:27 Sunday 30th September, 2007
QuestionRe: Please Help
Venkatesh Kumar
12:44 20 May '08  
can you specify the code behind code that call the 2 classes ?
Generalhow to use Gridview in Catalogzone template for display
sam_g1
20:33 23 Dec '06  
Hi,
I want to display catalog zone contents in Gird view
Any suggestions??


QuestionSaveViewState Failed
Luke XCS
6:08 21 Sep '06  
Hi,
when i run the control, the Protected Overrides Sub SaveViewState() return an error(Object not reference to an instance of an object), when "Return New Triplet".
Anyone help me?
Thanks in advance.
AnswerRe: SaveViewState Failed
Wouter van Vugt
8:11 21 Sep '06  
Have you got a stacktrace for me?

Wouter van Vugt

Trainer - Info Support
http://www.infosupport.com

GeneralRe: SaveViewState Failed [modified]
Luke XCS
8:37 21 Sep '06  

[NullReferenceException: Object reference not set to an instance of an object.]
MyControls.MyCatalogZone.SaveViewState() in E:\Sites\Site1\App_Code\MyCatalogZone.vb:136
System.Web.UI.Control.SaveViewStateRecursive() +83
System.Web.UI.Control.SaveViewStateRecursive() +194
System.Web.UI.Control.SaveViewStateRecursive() +194
System.Web.UI.Control.SaveViewStateRecursive() +194
System.Web.UI.Control.SaveViewStateRecursive() +194
System.Web.UI.Control.SaveViewStateRecursive() +194
System.Web.UI.Control.SaveViewStateRecursive() +194
System.Web.UI.Control.SaveViewStateRecursive() +194
System.Web.UI.Page.SaveAllState() +594
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +6646



QuestionDisplay drag&drop webparts in a catalogzone
shefali_sinha
10:12 14 Sep '06  
Hi,

Thanks for this article.

I'd like to display webparts in a catalog zone, without checkboxes or list control, similar to what has been done on www.netvibes.com

Any advice on this will be greatly appreciated.

Thanks.
-Shefali
AnswerRe: Display drag&drop webparts in a catalogzone
Wouter van Vugt
20:07 14 Sep '06  
You can render this type of view using the HtmlTextWriter and the CatalogPartChrome class.

Hope it helps.

Wouter van Vugt

Trainer - Info Support
http://www.infosupport.com

GeneralRe: Display drag&drop webparts in a catalogzone
shefali_sinha
12:13 19 Sep '06  
Thanks for your reply.

I'd like to drag objects from the catalog zone, and drop into other WebPart Zones. How can this be accomplished? (www.netvibes.com has done this. You can grab from the menu on the left, and drag items to the zones on the right)

Thanks in advance.
-Shefali
GeneralRe: Display drag&drop webparts in a catalogzone
Wouter van Vugt
20:10 19 Sep '06  
Hi,

you'll need to re-implement the client side script library, and the various WebPart controls to have this script used correctly.

Loads of work!

Wouter van Vugt

Trainer - Info Support
http://www.infosupport.com

GeneralRe: Display drag&drop webparts in a catalogzone
shefali_sinha
7:15 20 Sep '06  
Hi Wouter,

Thanks so much for your continued help on this.

How about this for an easier solution: I have a webpart zone to the left, instead, and in place of the catalogzone. Here I would display all my available webparts, much as one would in a content menu. Because this is a webpart zone, I would get the feature of dragging and dropping into other webpart zones without extra coding.

Challenges:
(1) There is the verbs menu that shows by default in the top right corner - anyway I can get this to not display?

(2) This part will always be displayed as minimized

(3) I don't want any webparts to be dropped into this zone - so I'd need to display the prohibited icon when users drag onto this zone, or at the least, just not have any drops into this zone work.

(4) Another feature needed would be to open\close this content menu. Would that just be invoking the close and add command for this content webpartzone?

(5) What am I missing? Any thoughts on why this solution will not work?

I've done much work with .net, but 'am new to 2.0. Really appreciate any guidance you can give me.

Thanks again.
-Shefali

GeneralRe: Display drag&drop webparts in a catalogzone
Wouter van Vugt
9:32 20 Sep '06  
I think you can do almost all of this by deriving from WebPartZone, or by customizing the WebPartManager class as well. I think your solution will work for you.

Wouter van Vugt

Trainer - Info Support
http://www.infosupport.com

GeneralRe: Display drag&drop webparts in a catalogzone
shefali_sinha
10:44 22 Sep '06  
Hi Wouter,

I'm just writing to say a big "THANK YOU".

My solution worked, it was so easy and straightforward, just deriving from both the classes you mentioned above, and has made for a very elegant catalog zone compared to the checkbox catalog zone.

Thanks a million.
-Shefali
GeneralRe: Display drag&drop webparts in a catalogzone
WDI
3:30 5 Nov '06  
How you could disable verbMenu and dropping webParts on the zone???
GeneralRe: Display drag&drop webparts in a catalogzone
shefali_sinha
2:47 6 Nov '06  
1. How you could disable verbMenu?

By setting their visibility to false. Code:

<asp:WebPartZone ID="NoDropZone" runat="server" CloseVerb-Visible="false" ConnectVerb-Visible="false"........and so on....> [style settings go here]
.
.
.

2. How you could disable dropping webParts on the zone?

By creating a class that derived from WebPartManager, and overriding the method MoveWebPart. In my implementation of MoveWebPart, I test to see if the drop is coming from other zones into this, NoDropZone. If so, I do nothing with the drop, and thus prvent dropping.

Code:

public override void MoveWebPart(WebPart wp, WebPartZone z, int zoneIndex)
{
if (zone.ID.Equals("NoDropZone"))
{
return;
}
}

-Shefali
GeneralRe: Display drag&drop webparts in a catalogzone
WDI
21:40 4 Nov '06  
hi
i am developping a portal.
one of its reqiurement is draging webParts from a Catalog and dropping it into a webPartZone.The way that he offered appears to work well,do you see any problem such az performance problems in this way?
GeneralRe: Display drag&drop webparts in a catalogzone
shefali_sinha
2:52 6 Nov '06  
No Performance problems so far, though I am developing a new product from the start, have not tested it much yet.

I did find one problem. Normally, after implementing it this way, I could just drag from this new Catalog zone to other zones. But once I enclosed the other zone in a 'div' element, and then I could no longer drop onto that zone. I tried enclosing in an asp Panel, same problem. I don't have a work around for this yet.

-Shefali
GeneralRe: Display drag&drop webparts in a catalogzone
redowl
5:46 1 Feb '07  
Shefali,

Did you ever get this to work??
GeneralRe: Display drag&drop webparts in a catalogzone
shefali_sinha
17:08 4 Feb '07  
Yes, I got all this to work. It was quite straight forward.

Regarding the problem of drag not working once I enclosed the webpart zone in a div element, I replaced the div element with a table, and could get drag to work.

-Shefali
GeneralNice article but
rubal_pal
5:40 22 Jun '06  
Really good work Smile This is really good functionallty
I want to customize the cataloag zone
but I can not figure out how to use it...
If you can guide me.
Thanks
GeneralRe: Nice article but
rubal_pal
5:50 22 Jun '06  
hi,
me again
I ve added refence to the dll
As much as I was able to figure out most of the functions are overridded.
Do I need to call any function or any refernce to these class in my code????
Thanks.


Last Updated 12 Oct 2005 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2010