flexgrid custom cell

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

  • 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
  • Replied 13 August 2018, 7:51 pm EST

    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:

    .custom .wj-cell{
    padding: 10px;
    .custom .wj-cell.wj-header {
    color: white;
    background: black;
    font-family: 'Times New Roman', Times, serif;
    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;

    .Bind(m => m.Bind(Model))


    Hope it helps!

  • Replied 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)
    <i class="fa fa-check text-primary" aria-hidden="true"></i>
    How is the easier way to obtain this?
  • Marked as Answer

    Replied 15 August 2018, 7:48 pm EST

    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") {
    cell.innerHTML='<i class="fa fa-check text-primary" aria-hidden="true"></i>';

  • Replied 16 August 2018, 1: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