DevExpress ComboBox无法在Bootstrap弹出窗口上呈现

时间:2018-09-28 12:17:31

标签: twitter-bootstrap-3 devexpress

我正在尝试使用DevExpress MVC控件,并已使用DevExpress ComboBox并创建了Bootstrap弹出窗口来实现它。这是我的代码:

<div class="container" style="width: 300px; float: left; margin: 10px 10px 10px 10px;">
    <ul class="list-group">
        <li class="list-group-item">
            <a id="one">One</a>
        </li>
        <li class="list-group-item">
            <a id="two">Two</a>
        </li>
        <li class="list-group-item">
            <a id="three">Three</a>
        </li>
        <li class="list-group-item">
            <a id="four">Four</a>
        </li>
    </ul>
</div>

<div id="one-content" style="display: none">
    <div class="arrow"></div>

    <div class="container" style="width:400px !important">
        <div class="row">
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                <div data-toggle="buttons" class="info-block block-info clearfix">
                    <button id="meds-popover-link-type-selection" class="btn btn-default button-popover"> Suspect </button>
                </div>
            </div>

            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                <div data-toggle="buttons" class="info-block block-info clearfix">
                    <button id="meds-popover-link-type-selection" class="btn btn-default button-popover"> Concomitant </button>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="form-group">
                <label> General Section</label>
                <select>
                    <option>Test 1</option>
                    <option>Test 2</option>
                    <option>Test 3</option>
                    <option>Test 4</option>
                </select>
            </div>
        </div>

        <div class="row">
            <label>Owner / Assigned To </label>
            <div class="editor">
           @Html.DevExpress().ComboBox(settings =>
           {
               settings.Name = "test";
               settings.SelectedIndex = -1;
               settings.Properties.ValueType = typeof(string);
               settings.Properties.Items.Add("Non-Serious");
               settings.Properties.Items.Add("Serious-expected");
               settings.Properties.Items.Add("Serious-unexpected");
               settings.Properties.Items.Add("Life Threating");
           }).GetHtml()
            </div>
        </div>
    </div>
</div>

以下是我用来调用弹出窗口的JavaScript:

<script>
    $('#one').popover({
        trigger: 'manual',
        placement: 'right',
        container: 'body',
        html: true,
        content: function () {
            return $('#one-content').html();
        }
    }).click(function (e) {
        $(this).popover('toggle');
        e.preventDefault();
    });
</script>

问题是打开Popover时,组合框未呈现。我可以使用简单的下拉列表或MVC下拉列表,但Devexpress组合框不会在弹出窗口上呈现。

查看图片:

enter image description here enter image description here enter image description here

0 个答案:

没有答案