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.
Unfortunately, activation email could not send to your email. Please try again.

How to refer to customer methods in from row template?

Thread ID:

Created:

Updated:

Platform:

Replies:

121693 Jan 16,2016 11:16 PM Jan 19,2016 02:33 AM JavaScript 1
loading
Tags: ejGrid
Lucas Hardbarger
Asked On January 16, 2016 11:16 PM

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 [Syncfusion]
Replied On January 19, 2016 02:33 AM

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;