We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to refer to customer methods in from row template?

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

1 Reply

BM Balaji Marimuthu Syncfusion Team January 19, 2016 07:33 AM UTC

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

Loader.
Live Chat Icon For mobile
Up arrow icon