Hiding column during onload function

Hiding column during onload function

Posted by: ed on 23 February 2019, 1:50 pm EST

• 

  ed

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 23 February 2019, 1:50 pm EST

  I am trying work with the Wijmo trial. I have been able to add a grid control to a viewer in my MVC Core 2.2 application. In my onload function I am loading the data from my model.

  I added the following code to the onload function which I found in another forum post to try to hide a column.

  var cols = $(‘#grid1’).wijgrid(‘columns’);
  
  cols[0].option(‘visible’,false);

  When I run the application the column does not get hidden and in the console I am getting this error message;

  “Uncaught TypeError: $(…)wijgrid is not a function at onload”

  I have these script tags at the top of my .cshtml file

  Thanks, Ed

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 25 February 2019, 4:36 am EST

  Hi Ed,

  wijgrid() refers to our older wijmo3 controls which were JQuery widgets and you are using our new Wijmo5 controls hence the error is thrown.
  
  Please go through the following sample to get started with the Flexgrid and let us know if you face any further issues:
  
  https://www.grapecity.com/en/samples/asp-net-core-mvc-flexgrid-101

  Regards

• 

  ed

  • Post Options:
  • Link
    Copy

  Posted 26 February 2019, 4:09 pm EST

  Thanks for your help. I was able to figure out a couple of issues I was having.

  My next question is how do I add buttons to all the cells in a column?

  Right now this is my code that is reading the data from my model and creating my grid.

  var items =@Html.Raw(Json.Serialize(Model));

      new wijmo.grid.FlexGrid('#grid1', {
          itemsSource: items
      });
  

  Would I set the autoGenerateColumns: to false and then define my columns using code like this?

  columns: [
  
  { binding: ‘country’, header: ‘Country’ },…}]

  If so, how do I define the button column and set the format?

  Thanks, Ed

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 27 February 2019, 1:15 am EST

  We could handle the formatItem event to customize the cells easily. Please refer to the following code snippet:

  let grid = new wijmo.grid.FlexGrid('#grid1', {
  	itemsSource: items
  });
  // handle formatItem event to customize cell appearances
  grid.formatItem.addHandler(function(s,e){
  	// check if cell is normal data cell
  	if(e.panel.cellType != wijmo.grid.CellType.Cell){
  		return;
  	}
  	
  	// apply our formatting in only 'country' column
  	if(e.panel.columns[e.col].binding != "country"){
  		return;
  	}
  
  	// check complete, apply formatting/modify cell content
  	e.cell.innerHTML = "<button>My button</button>";
  });
  

  Also, please refer to the following sample demonstrating some advance formatting:
  
  https://demos.wijmo.com/5/PureJS/LearnWijmo/LearnWijmo/#8Lgc37dc
  
  https://demos.wijmo.com/5/PureJS/LearnWijmo/LearnWijmo/#8yr4gg67
  
  In the sample above formatItem is defined at the time of declaration like:
  
  let grid = new wijmo.grid.FlexGrid(‘#grid1’, {
  
  itemsSource: items,
  
  formatItem: function(s,e){}
  
  });
  
  but we are free to add handler after the grid’s initialization using the addhandler() method as demostrated in the above code snippet.

  Would I set the autoGenerateColumns: to false and then define my columns using code like this?
  
  This actually depends on your actual requirement, for simply formatting a cell, we do not need to set autoGenerateColumns to false and define our own columns but if we have a requirement to modify the columns layout i.e generate only a subset or superset of columns, or change their position in the grid etc. then it is better to define out own columns layout.

  Also, For better support of MVC framework, you may also check out our C1MVC Core controls:
  
  https://demos.componentone.com/aspnet/5/mvcexplorer

• 

  ed

  • Post Options:
  • Link
    Copy

  Posted 28 February 2019, 3:27 pm EST

  Thanks for the help.