How to bind syncfusion dropdown in syncfusion grid ?

[Rakesh Advani]

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]

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]

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]

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]

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]

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]

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]

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]

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.