我正在尝试使用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组合框不会在弹出窗口上呈现。
查看图片: