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.
Syncfusion Feedback

How to bind syncfusion dropdown in syncfusion grid ?

Thread ID:

Created:

Updated:

Platform:

Replies:

120282 Sep 17,2015 08:23 AM UTC Sep 30,2015 09:24 AM UTC JavaScript 8
loading
Tags: ejGrid
Rakesh Advani
Asked On September 17, 2015 08:23 AM UTC

Hello,

I am using MVC with angularJS.

I have to bind sysncfusion dropdown in syncfusion grid and Grid have grouping and sorting functionality.

I had tried normal html dropdown in grid using JS-render template and its working fine. but the problem is for consistency i have to use syncfusion dropdown.

I tried syncfusion dropdown in template but it is not working.

I made one JS playground for your better understand. JS PlayGround


Aspect quick reply


Many thanks,

Rakesh



Ragavee U S [Syncfusion]
Replied On September 18, 2015 10:32 AM UTC

Hi Rakesh,

Thanks for contacting Syncfusion support.

We analyzed your requirement to bind syncfusion dropdown as one of the template column to grid and the sample that you have shared.

When using js render template in angular js, the template element has to be compiled externally using the angular $compile function. We have modified your sample, which can be downloaded from the following location.

JS Playground link: http://jsplayground.syncfusion.com/5gwaowgh

In the above sample, we have used $compile which compiles the DOM element to template function. Please refer to the following general link for more information on angular $compile.

https://docs.angularjs.org/api/ng/service/$compile

Please refer to the below code example.

$scope.compile = function (el) {

                  $compile(el)($scope);
              }

$scope.databoundtest = "templateCompile"; //grid databound event

             $scope.complete = function(args){ //grid actionComplete event

                  if(!this.initialRender)

                      templateCompile(args);

              };      

          });

          function templateCompile(args){

              var scope = angular.element($(".e-grid")).scope();

              scope.compile($(".drpAccessGroup")) //call the angular compile function
          }



Regards
Ragavee U S

Rakesh Advani
Replied On September 22, 2015 06:46 AM UTC

Hi,

Glad to get solution of my problem with $compile. its working but now problem is every time complete action is calling when sorting, grouping and all, so it is become slower. because i have huge data in grid about thousands of data so sorting and grouping becomes very slower because of every time compilation of dropdown.

so is there any other way to bind dropdown in grid with efficient way.?

Many thanks
Rakesh

Rakesh Advani
Replied On September 22, 2015 12:22 PM UTC

One more thing is when i trying to fetch data from web api and bind into dropdown i am not able to select 1 record by default.

I used e-selectItemByIndex = 0 but it is not working.

Prefer below code snippet for better understanding.

In cshtml
<script type="text/x-jsrender" id="accessGroupTemplate">
    <input type="text" class="drpAccessGroup" ej-dropdownlist e-fields-id="drpAccessGroup" e-popupwidth="218" e-datasource=accessGroupData e-fields-text="markingString" e-fields-value="markingString" e-width="100%" e-selecteditemindex="0" />
</script>

In AngularJS
$scope.getListofAccessGroup = function () {
            securityService.getAccessGroupsList()
                .then(function (accessGroupData) {
                    $scope.accessGroupData = accessGroupData;
                    $scope.accessGroupData.splice(0, 0, { markingString: "&lt;Unrestricted&gt;" });
                }).catch(function (error) {
                });
        };

Ragavee U S [Syncfusion]
Replied On September 23, 2015 04:47 PM UTC

Hi Rakesh,

Query #1: so is there any other way to bind dropdown in grid with efficient way.?

We have modified the sample by compiling the template in the templateRefresh event of the ejGrid. The templateRefresh event will be triggered when the template renders in the grid content. Compiling the js render template in the templateRefresh event of the grid increases the performance when compared to actionComplete event.

Also the angular compile loops through DOM element and collect all the angular directives. So if we have large number elements it would affect performance as it needs to compile all the DOM elements of template everytime the gridContent is refreshed.

