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
455
Updating multiple igGrids in Mvc 3
posted

I have 3 igGrids which allow updating and some textboxes on a View.

When user make changes I want to post the grid changes and Model to the controller.

I have tried wrapping all the controls inside a Html.BeginForm and passing the model to the controller on submit, but the igGrid transactions are not coming thourgh.

Note, that I know how to use .UpdateUrl(Url.Action("BomSaveChanges", "Model")) to pass Iggrid transactions one by one but I need the transactions from all iggrids and the Model to be passed to controller. See code below:

View

@model BomCollectionViewModel
@{
ViewBag.Title = "Bom";

var bomCode = (Model.BomList.FirstOrDefault() == null ? 0 : Model.BomList.FirstOrDefault().BomCode);
}
@Html.ScriptsAndStyles(new List<string> { "grid" }, "infragistics")
@using (Html.BeginForm("BomSaveChanges", "Model", FormMethod.Post))
{
@Html.HiddenFor(model => model.Code)

@Html.Label("Sku Name")
@Html.TextBoxFor(m => m.SkuName)

@Html.Label("BoM Name")
@Html.TextBoxFor(m => m.Name)

<div id="bomForm">
<div id="rawMaterials">
@(Html.Infragistics()
.Grid(Model.BomList.AsQueryable())
.ID("rmGrid")
.PrimaryKey("Code")
.UpdateUrl(Url.Action("BomSaveChanges", "Model", new { bomCode = @bomCode }))
.Width("50%")
.Height("200px")
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.Columns(column =>
{
column.For(x => x.Code).HeaderText("Bom Item Code").Width("20%");
column.For(x => x.Name).HeaderText("Bill of Materials").Width("30%");
column.For(x => x.Weight).HeaderText("Weight").Width("30%");
column.For(x => x.Proportion).HeaderText("Proprotion").Width("20%");
})
.Features(feature =>
{
feature.Updating().ColumnSettings(cs =>
{
cs.ColumnSetting().ColumnKey("Code").EditorType(ColumnEditorType.Numeric).ReadOnly(true);
cs.ColumnSetting().ColumnKey("Name").EditorType(ColumnEditorType.Text).Required(true);
cs.ColumnSetting().ColumnKey("Weight").EditorType(ColumnEditorType.Numeric).Required(true);
cs.ColumnSetting().ColumnKey("Proportion").EditorType(ColumnEditorType.Numeric).Required(true);

});
feature.Sorting();
})
.DataBind()
.Render()
)
</div>
<div id="SkuPackaging">
@(Html.Infragistics()
.Grid(Model.BomList.AsQueryable())
.ID("spGrid")
.PrimaryKey("Code")
.UpdateUrl(Url.Action("BomSaveChanges", "Model"))
.Width("50%")
.Height("200px")
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.Columns(column =>
{
column.For(x => x.Code).HeaderText("Bom Item Code").Width("10%");
column.For(x => x.Name).HeaderText("Bill of Materials").Width("30%");
column.For(x => x.Weight).HeaderText("Weight").Width("30%");
column.For(x => x.Proportion).HeaderText("Proprotion").Width("20%");
})
.Features(feature =>
{
feature.Updating().ColumnSettings(cs =>
{
cs.ColumnSetting().ColumnKey("Code").EditorType(ColumnEditorType.Numeric).ReadOnly(true);
cs.ColumnSetting().ColumnKey("Name").EditorType(ColumnEditorType.Text).Required(true);
cs.ColumnSetting().ColumnKey("Weight").EditorType(ColumnEditorType.Numeric).Required(true);
cs.ColumnSetting().ColumnKey("Proportion").EditorType(ColumnEditorType.Numeric).Required(true);

});
feature.Sorting();
})
.DataBind()
.Render()
)
</div>
<div id="CasePackaging">
@(Html.Infragistics()
.Grid(Model.BomList.AsQueryable())
.ID("cpGrid")
.PrimaryKey("Code")
.UpdateUrl(Url.Action("BomSaveChanges", "Model"))
.Width("50%")
.Height("200px")
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.Columns(column =>
{
column.For(x => x.Code).HeaderText("Bom Item Code").Width("10%");
column.For(x => x.Name).HeaderText("Bill of Materials").Width("30%");
column.For(x => x.Weight).HeaderText("Weight").Width("30%");
column.For(x => x.Proportion).HeaderText("Proprotion").Width("20%");
})
.Features(feature =>
{
feature.Updating().ColumnSettings(cs =>
{
cs.ColumnSetting().ColumnKey("Code").EditorType(ColumnEditorType.Numeric).ReadOnly(true);
cs.ColumnSetting().ColumnKey("Name").EditorType(ColumnEditorType.Text).Required(true);
cs.ColumnSetting().ColumnKey("Weight").EditorType(ColumnEditorType.Numeric).Required(true);
cs.ColumnSetting().ColumnKey("Proportion").EditorType(ColumnEditorType.Numeric).Required(true);

});
feature.Sorting();
})
.DataBind()
.Render()
)
</div>
<br />
<input type="submit" id="saveChanges" value="BomSaveChanges" />
<input type="button" id="undo" class="button-style" value="Undo" />
<input type="button" id="redo" class="button-style" value="Redo" />
<br />
</div>
}

