custom datatype with updatapanel

Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib

Sep 29, 2009 @ 13:27

Hello,

I'm trying to create a custom datatype which has some buttons. Because these buttons are causing postbacks I would like to place an UpdatePanel around my datatype. How can I do this? I created a datatype as described at Tim's blog (http://www.nibble.be/?p=50) except that I also override the Render of the actual datatype dataeditor. On the OnInit I tried the following, but it did not help:

_updatePanelContent = new UpdatePanel ();
_updatePanelContent.ContentTemplateContainer.Controls.Add(_btnKoppel);
_updatePanelContent.ContentTemplateContainer.Controls.Add(_btnRemove);
_updatePanelContent.ContentTemplateContainer.Controls.Add(_btnUp);
_updatePanelContent.ContentTemplateContainer.Controls.Add(_btnDown);
_updatePanelContent.ContentTemplateContainer.Controls.Add(_listboxBeschikbaar);
_updatePanelContent.ContentTemplateContainer.Controls.Add(_listboxGeselecteerd);
 base.ContentTemplateContainer.Controls.Add(_updatePanelContent);

My render controls looks as following:

 protected override void Render(HtmlTextWriter writer)
        {
            writer.Write("<table><tr><td>Beschikbare items</td><td></td><td>Geselecteerde items</td><td></td></tr><tr><td>");
            _listboxBeschikbaar.RenderControl(writer);
            writer.Write("</td><td>");
            _btnKoppel.RenderControl(writer);
            writer.Write("<br />");
            _btnRemove.RenderControl(writer);
            writer.Write("</td><td>");
            writer.Write("<table><tr><td>");
            _listboxGeselecteerd.RenderControl(writer);
            writer.Write("</td><td>");
            _btnUp.RenderControl(writer);
            writer.Write("<br />");
            _btnDown.RenderControl(writer);
            writer.Write("</td></tr></table>");
            writer.Write("</td></tr></table>"); }

Does anyone know how I can solve this?

Copy Link

Comment author was deleted

Sep 29, 2009 @ 13:32

Hi Jeroen,

This is actually quite simple.

As you can see in my example the editor inherits from UpdatePanel, so all your controls are allready in an updatepanel.

public class charLimitDataEditor : System.Web.UI.UpdatePanel, umbraco.interfaces.IDataEditor

But if I remember correct you will need to set an ID for each control in order to get the behavioir you want

Copy Link

Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib

Sep 29, 2009 @ 13:44

I see you are right :). When I remove the Render method the code works! Now my Onit looks like:

            base.ContentTemplateContainer.Controls.Add(_btnKoppel);
            base.ContentTemplateContainer.Controls.Add(_btnUp);
            base.ContentTemplateContainer.Controls.Add(_btnDown);
            base.ContentTemplateContainer.Controls.Add(_btnRemove);
            base.ContentTemplateContainer.Controls.Add(_listboxBeschikbaar);
            base.ContentTemplateContainer.Controls.Add(_listboxGeselecteerd);

If I use the render method the updatepanel doesn't work. Is there a way I can control my output and use an UpdatePanel. Thanks already!

Copy Link

Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib

Sep 29, 2009 @ 13:56

I now solved it by putting the next code in the OnInit:

            base.ContentTemplateContainer.Controls.Add(new LiteralControl("<table><tr><td>Beschikbare items</td><td></td><td>Geselecteerde items</td><td></td></tr><tr><td>"));
            base.ContentTemplateContainer.Controls.Add(_listboxBeschikbaar);
            base.ContentTemplateContainer.Controls.Add(new LiteralControl("</td><td>"));
            base.ContentTemplateContainer.Controls.Add(_btnKoppel);
            base.ContentTemplateContainer.Controls.Add(new LiteralControl("<br />"));
            base.ContentTemplateContainer.Controls.Add(_btnRemove);
            base.ContentTemplateContainer.Controls.Add(new LiteralControl("</td><td>"));
            base.ContentTemplateContainer.Controls.Add(_listboxGeselecteerd);
            base.ContentTemplateContainer.Controls.Add(new LiteralControl("</td><td>"));
            base.ContentTemplateContainer.Controls.Add(_btnUp);
            base.ContentTemplateContainer.Controls.Add(new LiteralControl("<br />"));
            base.ContentTemplateContainer.Controls.Add(_btnDown);
            base.ContentTemplateContainer.Controls.Add(new LiteralControl("</td></tr></table>"));

It's a bit dirty, but it works.

Copy Link

Comment author was deleted

Sep 29, 2009 @ 14:17

Hi Jeroen,

I think you'll need to move to RenderChildren instead of Render

Copy Link

Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib

Sep 29, 2009 @ 14:52

RenderChildren works better then Render, but other datatypes still refresh when I cause a postback. This is not the case when put all my code in the OnInit. So far that's the best solution.

Copy Link

Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib

Oct 05, 2009 @ 13:57

I've got another problem using the OnInit. On some pages it renders an error because of the html I put in the LiterControl. When I use RenderChildren this problem does not occur, but I still have the ajax problems. It stil makes a complete postback instead of an ajax postback. When I have a page with a scrollbar the page goes to the top because of the postback which is very annoying. There should be a normal way doing an ajax postback without using the OnInit. Hope someone can help.

Copy Link

is working on a reply...

Flag this post as spam?

Custom Datatype with UpdataPanel