Flex grid save states

Flex grid save states

Posted by: 048alexsandr1992 on 14 September 2017, 3:47 am EST

• 

  048alexsandr1992

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 3:47 am EST

  How can i save current states for grid after reload page?
  
  are there any examples?

• 

  nilay.vishwakarma

  • Post Options:
  • Link
    Copy

  Posted 18 September 2017, 1:18 am EST

  Hi,

  What do you mean by state? FlexGrid is a bound grid and thus any state would be dependent upon its data. So if the items-source are changing, grid would change.

  ~nilay

• 

  048alexsandr1992

  • Post Options:
  • Link
    Copy

  Posted 18 September 2017, 6:46 pm EST

  I want save current filtering parameters, the visibility of the columns, the current page number after reload page. For example save this in session.

• 

  048alexsandr1992

  • Post Options:
  • Link
    Copy

  Posted 19 September 2017, 5:36 pm EST

  It can help in my question?

  https://www.grapecity.com/en/forums/wijmo-archive/how-to-save-grid-column-or

• 

  nilay.vishwakarma

  • Post Options:
  • Link
    Copy

  Posted 25 September 2017, 12:33 am EST

  Hi,

  As of now you have to store the FilterDefinition string at your end as a string and load them when Flexgrid is loaded. Columns definitions and other settings too are to be saved manually.

  ~nilay

• 

  048alexsandr1992

  • Post Options:
  • Link
    Copy

  Posted 25 September 2017, 8:29 pm EST

  How bind to event “on filter apply” on client side?

• 

  048alexsandr1992

  • Post Options:
  • Link
    Copy

  Posted 25 September 2017, 8:48 pm EST

  as I understand, string
  
  var filter = new wijmo.grid.filter.FlexGridFilter(flex);
  
  create new filter.
  
  How can i get current filter with user changes?

• 

  nilay.vishwakarma

  • Post Options:
  • Link
    Copy

  Posted 26 September 2017, 3:48 pm EST

  Hi,

  You can use FlexGrid JS filter events:

  
  var f = new wijmo.grid.filter.FlexGridFilter(flex);
  filter.filterApplied.addHandler(function (s, e) {
    
  });
  filter.filterChanging.addHandler(function (s, e) {
    
  });
  filter.filterChanged.addHandler(function (s, e) {
    
  });
  
  

  For razor filters:

  
  @(Html.C1().FlexGrid<Sale>()
      .Id("ovFlexGrid")
      .AutoGenerateColumns(true)
      .Bind(Model)
      .CssClass("grid")
      .Filterable(f=>
      {
          f
          .DefaultFilterType(FilterType.Both)
          .OnClientFilterApplied("OnClientFilterApplied")
          .OnClientFilterChanged("OnClientFilterChanged")
          .OnClientFilterChanging("OnClientFilterChanging");
      })
      .OnClientSelectionChanged("csFlexGrid_SelectionChanged")
  
  )
  
  function OnClientFilterApplied(s, e){
  }
  function OnClientFilterChanged(s, e){
  }
  function OnClientFilterChanging(s, e){
  }
  
  
  

  ~nilay

• 

  048alexsandr1992

  • Post Options:
  • Link
    Copy

  Posted 26 September 2017, 9:16 pm EST

  1. How change columns order on client side? This is necessary to save the column positions after Drag and Drop.

  2. I tried to save filter conditions (use event OnClientFilterApplied) :

  function saveFilterState(s, e) {
  
  var gridName = $(s.grid.hostElement).attr(‘id’);
  
  $.cookie(gridName + ‘_filter’, JSON.stringify(s._filters));
  
  }

  but get error
  
  TypeError: Converting circular structure to JSON

  How to save filter data correctly?

• 

  nilay.vishwakarma

  • Post Options:
  • Link
    Copy

  Posted 27 September 2017, 8:37 pm EST

  Hi,

  1. A columnLayout JSON look something like this:

  
  {
    "columns": [
               {"dataType":2,"binding":"ID","header":"ID"},
               {"dataType":4,"binding":"Start","header":"Start","format":""},
               {"dataType":4,"binding":"End","header":"End","format":""},
               {"dataType":1,"binding":"Country","width":100,"header":"Country"},
               {"dataType":1,"binding":"Product","header":"Product"},
               {"dataType":1,"binding":"Color","header":"Color"},
               {"dataType":2,"binding":"Amount","header":"Amount","format":"c"},
               {"dataType":2,"binding":"Amount2","header":"Amount2","format":"c"},
               {"dataType":2,"binding":"Discount","header":"Discount","format":"p0"},
               {"dataType":3,"binding":"Active","header":"Active"}
              ]
  }
  
  

  This is serialised form of WjFlexGridColumn. The entire reference to which is provided here:

  http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.Column.Class.html

  You have to retrieve, manipulate and save columnLayout JSON like this:

  
  var grid, layout;
  c1.documentReady(function () {
          grid = wijmo.Control.getControl("#ovFlexGrid");
          layout = GetLayout();
  )}
  function GetLayout(){
     return grid.columnLayout;
  }
  function SetLayout(newLayout){
    grid.columnLayout = newLayout;
  }
  
  

  Some tips:
  
  Changing the order of JSON file would change column order.

  2. Do not save or load _filters object. Save filterDefinition instead.

  
  function saveFilterState(s, e) {
  var gridName = $(s.grid.hostElement).attr('id');
  $.cookie(gridName + '_filter', JSON.stringify(s.filterDefinition));
  }
  
  

  ~nilay

• 

  048alexsandr1992

  • Post Options:
  • Link
    Copy

  Posted 28 September 2017, 12:52 am EST

  thanks!

• 

  cbriley

  • Post Options:
  • Link
    Copy

  Posted 14 December 2017, 5:48 am EST

  I have a similar requirement. I’m looking to save column widths, visible column selections, filters, sorting, and grid page for users. Then use the saved values next time the page is loaded. Is there a sample project that demonstrates how to do all of this?