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

RowTemplate and InlineEditing in AngularJS

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.

3 Replies

PK Prasanna Kumar Viswanathan Syncfusion Team February 26, 2016 11:45 AM UTC

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



KR Kéki Richárd March 11, 2016 03:40 PM UTC

Hi, 

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


JK Jayaprakash Kamaraj Syncfusion Team March 14, 2016 06:55 AM UTC

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.


Loader.
Live Chat Icon For mobile
Up arrow icon