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.

RowTemplate and InlineEditing in AngularJS

Thread ID:

Created:

Updated:

Platform:

Replies:

123204 Feb 25,2016 09:47 AM Mar 14,2016 02:55 AM JavaScript 3
loading
Tags: ejGrid
Kéki Richárd
Asked On February 25, 2016 09:47 AM

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 [Syncfusion]
Replied On February 26, 2016 06:45 AM

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
Replied On March 11, 2016 10:40 AM

Hi, 

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

Jayaprakash Kamaraj [Syncfusion]
Replied On March 14, 2016 02:55 AM

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.


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.

;