CodeEffects RuleEditor not rendering in MVC dialog

Currently we have a full page that renders the RuleEditor without issue in the view. I've ran into an issue in getting this to render properly on a dialog.

I'm using the same exact logic to load the objects between the full view and the dialog view.

Here is what the RuleEditor looks like in the full view with an example rule: RuleEditor Full view

Here is the RuleEditor display (bad rendering) for the same rule RuleEditor within dialog The div content within this dialog is:

<div id="ruleModel" name="ruleModel">
    <input type="hidden" id="ruleModelData" name="ruleModel">
    <a href="http://codeeffects.com" ce002="false">.</a>
</div>

There are no html/javascript console errors. Any thoughts on why this is happening?

Thanks!

*******UPDATE***** Here is the .cshtml content for the dialog:

@model RuleViewModel

<link href="@Url.Content("~/Content/Common.css")" rel="stylesheet" 
type="text/css" />

@{
    ViewBag.Title = "Edit Rule1";
    Layout = null;
    Html.CodeEffects().Styles()
        .SetTheme(ThemeType.Gray)
        .Render();
}


@using (Html.BeginSecureForm("Save", "Rule"))
{
    @Html.ValidationSummary(true)
    <br />
    <b>Rule Name:</b> @Html.TextBoxFor(m => m.RuleName, new { id = 
"RuleName", @class = "form-control" })

    <fieldset>
        <div class="main">
            <div class="area">
                <div style="margin-top:10px;">
                    @{
                        Html.CodeEffects().RuleEditor()
                                        .Id("ruleModel")
                                        .ShowToolBar(false)
                                        .Mode(RuleType.Evaluation)
                                        .Rule(ViewBag.Rule)
                                        .DataSources(Model.DataSources)
                                        .ContextMenuRules(Model.Rules)
                                        .Render();

                    }
                    @{
                        Html.CodeEffects().Scripts().Render();
                    }
                </div>
                <div class="modal-footer">
                    <input class="btn btn-default" submit" type="submit" 
value="Save" />
                    <button type="button" class="btn btn-
default">Cancel</button>
                </div>
            </div>
        </div>
    </fieldset>
}

UPDATE #2 I took from the AJAX example and did all the RuleEditor settings via the AJAX post/controller methods. That seems to work better, but now the context menu seems disconnected. (See area in Red Circle)RuleEditor In Dialog, Context Menu behind

Most likely your dialog is "disconnected" from the main editor's script and all json settings it receives from the server on load. Another possibility is that your dialog tries to render the editor before those json setting values gets to the client.