RowTemplate and InlineEditing in AngularJS

[Kéki Richárd]

Hi,

I have a grid with rowTemplate and I want to use it with inline editing.
The rowTemplate is needed because the grid's second column is a link and I use your solution ( http://syncfusion.com/forums/120999/angularjs-scope-variable-in-rowtemplate ).

Do you have any idea how can I use inline editing with rowTemplate or it is impossible?

Thank you for any help you provide.

[Prasanna Kumar Viswanathan]

Hi Richard,

Thanks for contacting Syncfusion support.

We do not have editing support in rowTemplate. So, we suggest you to use columnTemplate property of ejGrid. The columnTemplate is used to render a specific template to a particular column using Template and TemplateID properties. Also, we can render the images or checkboxes or any html elements to the column. So, we can render the Hyperlink content for the particular column.

We also created the following Knowledge base documentation to place Hyperlink in Grid columns.

http://www.syncfusion.com/kb/3767/how-to-place-hyperlink-in-grid-column

In the columnTemplate, we do not have inline editing support. To edit, we suggest you to use the inlineformTemplate property of ejGrid in which we can edit any of the fields in the record. To edit the columnTemplate, we need to mention the field in the columnTemplate.

Please find the code example and sample:

div ng-app="employeeView">

    <div ng-controller="GridCtrl">

        <div ej-grid id="Grid" e-width="500px" e-datasource="data" e-allowsorting="true" e-allowpaging="true" e-actionbegin="actionBegin" e-columns="columns" e-editsettings-allowadding="true" e-editsettings-allowediting="true" e-editsettings-allowdeleting="true" e-toolbarsettings-showtoolbar='true' e-toolbarsettings-toolbaritems='tools' e-editsettings-editmode="inlineformtemplate" e-editsettings-inlineformtemplateid="#template" >

        </div>

</div>

</div>

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

    <a rel='nofollow' href="http://syncfusion.com/">{{:ShipCountry}}</a>

</script>

<script>

     

    angular.module("employeeView", ["ejangular"])

       .controller("GridCtrl", function ($scope) {

           //Provide the datasource to the grid. Here the WebApiAdaptor is used.

           $scope.data = window.gridData;

           $scope.tools = ["add", "edit", "delete", "update", "cancel"];

           $scope.columns = [

                           { field: "ShipCountry", headerText: 'HyperLink', template:true, templateID:"#columnTemplate", textAlign: ej.TextAlign.Center, width: 115 },

                           { field: "OrderID", headerText: 'Order ID', isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 115 },

                           { field: "CustomerID", headerText: 'Customer ID', textAlign: ej.TextAlign.Left, width: 150, },

                           { field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 115 },

                           { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType : ej.Grid.EditingType.Numeric, width: 115 },

           ]

       });

           

</script>

<script id="template" type="text/template">

    <b>Order Details</b>

    <table cellspacing="10">

        <tr>

            <td style="text-align: left">

                <input id="OrderID" name="OrderID" value="{{: OrderID}}" disa disabled="disabled" class="e-field e-ejinputtext valid e-disable"

                       style="text-align: right; width: 233px; height: 28px" />

            </td>

            <td style="text-align: left">

                <input type="text" id="ShipCountry" name="ShipCountry" value = {{:ShipCountry}} />

            </td>

            <td style="text-align: left">

                <input type="text" id="EmployeeID" name="EmployeeID" value = {{:EmployeeID}} />

            </td>

           

            <td style="text-align: left">

                <input type="text" id="CustomerID" name="CustomerID" value={{:CustomerID}} />

            </td>

        </tr>

    </table>

</script>

Sample : http://www.syncfusion.com/downloads/support/forum/123204/ze/ServerOperations560982445

Refer to the Help documents for the InlineForm Template and columnTemplate API

ColumnTemplate: http://help.syncfusion.com/aspnetmvc/grid/columns#template

InlineFormTemplate : http://help.syncfusion.com/js/api/ejgrid#members:editsettings-inlineformtemplateid

Regards,
Prasanna Kumar N.S.V

[Kéki Richárd]

Hi, 

Thanks for the help. I created the grid with columnTemplate and default inline editing.

[Jayaprakash Kamaraj]

Hi Richard, 

We are happy that the provided suggestion helped you. 

Please get back to us if you need any further assistance.  

Regards, 

Jayaprakash K.