How to refer to customer methods in from row template?

[Lucas Hardbarger]

I have a very simple data set that is made up raw table data. In order to show the display values for each of the foreign ID's, I use the 'dataSource', 'foreignKeyField' and 'foreignKeyValue' properties on the ejGrid's columns to show the correct values. 

Unfortunately, my headings are too narrow for the amount of my columns (see attachment), and I am trying to redesign my display to make use of "row templates" so that I can do something similar to this: 

http://js.syncfusion.com/demos/web/#!/azure/grid/rows/rowtemplate

However I can't find a way to use a the column data sources from my row template markup. Here are my attempts:

<script id="rowTemplate" type="text/x-jsrender">

<tr>

<td> {{: getProductById(ProductId) }} ({{:ProductId}}) </td>

<td>

<table class="table table-condensed">

...

</table>

</td>

</tr>

</script>

Here is my method:

    getProductById = function(productId) {

      var i, len, product, ref;

      ref = comboFor.products;

      for (i = 0, len = ref.length; i < len; i++) {

        product = ref[i];

        if (product.id === productId) {

          return product.name;

        }

      }

      return '';

    };

Thanks in advance for any help!!

Luc

Attachment: forSyncFusion_db92db79.zip

[Balaji Marimuthu]

Hi Lucas,

Thanks for contacting Syncfusion support.

To process the values in template, use the helpers method and refer to the modified code example as below. 
Jsplayground sample: http://jsplayground.syncfusion.com/weihmkod


Refer to the document for further information.
http://www.jsviews.com/#helpers

<script id="templateData" type="text/x-jsrender">

        <tr>

            <td class="photo">

                <img src="../themes/images/Employees/{{:EmployeeID}}.png" alt="{{:EmployeeID}}" />

            </td>

            <td class="details">

               {{:~getProductById(EmployeeID) }}

            </td>

            <td class="details">

                <table class="CardTable" cellpadding="3" cellspacing="2">

                    <colgroup>

                        <col width="50%">

                        <col width="50%">

                    </colgroup>

                    <tbody>

                        <tr>

                            <td class="CardHeader">OrderID</td>

                            <td>{{:OrderID}} </td>

                        </tr>

                        <tr>

                            <td class="CardHeader">CustomerID</td>

                            <td>{{:CustomerID}} </td>

                        </tr>

                     

                    </tbody>

                </table>

            </td>

        </tr>
    </script>

<script type="text/javascript">

        $.views.helpers({

            getProductById: function (productId) {

                var i, len, product, ref;

                ref = window.employeeView;

                for (i = 0, len = ref.length; i < len; i++) {

                    product = ref[i];

                    if (product.EmployeeID === productId) {

                        return product.FirstName;

                    }

                }

                return '';

            }

        });
    </script>

Use the width property to display the column as broad and enable AllowScrolling property when the columns total width exceeds Grid width. Refer to the sample and code example as below.
Jsplayground Sample: http://jsplayground.syncfusion.com/p1g2jgxy

<script type="text/javascript">

    $(function () {

        $("#Grid").ejGrid({

            // the datasource "window.gridData" is referred from jsondata.min.js

            dataSource: window.gridData,

            allowPaging: true,

            allowScrolling: true,

            columns: [

                    { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 },

                    { field: "CustomerID", headerText: 'Customer ID', validationRules: { required: true, minlength: 3 }, width: 90 },

                    { field: "EmployeeID", headerText: 'Employee ID', editType: ej.Grid.EditingType.Dropdown, textAlign: ej.TextAlign.Right, width: 100, validationRules: { number: true, range: [0, 1000] } },

                    { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] }, width: 80, format: "{0:C}" },

                    { field: "ShipName", headerText: 'Ship Name', width: 150 },

                    { field: "ShipPostalCode", headerText: 'Ship PostalCode', width: 150 },

                    { field: "ShipRegion", headerText: 'Ship Region', width: 150 },

                    { field: "ShipAddress", headerText: 'Ship Address', width: 150 },

                    { field: "ShipCountry", headerText: 'Ship Country', editType: ej.Grid.EditingType.Dropdown, width: 140 }

            ]

        });

    });

    </script>

Refer to the online demo and document from the following link.
Demo: http://js.syncfusion.com/demos/web/#!/azure/grid/Scrolling
Document: http://help.syncfusion.com/js/grid/scrolling


Regards,
Balaji Marimuthu