Search code examples
c#asp.net-mvcasp.net-corerazordevextreme

Devextreme DataGrid in DropDownBox

I am using DevExtreme .net controls DropdownBox to display a DataGrid but I can't get selected values in controller on Post method how can i read selected values? My razor :

        .Form(f => f.Items(items =>
    {
        items.AddGroup()
            .ColCount(2)
            .ColSpan(2)
            .Items(groupItems =>
            {
                groupItems.AddSimpleFor(m => m.IdEmployee).IsRequired(false)
                .HelpText("Enter le nom de l'employé")
                    .Editor(e => e.DropDownBox()
                        .ValueExpr("Id")
                        .DisplayExpr("Nom")
                            .DataSource(d => d.Mvc()
                            .Controller("RhListeDesEmployes")
                            .LoadAction("Get")
                            .LoadMode(DataSourceLoadMode.Raw)
                            .Key("Id")
                        )
                        .Visible(true)
                        .Placeholder("Selectionner un employé...")
                        .ShowClearButton(true)
                        .OnValueChanged("gridBoxIdEmployee_valueChanged")
                        .ContentTemplate(new TemplateName("EmbeddedDataGridMultipleIdEmployee"))
                    );
                groupItems.AddSimpleFor(m => m.TypeContrat);
                groupItems.AddSimpleFor(m => m.Periode);
                groupItems.AddSimpleFor(m => m.UniteRecrutement);
                groupItems.AddSimpleFor(m => m.DateAmbouche);
            });
    }));
@using (Html.DevExtreme().NamedTemplate("EmbeddedDataGridMultipleIdEmployee"))
{
    @(Html.DevExtreme().DataGrid()
        .ID("embedded-datagridMultipleIdEmployee")
        .DataSource(new JS(@"component.getDataSource()"))
        .Columns(columns => {
            columns.Add().DataField("Nom");
            columns.Add().DataField("Prenom");
            columns.Add().DataField("Departement");
        })
        .HoverStateEnabled(true)
        .Paging(p => p.PageSize(10))
        .FilterRow(f => f.Visible(true))
        .Scrolling(s => s.Mode(GridScrollingMode.Infinite))
        .Height(345)
        .Selection(s => s.Mode(SelectionMode.Single))
        .SelectedRowKeys(new JS(@"[component.option(""value"")]"))
        .OnSelectionChanged(@<text>
            function(selectedItems) {
                var keys = selectedItems.selectedRowKeys;
                component.option("value", keys);
            }
        </text>)
    )
}
function gridBoxIdEmployee_valueChanged(e) {
    var $dataGrid = $("#embedded-datagridMultipleIdEmployee");
    if ($dataGrid.length) {
        var dataGrid = $dataGrid.dxDataGrid("instance");
        dataGrid.selectRows(e.value, false);
    }
}

The problem is when i call Post in my controller the IdEmployee is not added to the values like so:

enter image description here even tho the changed value has been updated under "_$submitElement ": enter image description here

Solution

  • the solution was that each cell has its cellediting template where you can set a custom template and get its values in the controller.