Flexgrid custom cell

Flexgrid custom cell

Posted by: kisar on 12 August 2018, 7:40 pm EST

• 

  kisar

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 12 August 2018, 7:40 pm EST

  Hi, i’m using flexgrid component
  
  could I have me some example how to create
  
  some custom template (razor):

  • padding, margin in row cells
  • padding, margin, font in header columns
  • using hmt code in row cells (image, ……)

  Thank you

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 13 August 2018, 7:51 pm EST

  Hi,
  
  You may apply styling for cell by defining style using .wj-cell class and HTML content can be add to the cells using ItemFormatter property. Please refer to the attached sample and following code snippet for the same:

  
  <style>
      .custom .wj-cell{
          padding: 10px;
      }
      .custom .wj-cell.wj-header {
          color: white;
          background: black;
          font-family: 'Times New Roman', Times, serif;
      }
  </style>
  <script>
      function ItemFormatter(panel, r, c, cell) {
          if (panel.cellType == 1 && c==2) {
              cell.innerHTML = "<img src='https://images.pexels.com/photos/103567/pexels-photo-103567.jpeg?auto=compress&cs=tinysrgb&h=350' width=25 height=25 /> " + cell.innerText;
          }
      }
  </script>
  
  @(
      Html.C1().FlexGrid().Id("grid").CssClass("custom")
      .IsReadOnly(true)
      .Height(500)
      .ItemFormatter("ItemFormatter")
      .Bind(m => m.Bind(Model))
      
  )
  
  
  

  Hope it helps!

  ~Manish
  
  FlexGridIntro_Cell_padding_ImageHTML.zip

• 

  kisar

  • Post Options:
  • Link
    Copy

  Posted 13 August 2018, 8:34 pm EST

  thank you, could you explain me when it’s better to use .CellTemplate(b => b.TemplateId(“template1”).

  In this case I have a grid column with a binding field “is_active”, in each rows if the value is true I display a image,
  
  in the classic html i used to do:
  
  
  
  @if (item.is_active)
  
  {
  
  
  
  }
  
  
  
  How is the easier way to obtain this?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 15 August 2018, 7:48 pm EST

  Hi,
  
  We are sorry for the delayed response.

  The ItemFormatter would be better to use. Please refer to the following code snippet:

  function ItemFormatter(panel, r, c, cell) {
          if (panel.cellType == 1 && panel.columns[c].binding=="is_active") {
              if(panel.rows[r].dataItem.is_active){
  		cell.innerHTML='<i class="fa fa-check text-primary" aria-hidden="true"></i>';
  	    }
          }
      }
  

  ~Manish

• 

  kisar

  • Post Options:
  • Link
    Copy

  Posted 16 August 2018, 1:37 am EST

  Thank you
  
  very usefull