flexgrid custom cell

Posted by: kisar on 13 August 2018, 4:40 am EST

  • Posted 13 August 2018, 4:40 am 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
  • Replied 14 August 2018, 4:51 am 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
  • Replied 14 August 2018, 5:34 am 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:
    <td>
    @if (item.is_active)
    {
    <i class="fa fa-check text-primary" aria-hidden="true"></i>
    }
    </td>
    How is the easier way to obtain this?
  • Marked as Answer

    Replied 16 August 2018, 4:48 am 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
  • Replied 16 August 2018, 10:37 am EST

    Thank you
    very usefull
Need extra support?

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

Learn More

Forum Channels