Grid & accessing the values from all the pages with JS?

[Henri Heimonen]

Hi,

I have a simple grid with two columns. Given enough data and paging enabled it wraps to several pages. 

That's all fine, however, I haven't found a good way to access all the data records from within the JavaScript function. What I basically have at the moment is something like:

...

var grid = document.getElementById('Grid').ej2_instances[0];

var allIds = grid.dataSource.dataSource.json.map(d => d.MyId);

...

This works but I would assume there is more controlled way to access all the data in model? I have looked at several examples but they don't quite seem to apply for me.

Br,

Henri

[Magesh Sabapathi]

Hi Henri , 

Greetings from Syncfusion support 

Query : Grid & accessing values from all pages. 

 

Before we proceed with your requirement, we need the following details 

 

1. Based on your code we suspect that you are using Remote data binding for your Grid. Please send the details of type of adaptor you are using in your sample. 

2. You need to access each data in the EJ2 Grid. So, can you please exact requirement of accessing each data in the Grid? 

3. Share the complete Grid code example. 

Regards 

Magesh

[Henri Heimonen]

Hi,

Regarding 3), I am afraid I am not at liberty to share the code here publicly as it is for customer project - therefore I need to obfuscate some stuff a bit in here. If needed I could open the individual support ticket. Let's try, however:

1. I am using RemoteSaveAdaptor:

<e-data-manager json="@Model.LocationExceptions.ToArray()"

                adaptor="RemoteSaveAdaptor"

                updateUrl="/MyPage?handler=Update"

                removeUrl="/MyPage?handler=Remove"

                insertUrl="/MyPage?handler=Insert">

e-data-manager>

2.Data in each row consist of two cells, let's call them "LocationId" (int) and "Exceptions" (List):

<e-grid-columns>

        <e-grid-column field="LocationId"

                       headerText="Location"

                       isPrimaryKey="true"

                       foreignKeyField="Id"

                       foreignKeyValue="Location"

                       dataSource="@Model.Locations"

                       edit="@(new {@params=editParamsLocation })"

                       clipMode="EllipsisWithTooltip">

        e-grid-column>

        <e-grid-column field="Exceptions"

                       headerText="Exceptions"

                       edit="@(new {@params=editParamsException})"

                       clipMode="EllipsisWithTooltip">

        e-grid-column>

e-grid-columns>

=> What is want is to get all the ints (LocationId:s) from all the rows (no matter on which page) and then project those to array of ints: 

var existingIds = grid.dataSource.dataSource.json.map(d => d.LocationId);

Like mentioned, this works, I get all the Ids into array like I want but I am afraid I am accessing the data in non-otrhodox and non-robust way, so to say. I only found out the structure by digging into grid-object structure via console as I did not manage to find proper documentation.

To put this in context, I use Grid actionComplete event and call above-mentioned line there. When adding a new row I want to filter already added Ids away from the list of available options:

function actionComplete(args) {

        if ((args.requestType === 'beginEdit' || args.requestType === 'edit' || args.requestType === 'add')) {

            args.dialog.width = "50%";

            var grid = document.getElementById('Grid').ej2_instances[0];

            if (args.requestType === 'add') {

                args.dialog.header = "Create new";

                // read all locations Ids that already have some data

                var existingIds = grid.dataSource.dataSource.json.map(d => d.LocationId);

                // filter those out from all available element to prevent duplicates

                var notMapped = @Html.Raw(Json.Serialize(@Model.Locations));

                notMapped = notMapped.filter(e => existingIds.indexOf(e.Id) === -1);

                Etc.....

[Magesh Sabapathi]

Hi Henri , 

Thanks for the update. 

In previous update you have mentioned that you are using RemoteSaveAdaptor for binding the data in EJ2 Grid.  To access total datas in RemoteSaveAdaptor,  you need to use the json property (var allIds = grid.dataSource.dataSource.json.map(d => d.MyId)).  

If you need to get the current view records you can get it by getcurrentviewRecords() method. 

Api link : https://ej2.syncfusion.com/javascript/documentation/api/grid/#getcurrentviewrecords 

Please get back to us if you need further assistance 

Regards 

Magesh