[CLOSED] Example of loading user control with data binding

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Example of loading user control with data binding

    I'm trying (very unsuccessfully) to load a user control during a direct event. The control itself binds a couple of combo boxes on the initial page load, and then I have some data binding going on in .DataBind(). This control also contains some css and javascript that doesn't appear to be available. Also, there's css in the global style sheet that isn't being applied after the control shows up.

    https://examples1.ext.net/#/XRender/...UpdateContent/

    I based my usage on this example, but doesn't appear to address the css issue.

    I'm trying to code up a sample to post, but if you have any ideas that I can try in the meantime, please let me know.
    Last edited by Daniil; Aug 26, 2012 at 10:50 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Regarding the example you have referred.

    I just tried to add
    <script type="text/javascript">
        alert("UserControl1");
    </script>
    
    <style type="text/css">
        body {
            background-color: Yellow;
        }
    </style>
    into UserControl1.ascx
    and
    <style type="text/css">
        body {
            background-color: Green;
        }
    </style>
    
    <script type="text/javascript">
        alert("UserControl2");
    </script>
    into UserControl2.ascx.

    I can see a respective alert box and styles applied when user controls are loaded.

    So, yes, it would be good to look at your sample.
  3. #3
    I have this in a global stylesheet (none of this seems to affect the control):

    .x-grouptabs-panel .x-grouptabs-expand {
        background-image: none !important;
    }
    
    .x-grouptabs-expanded .x-grouptabs-expand {
        background-image: none !important;
    }
    
    .x-tab-panel-left .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text, .x-tab-panel-right .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text {
        font-size: 11px;
    }
    
    .x-grouptabs-panel .x-grouptabs-strip a.x-grouptabs-text 
    {
        color:#395b8e;
        font-weight:normal;
    }
    
    .x-grouptabs-panel .x-grouptabs-strip-active a.x-grouptabs-text {
        font-weight:bold;
    }
    
    .x-grouptabs-panel
    {
        border-color: #fff;
        background-color: #fff;
    }
    
    .x-grouptabs-panel .x-grouptabs-corner
    {
        background-image:none;
    }
    
    .x-tab-panel-left .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text
    {
        padding-left:0px;
    }
    Here's the sample user control, Control1.ascx:

    <script runat="server">
    
        Public Overrides Sub DataBind()
            TheWindow.Show()
        End Sub
        
    </script>
    
    <ext:Window ID="TheWindow" runat="server" Hidden="true" Width="700" Height="600" Modal="true" Layout="FitLayout">
        <Items>
            <ext:Panel runat="server" Border="false" Layout="FitLayout">
                <Items>
                    <ext:GroupTabPanel runat="server" DeferredRender="false" ActiveGroupIndex="0">
                        <Groups>
                            <ext:GroupTab runat="server" DeferredRender="false">
                                <Items>
                                    <ext:Panel runat="server" Title="Test" />
                                </Items>
                            </ext:GroupTab>
                        </Groups>
                    </ext:GroupTabPanel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Window>
    Here's the page:

    <script runat="server">
         
        Protected Sub TheButton_Click(sender As Object, e As Ext.Net.DirectEventArgs)
            Dim c As Adhesion.Web.Control1 = LoadControl("Control1.ascx")
            c.ID = "Control1"
            TheContainer.ContentControls.Add(c)
            TheContainer.UpdateContent()
            c.DataBind()
        End Sub
                      
    </script>
    
    <ext:Container ID="TheContainer" runat="server" />
    
    <ext:Button runat="server" Text="Load Control" OnDirectClick="TheButton_Click" />
  4. #4
    Thanks for the sample.

    A GroupTabPanel is rendered dynamically and its resources including CSS are also rendered on the fly. Due to the fact that they are rendered after your custom styles, they override it.

    To fix I can suggest to set up
    Protected Sub Page_Load(sender As Object, e As EventArgs)
        ResourceManager.RegisterControlResources(Of GroupTabPanel)()
    End Sub
    on the page.
  5. #5
    ok, that fixed my css issue. I'm going to try to fix my sample so that it illustrates the databinding problem that i'm having.
  6. #6
    One problem that I'm having with loading controls dynamically is that they seem to be so brittle compared to loading them the normal way. The control I'm trying to make this work with looks completely messed up. half of the form fields are not rendering in the right place and fields are visible that should be hidden. I feel like I'm doing something horribly wrong, but I can't find any obvious place in my control where things aren't done according to the examples given on the ext.net site. I'm not even sure where to begin trying to fix this.
  7. #7
    I think you are facing a layout issue.

    Probably, you need to wrap the user control content in some layout control.

    Please note that the UpdateContent method won't work in this case. You will need to call the Render method instead for the container where you put a user control. This container should also be in some container to do not lose its position.
  8. #8
    The user control just contains a window. Unless I'm mistaken, shouldn't the layout of the window be handled within the control.

    Essentially what I have is a container on my main page and during the directevent, i add the user control that contains the window to the container's contentcontrols.
  9. #9
    I don't think it is correct to add a user control with a Window to some Ext.NET container.

    Please see how a Window within a user control is rendered in this example:
    https://examples1.ext.net/#/Calendar/Overview/Basic/

    Look at the EventStore_SubmitData handler and EventsViewer.ascx.
  10. #10
    What if my control contains a few windows and a couple of other user controls. Do I need to render everything? Is there a way to encapsulate all of the stuff in the control so i can render them at the same time?
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 0
    Last Post: May 16, 2012, 11:29 PM
  2. [CLOSED] ComboBox in user control binding but not showing data
    By Digital.Dynamics in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: May 08, 2012, 12:09 PM
  3. Replies: 4
    Last Post: May 31, 2011, 3:53 PM
  4. Binding data to DropdownField ext.net control
    By flopdix in forum 1.x Help
    Replies: 2
    Last Post: Mar 04, 2011, 2:28 AM
  5. Replies: 8
    Last Post: Jan 25, 2011, 4:21 AM

Posting Permissions