We suggest you to enable paging in order to avoid the performance issue. With only scrolling enabled, more number of rows would be rendered at a time and angular needs to compile all the rows. If we have enabled paging, only required number of rows would be rendered at a time, that would improve the performance
 
Query #2: I used e-selectItemByIndex = 0 but it is not working.

We are sorry that we are unable to reproduce the issue at our end. We have created a sample based on the information that you have shared, which can be downloaded from the following location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/120282/ze/Sample-349938821

Please try the above sample and if you still face any difficulties, provide below details,

  1. Product version that you are currently working on
  2. Replication procedure/scenario to reproduce the issue
  3. If any script error/ exception obtained, please expand the script error obtained in the browser console (stack trace) and share the screenshot
  4. If possible, please reproduce the issue in the above sample and share it

Regards,
Ragavee U S

Rakesh Advani
Replied On September 24, 2015 09:33 AM UTC

Hi,

Query #1
your provided solution templateRefresh event make it more slower.

Query #2
I can not make Replication scenario for you. but i debug and trace javascript and my code. so i get problem. the problem is that i am using web api to fetch data and bind in dropdownlist so when dropdown created dropdown don't have data so e-selectItemByIndex = 0 is not working.

so is there any way so programmatically when api called and after dropdown bound with data selectedItembyIndex is called?

thanks

Ragavee U S [Syncfusion]
Replied On September 25, 2015 03:18 PM UTC

Hi Bharat,
 
We suggest you to enable paging in your sample project in order to avoid the performance issue. With only scrolling enabled, more number of rows would be rendered at a time and angular needs to compile all the rows. If we have enabled paging, only required number of rows would be rendered at a time, that would improve the performance.
 
In the sample provided by us in the earlier update, we have used $compile in the templateRefresh or actionComplete event of the grid. Instead we suggest you to define the column template in x-template format. We have provided inbuilt support to compile the elements within when using the x-template.
 
We had an issue when using the x-template in earlier versions. The issue has been fixed and included in our Volume 2 Service Pack 2 v13.2.0.39.
 
Query: so is there any way so programmatically when api called and after dropdown bound with data selectedItembyIndex is called?
 
We suggest you to use scope variable for selectedItemIndex property of the ejDropDownList. So once the data has been bound to the dropdown dataSource, the scope variable for selectedItemIndex can be specified. Please refer to the below code example.
 

<script type="text/x-template" id="accessGroupTemplate">

              <input type="text" class="drpAccessGroup" ej-dropdownlist e-fields-id="drpAccessGroup" e-datasource=$parent.dropData e-fields-text="CustomerName" e-fields-value="CustomerName" e-width="100%" e-selecteditemindex="$parent.selIndex" />
</script>
 

$scope.getListofAccessGroup = function () {

              securityService.getAccessGroupsList()

                  .then(function (accessGroupData) {

                      $scope.dropData = accessGroupData;

                      $scope.dropData.splice(0, 0, { markingString: "&lt;Unrestricted&gt;" });

                      $scope.selIndex = 3;

                  }).catch(function (error) {

                  });
          };

 
We have created a sample with the above solution, which can be downloaded from the below location.
 
Sample Link: http://jsplayground.syncfusion.com/spaiedwc
 
Regards,
Ragavee U S

Bharat Buddhadev
Replied On September 29, 2015 06:19 AM UTC

Hello I am replying for this below post
Replied on September 25, 2015 11:18 AM
Regarding our first query you have suggested to use compile templateRefresh 
 but is does not improve performance can you suggest any other way to improve grid performance
 instead of remove scrolling. and when we are using dropdown with grid




Ragavee U S [Syncfusion]
Replied On September 30, 2015 09:24 AM UTC

Hi Bharat,

With scrolling, as angular compilation needs to handle more DOM elements, the performance wont be effective. So only we suggested you to enable paging in your sample project. There is no other way to improve the performance of the grid rendering dropdown as a column without paging enabled in grid.

Regards,
Ragavee U S.

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.

Warning Icon 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.Close Icon

;