Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Daniel Dority
2745
Re-render row based on row template
posted

I am using row templates to create different types of rows.  I want to create a different row based on the type.  So far it is achievable.  The problem is when the type changes, the row does not.  It seems like the row templates are only used when the row is first created.  How do I evaluate the row template again based on a new value in the column?

pseudo code:

if column 'type' value equals '*' then
    // row is a note and columns should be spanned
else
    // row is normal
end if

My row template looks like this:

<tr>
  <td data-key='${ItemId}'>${ItemId}</td>
  <td data-key='${ItemType}'>${ItemType}</td>
  <td data-key='${Note}' {{if isNote(${ItemType})}} colspan='10' style='background-color: yellow;' {{else}} style='background-color: red;' {{/if}}>${Note}</td>
  ...
</tr>

function isNote (type) {
  if (type === '*') {
    return true;
  }

When the type is changed from '*' to '$' I need the note column to disappear and show the other 10 columns like a normal record but I can't seem to get that working.  Any ideas?
  return false;
}

  • 3595
    Suggested Answer
    posted

    Hello Daniel,

    Thank you for posting in our community!

    I have attached a sample demonstrating combined usage of conditional templating and updating features. Several types of rows are included in the grid in this sample. The ID cell is colored differently according to the row type.

                        $("#grid1").igGrid({

                                    columns: [

                                { headerText: "Product ID", key: "ProductID", dataType: "number" },

                                { headerText: "Product Name", key: "Name", dataType: "string" },

                                { headerText: "Distributor",  key: "Distributor", dataType: "string" },

                                { headerText: "Quantity", key: "Quantity", dataType: "number"},

                                { headerText: "Price", key: "Price", dataType: "number"}

                            ],

                                     width: '550px',

                                     height: '420px',

    rowTemplate:

    " <tr>

             <td> {{if ${ProductID} === 2}}

                         <div class='marked-row'>${ProductID}</div>

                     {{elseif ${ProductID}===3}}

                          <div style='background-color:red'>${ProductID}</div>

                    {{elseif ${ProductID}===0}}

                           <div style='background-color:blue'>${ProductID}</div>

                   {{else}}<div>${ProductID}</div>

              {{/if}}

        </td>

        <td><span style='color:#0000ff'>${Name}</span>   </td>

        <td><span style='color:#0000ff'>${Distributor} </span> </td>

        <td><span style='color:#0000ff'>${Quantity}</span>   </td>

        <td><span style='color:#0000ff'>${Price} </span> </td>

    </tr>",

     

            dataSource: products,

            autoCommit: false,

            primaryKey:'ProductID',

              features:

               [

                   {

                          name: "Updating"

                   }

                ]

       });

     

    Colors are automatically changed while rows are edited.

    Feel free to modify the sample and use it in your own projects if needed.

    If you have more questions don’t hesitate to contact me.

    igGridRowTemplatingAndEditing.zip