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.

dropdownlist on dialog template for angular grid not working

Thread ID:

Created:

Updated:

Platform:

Replies:

129120 Feb 28,2017 08:37 AM Mar 2,2017 11:54 PM JavaScript 6
loading
Tags: ejGrid
amsm
Asked On February 28, 2017 08:37 AM

hi,
I have asp.net mvc 5 project (.net 4.6.1) with webapi 2 created with visual studio 2015.
I'm using syncfusion javascript library version 14.4.0.15 and angular widgets.
In my project there is grid (angular widget) for which I'm trying to create dialog template for editing.
The problem is with column for which I would like to show dropdownlist control on dialog. When dialog shows then dropdownlist is displayed but is not filled with options I provided as datasource. The method in webapi controller providing options data for dropdown is not even called.

My grid is declared as follows:

<div id="grd" ej-grid e-datasource="systems" 
     e-allowpaging="true" e-pagesettings="sys_pageset"
     e-allowsorting="true" e-allowmultisorting="true" e-sortsettings="sys_sortset"
     e-allowfiltering="true" e-filtersettings="sys_filterset" e-allowsearching="true" e-searchsettings="sys_searchset"
     e-allowgrouping="true" e-groupsettings="sys_groupset"
     e-editsettings="sys_editset" e-actioncomplete="gridactioncomplete"
     e-toolbarsettings="sys_toolbarset">
    <div e-columns>
        <div e-column e-field="Id" e-headertext="Id" e-allowfiltering="false" e-allowgrouping="false" e-isprimarykey="true" e-isidentity="true"></div>
        <div e-column e-field="Name" e-headertext="Name"></div>
        <div e-column e-field="Date" e-headertext="Date" e-format="{0:yyyy-MM-dd}"></div>
        <div e-column e-field="Number" e-headertext="Num"></div>
        <div e-column e-field="SomeComplex.Name" e-headertext="Some"></div>
        <div e-column e-field="AnotherComplex.Name" e-headertext="Another"></div>
        <div e-column e-template="true" e-templateid="#links2tpl" e-headertext="Links"></div>
    </div>
</div>


This is its configuration:

<script type="text/javascript">
    (function () {
        var app = angular.module('myapp', ['ejangular']);
        app.controller('myctrl', function ($scope) {
            $scope.systems = ej.DataManager({ url: '/api/app', adaptor: 'WebApiAdaptor' });
            $scope.sys_pageset = { pageSize: 2 };
            $scope.sys_sortset = { sortedColumns: [{ field: 'Id', direction: 'ascending' }] };
            $scope.sys_filterset = { filterType: 'menu', showPredicate: false };
            $scope.sys_searchset = { fields: ['Name'], operator: 'contains', key: '', ignoreCase: true };
            $scope.sys_groupset = { showToggleButton: true, showDropArea: false };
            $scope.sys_editset = { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: 'dialogtemplate', dialogEditorTemplateID: '#dialogtpl', allowEditOnDblClick: false, showDeleteConfirmDialog: true };
            $scope.sys_toolbarset = { showToolbar: true, toolbarItems: ['search', 'add', 'edit', 'delete', 'update', 'cancel'] };

            $scope.gridactioncomplete = function (args) {
                $('#dtpDate').ejDatePicker();
                $('#tbxNumber').ejNumericTextbox();
                $('#ddlSome').ejDropDownList({
                    datasource: ej.DataManager({ url: '/api/app/some', adaptor: 'WebApiAdaptor' }),
                    fields: { value: 'Id', text: 'Name', id: 'Id' }
                });
            };
        });
    })();
</script>


My dialog template:

<script type="text/template" id="dialogtpl">
    <table>
        <tr>
            <td>Id</td>
            <td><input id="tbxId" name="Id" value="{{:Id}}" disabled="disabled" class="e-field e-ejinputtext" /></td>
        </tr>
        <tr>
            <td>Name</td>
            <td><input id="tbxName" name="Name" value="{{:Name}}" class="e-field e-ejinputtext" /></td>
        </tr>
        <tr>
            <td>Date</td>
            <td><input id="dtpDate" name="Date" value="{{:Date}}" /></td>
        </tr>
        <tr>
            <td>Number</td>
            <td><input id="tbxNumber" name="Number" value="{{:Number}}" /></td>
        </tr>
        <tr>
            <td>Some</td>
            <td>
                <input id="ddlSome" />
            </td>
        </tr>
    </table>