Controller:

[HttpPost]
public ActionResult BomSaveChanges(BomCollectionViewModel bomCollection)
{

int id = 0;
var allBoms = new CostAnalyticsSchema.mt_ca_data_ModelBomDataTable();
AppInfrastructure.DataTableSelect(allBoms);


if (id > 0)
{
bool isNewBom = allBoms.Any(s => s.BomCode == id);
}

ViewData["GenerateCompactJSONResponse"] = false;

GridModel m = new GridModel();

List<Transaction<BomViewModel>> transactions = m.LoadTransactions<BomViewModel>(HttpContext.Request.Form["ig_transactions"]);

etc..

  • 20255
    Verified Answer
    Offline posted

    Hello,

    I'm just following up to see if you need any further assistance on this matter.

  • 20255
    Offline posted

    Hello,

     Thank you for using our forum!
     About the issue that you've mentioned, regarding igGrid transactions not coming through, my suggestion is to use hidden field, which will pass the transaction to the begin form like this:

    @(Html.BeginForm("SaveDetails","Home"))

           

        @(Html.Infragistics().Grid(Model).ID("grid1").Width("99%")
        .AutoGenerateColumns(false).AggregateTransactions(true)
        .Columns(column =>
            {
                column.For(x => x.Name).Width("200px").HeaderText("Name");
                column.For(x => x.ProductId).Width("260px").HeaderText("Id");
                column.For( x=> x.Number).Width("280px").HeaderText("Quantity");        
                column.For(x => x.Distributor).Width("350px").HeaderText("Distributor");
                column.For(x => x.Cost).Width("300px").HeaderText("Price");
           
            })
        .Height("300px").PrimaryKey("ProductId")       
        .Features(feature =>                                           
            {
                feature.Paging().PageSize(8);
                feature.Updating().EnableAddRow(true).EnableDeleteRow(true);
            })

        .DataSourceUrl(Url.Action("PagingGetData")).DataBind().Render())

      @* --- Adding the hidden field which passes the transaction to the begin form --- *@

        @(Html.Hidden("gridTransactions"))



    <input type="submit" onclick="submitAndSaveChanges()" />

    <script>
        function submitAndSaveChanges() {

            // using the "allTransactions" option
            var transactions = $("#grid1").igGrid("allTransactions");

            // igGrid transactions converted to string
            $("#gridTransactions").val($("#grid1").data("igGrid").transactionsAsString());
        }
    </script>

     
     I've attached you a sample that is showing this approach. 

     If you have any further questions do not hesitate to contact me.

    IGGridVScrollbarIssue.zip