CODEWITHSUNDEEP
c#asp.netjquery-uijquery-ui-dialog
rjbell00
rjbell00

Reputation: 107

Adding ASP.net control to JQuery Dialog doesn't render correctly

Hi I've seen quite a few similar questions to this but all have been resolved by adding the dialog back into the page's main form. This doesn't resolve the following problem:

In my Aspx file, I've defined a segment of code as following:

    <asp:UpdatePanel runat="server" ID="RadAjaxPanel2" UpdateMode="always">
        <ContentTemplate>
            <div id="areaFilterDialog" runat="server">
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

and I've got the following javascript / jquery to initialise the dialog

 $("#areaFilterDialog").dialog({
                    bgiframe: true,
                    autoOpen: false,
                    resizable: false,
                    modal: true,
                    draggable: true,
                    closeOnEscape: true,
                    width: 630,
                    open: function (type, data) {
                        dialogOpen = true;
                        $(this).parent().appendTo("form");
                    }
                });
        });

which appends the dialog's element to the form on the parent page.

In a .cs file, I add content to the element as follows:

var departmentCode = e.DepartmentCode;
var summaryType = e.SummaryType;
var summaryCode = e.SummaryCode;
var totalName = e.TotalName;
var view = this.TemplateControl.LoadControl(".\\WebControls\\FilteredAreaRadGrid.ascx") as FilteredAreaRadGrid;

using (var businessManager = new BusinessManager(new DALConnection(this.DalConnectionString)))
{
       view.DataSource = businessManager.GetData(departmentCode, summaryType, summaryCode, string.Empty);
       this.AreaFilterDialog.Controls.Add(view);
}

and I make the JQuery UI Dialog show by registering the following startup script with the ScriptManager:

 var script = string.Format("ShowAttendanceFilterPopup('{0}');", totalName);
 ScriptManager.RegisterStartupScript(
      this.Page,
      this.Page.GetType(),
      "tmp",
      string.Format("<script type='text/javascript'>{0}</script>", script),
      false);

which calls the following javascript / jquery:

function ShowAttendanceFilterPopup(summaryName) {
    $("#areaFilterDialog").data('title.dialog', summaryName);
    $('#areaFilterDialog').dialog("open");
    $('#areaFilterDialog').dialog("enable");
}

The problem is that the html which should have been appended to the dialog is actually just appended to the top of the page, and the dialog box is not shown at all. If i don't add a Control to the dialog before I show it, the dialog displays correctly.

I've tried this with what I add currently, which is a UserControl containing a Telerik RadGrid, but also with a standard asp button, and both have the same behaviour.

Anyone got any ideas to what I'm doing incorrectly or even better, a solution to this problem?

Thanks a lot,

Rob

Upvotes: 0

Views: 690

Answers (1)

mikey
mikey

Reputation: 5160

Perhaps try:

<div id="areaFilterDialog">
    <asp:UpdatePanel runat="server" ID="RadAjaxPanel2" UpdateMode="always">
        <ContentTemplate></ContentTemplate>
    </asp:UpdatePanel>
</div>

I've not used the Telerik Ajax Panels but I'm guessing something like:

using (var businessManager = new BusinessManager(new DALConnection(this.DalConnectionString)))
{
       view.DataSource = businessManager.GetData(departmentCode, summaryType, summaryCode, string.Empty);
       RadAjaxPanel2.Controls.Add(view);
}

Having the div inside the AjaxPanel ContentTemplate and adding the view Control to it just doesn't seem right to me.

Upvotes: 1

Related Questions