</script>


Sample row data which is returned from server for grid datasource:

{ Id: 1, Name: 'test', Date: '2017-02-28', Number: 1, SomeComplex: { Id: 1, Name: 'aaa' } }

Sample data returned from server for dropdown datasource:

[ { Id: 1, Name: 'aaa' }, { Id: 2, Name: 'bbb' } ]


Please, tell me, how should I:
1. load options for dropdownlist on dialog?
2. bind selected value in dropdown from and to data object for currently edited grid row?

best regards
Adam



amsm
Replied On February 28, 2017 08:51 AM

exscuse me, I forgot to attach my solution code.

Attachment: test_mvc_webapi_ef_ng_f05bee90.zip

Prasanna Kumar Viswanathan [Syncfusion]
Replied On March 1, 2017 11:40 AM

Hi Sir, 

Thanks for contacting Syncfusion support. 

According to your code snippet we have created a sample and we can reproduce the mentioned issue in the sample. In your code snippet we found that you have used improper API name(datasource) for the dropdownlist in the actionComplete event of ejGrid. So, we suggest you to use the proper API name(dataSource) for the dropdownlist. 

To display the selected value in dropdown, use selectItemByValue method of ejDropDownList. As you have bind the adaptor in grid, so we suggest to use the selectItemByValue method in dataBound event of ejDropDownList.  

Find the code example and sample:  


<div class="row"> 
   
    -------------------------------------- 
 
</div> 
 
<script> 
   
    var value; 
 
    angular.module("GridCtrl", ["ejangular"]) 
        .controller("bodyCtrl", function ($scope) { 
                    ----------------------- 
 
            $scope.gridactioncomplete = function (args) { 
                if (args.requestType == "beginedit" || args.requestType == "add") { 
                    value = parseInt(args.row.children().eq(2).text()); 
                    $('#EmployeeID').ejDropDownList({ 
                        dataSource: ej.DataManager({ url: '/api/Orders/GetSome', adaptor: 'WebApiAdaptor' }), 
                        fields: { value: 'EmployeeID', text: 'EmployeeID', id: 'EmployeeID' }, 
                        dataBound: function (args) { 
                            this.selectItemByValue(value); 
                        }, 
                    }); 
                     
                } 
            }; 
      
    }); 
</script> 


Refer to the Help document for the selectItemByValue method. 


Regards, 
Prasanna Kumar N.S.V 
 


amsm
Replied On March 1, 2017 02:09 PM

Thank You very much for answer.
I have one more question about dialog template in context of angular widget.
Documentation says that at template the input tags for data fields should have id, name and value attributes in form:
<input type="text" id="EmployeeID" name="EmployeeID" value="" />
(this is written at: https://help.syncfusion.com/angular-1/grid/editing)

... but when I did this in that way then editing is not working, it mean values are not binding to controls and data object. Also assigning: value='EmployeeID' doesn't help.
To fix this I must write such snippet in this way:

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

Please explain:

1. why the code as described in the documentation is not working?
2. is "ng-model" attribute applicable in this context? (how?)
3. is any difference between attribute "text/template" and "text/ng-template"?

best regards
Adam




Saravanan Arunachalam [Syncfusion]
Replied On March 2, 2017 07:46 AM

Hi Amsm, 
Query 1:  why the code as described in the documentation is not working? 
In the documentation, we have missed to render the template with jsrender syntax ({{:EmployeeID}}) to populate the value in the edit form while editing. We will make this correction on the document and it will refreshed in online on March 3rd 2017. 
Query 2: is "ng-model" attribute applicable in this context? 
No, we can’t use the ng-model angular property in the editing template. Please refer to the below documentation link, we have an inbuilt two-way binding support for the following Grid properties. 
Query 3: is any difference between attribute "text/template" and "text/ng-template"? 
The text/ng-template which is used to render the jsrender template in angularjs and it is compile that template with current scope automatically.  
The text/template which is used to render the template in javascript and if you use in angular, you need to externally compile it by using $compile method of angularjs.   
Regards, 
Saravanan A. 


amsm
Replied On March 2, 2017 08:58 AM

thank You very much for help.

Saravanan Arunachalam [Syncfusion]
Replied On March 2, 2017 11:54 PM

Hi Amsm,  
Thanks for your update.            
We are happy that the provided information helped you. 
Regards, 
Saravanan A. 


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.

;