Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
210
Unable to have column edit as Combo (dropdown mode) when using MVC Helper
posted

When I use the example for the jquery grid the combo dropdown works on the editing of a column however when I use the MVC helper it does not and instead when editing the column it renders as a textbox.

I've tried running both examples side by side in the same web page to ensure it wasn't something to do with the script loading of jquery/infragistics or the type differences but still it only works on the jQuery version.

Here is how I'm instantiating my mvc grid.

<div class="row col-sm-12 col-lg-12 col-md-12">
    @(Html.Infragistics()
        .Grid(Model.UserVms)
        .ID("igGrid")
        .Width("100%")
        .AutoGenerateColumns(false)
        .AutoCommit(true)
        .PrimaryKey("UserName")
        .UpdateUrl(Url.Action("UsersSaveData", "UsersManagement"))
        .AggregateTransactions(true)
.Columns(column =>
{
column.For(x => x.UserName).HeaderText("Username");
column.For(x => x.Email).HeaderText("Email");
....
column.For(x => x.PostCode).HeaderText("Postcode");
column.For(x => x.Gender).HeaderText("Gender").DataType("number").FormatterFunction("formatGenderColumn");
column.Unbound("Delete").HeaderText("").Formula("getDeleteBtnTemplate").UpdateMode(UnboundValuesUpdateMode.Auto);
})
.Features(f =>
{
f.Paging()
.PageSize(15)
.ShowPageSizeDropDown(false);
f.Updating().ColumnSettings(cs =>
{
cs.ColumnSetting().ColumnKey("UserName").Required(true).TextEditorOptions(o => o.ValidatorOptions(vo => vo.LengthRange(4)));
cs.ColumnSetting().ColumnKey("Delete").ReadOnly(true);

cs.ColumnSetting()
.ColumnKey("Gender")
.EditorType(ColumnEditorType.Combo)
.ComboEditorOptions(wrapper => wrapper
.Mode(ComboMode.DropDown)
.DataSource(Model.Genders)
.ValueKey("Key")
.TextKey("Value"));
});
f.Updating()
.EditMode(GridEditMode.Cell)
.EnableAddRow(true)
.EnableDeleteRow(false)
.DeleteRowLabel("Delete");
})
.DataBind()
.Render())
</div>

When inspecting the generated jQuery from this, it seems to be setting everything as is in the following jsfiddle jQuery example - jsfiddle.net/.../

Here is the jQuery output - http://pastebin.com/RmvzqSkR