Hide Selected Rows - Client Side in Asp.net Core

[Abaid-ur-Rehman Zulfi]

Hi,

I was looking a way to hide rows using JavaScript in ASP.net core but couldn't find working code. The closes match is here https://www.syncfusion.com/forums/140765/how-to-hide-a-row-in-the-grid-client-side but code doesn't work in asp.net core 2.2

<script type="text/javascript"> 

 

    function hiderow(args) { 

 

        var obj = $(".e-grid").ejGrid("instance"); 

        var row = obj.getSelectedRows(); 

        row.hide(); 

    } 

</script> 

[Farveen Sulthana Thameeztheen Basha]

Hi Abaid, 

Thanks for contacting Syncfusion Support. 

We have prepared sample with asp.net core 2.2 but we are unable to reproduce the problem at our end. Refer to the sample Link:- 

https://www.syncfusion.com/downloads/support/forum/151109/ze/WebApplication1-343963453.zip 

We need some more additional details to find the cause of the issue. Share us the following details. 

1. Complete Grid code example.
2. Share screenshot/Video demo to replicate the issue.
3. If possible replicate the issue in the above sample and revert us back.
4. Share screenshot of script Error if any occurs.

Regards, 

Farveen sulthana T 

[Abaid-ur-Rehman Zulfi]

Hi,

The provided solution is for EJ1 whereas I am using EJ2 and again script is giving error. Following two directives are not available in EJ2

@using Syncfusion.JavaScript;

@using Syncfusion.JavaScript.Models;

and this line var gridObj = $("#FlatGrid").ejGrid("instance"); also generates run-time error.

I have researched & modified the code as below. However, in following code, line 1 & 2 works fine but run-time error is thrown on row.hide() citing 'hide' method is not available.

 var gridObj = document.getElementById('FlatGrid').ej2_instances[0]; // $("#Grid").ejGrid("instance");

        var row = gridObj.getSelectedRows();

        row.hide();

[Dhivya Rajendran]

Hi Abaid, 

  

Greetings from syncfusion support. 

  

Query #1:  Following two directives are not available in EJ2.@using Syncfusion.JavaScript;@using Syncfusion.JavaScript.Models; 

 

In EJ2 grid control there is no need of above directives instead that we should add below dependencies in the core application.
              1. Using Nuget Package Manager we need to add Syncfusion.EJ2.AspNet.Core package into your application. 

              2. We need to install NewtonSoft.JSON as dependency since Syncfusion.EJ2.AspNet.Core dependent to NewtonSoft.JSON package. 

 

Refer the below link to create a ASP.NETCORE with Gird control. 

 

UG : https://ej2.syncfusion.com/aspnetcore/documentation/grid/getting-started-core/ 

 

Query #2: I have researched & modified the code as below. However, in following code, line 1 & 2 works fine but run-time error is thrown on row.hide() citing 'hide' method is not available. 

 

We are happy to hear that you have found how to get the grid instances in EJ2. 

 

The hide() is a JQuery method, which is used to hide the selected element in the DOM. Since we have used pure javascript in EJ2 components. You can hide the element by adding class list e-hide for the selected row element to achieve your requirement. Please refer the below code example and sample for more information. 

  

Sample :  https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_hide_records628753719.zip 

UG : https://ej2.syncfusion.com/documentation/api/grid/ 

 

  

var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

            var selectedRows = grid.getSelectedRows(); 

            for (var i = 0; i < selectedRows.length; i++) { 

                      // syncfusion way 

                selectedRows[i].classList.add('e-hide'); 

                      // you can also hide selected row  element using html attributes 

               // selectedRows[i].hidden = true; 

               // selectedRows[i].style.display = 'none'; 

                

            }  

 

Please get back to us if you need further assistance. 

  

Regards,
R.Dhivya 

[Abaid-ur-Rehman Zulfi]

Thank you, it is working perfectly now.

[Dhivya Rajendran]

Hi Abaid, 

Thanks for your update. 

We are happy to hear that the provided solution was helpful to achieve your requirement. Please get back to us if you require further assistance from us. 

Regards, 

R.Dhivya