Update FlexGrid data by clicking button on form

Posted by: elogsdon on 25 August 2020, 6:58 am EST

  • Posted 25 August 2020, 6:58 am EST

    I have a web page with a flexgrid. I am using "excel style" editing on the grid. that appears to be working fine.
    What I would like to do is change a "status indicator" column in a row by selecting that row and clicking a button that is not in the grid. This would update a column value (driving the GridUpdate method in the controller) and change the background color on that row as a visual indicator. (I think I can just update the cssClass on the row once I have access to the row).

    Or there any samples that would help me put this together?

    Thanks,
    Eric
  • Replied 25 August 2020, 7:23 pm EST

    Hello Eric,
    As you said you would select a row and then call the update method by button click that would update on the Server.
    In this case, you would access the row using the following JS code snippet:
    var selection = grid.selection;
    var row = grid.rows[selection.row];
    row.cssClass ="status-success";


    Hope it helps!

    Regards,
    Manish Gupta
  • Replied 28 August 2020, 6:05 am EST

    Manish,
    Thanks for the above, but how to I call the update method from the JavaScript after I update the flag?

    Here is the FlexGrid definition and the button I am clicking:
    button type="button" value="Flag" class="btn btn-outline-dark" onclick="billDelete()">
    <img src="~/Images/sheet-remove.png" />
    <p>Flag</p>
    </button>

    @using (Html.BeginForm("Save", "Bill"))
    {
    @Html.AntiForgeryToken()
    @(Html.C1().FlexGrid().Id("policyGrid")
    .IsReadOnly(true)
    .SortingType(C1.Web.Mvc.Grid.AllowSorting.SingleColumn)
    .Bind(ib => ib.Update(Url.Action("GridUpdate")).OnClientQueryComplete("Complete")
    .Create(Url.Action("GridCreate"))
    .Delete(Url.Action("GridDelete"))
    .DisableServerRead(true)
    .Bind(Model.Policies))
    .AutoGenerateColumns(false)
    .IsReadOnly(false)
    .ShowColumnFooters()
    .CssClass("ListBill")
    .Columns(c =>
    {
    foreach (var col in Model.ColumnList)
    {
    c.Add(col);
    }
    })
    .AllowAddNew(true)
    .AllowDelete(true)
    .ShowErrors(true)
    .OnClientLoadedRows("fixDefaultJSAlert")


    And here is the prototype JavaScript function my button click calls
       function billDelete() {
    var batchEditGrid = wijmo.Control.getControl('#policyGrid');
    var selection = batchEditGrid.selection;
    var selectedRow = batchEditGrid.rows[selection.row];
    selectedRow.PolicyStatus = "D";
    selectedRow.cssClass = "lb-deleted";
    batchEditGrid.rows[selection.row] = selectedRow;
    }


    I looking through the wijmo.flexgrid doc, I don't see an obvious way to call the update method.

    Eric.
  • Marked as Answer

    Replied 31 August 2020, 4:21 pm EST

    Hi Eric,
    To update the FlexGrid, we need to make the selected row item editable in the CollectionView. And when editing is completed, we should call the commitEdit() method to update on FlexGrid and on Server.

    Please refer to the following code snippet for reference:
    var grid = wijmo.Control.getControl("#policyGrid");
    var cv= grid.collectionView;
    cv.editItem(grid.rows[grid.selection.row].dataItem);
    cv.currentEditItem.PolicyStatus="D";
    grid.rows[grid.selection.row].cssClass="lb-deleted";
    cv.commitEdit();


    Hope it helps!

    Regards,
    Manish Gupta
  • Replied 2 September 2020, 5:59 am EST

    Thanks, Manish. That did the trick. Still having an issue with the styling, but that is probably a css problem on my part.

    You guys rock!
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels