Update FlexGrid data by clicking button on form

Update FlexGrid data by clicking button on form

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

• 

  elogsdon

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  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

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  elogsdon

  • Post Options:
  • Link
    Copy

  Posted 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.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  elogsdon

  • Post Options:
  • Link
    Copy

  Posted 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!