Hello Thomas, 

Do you have 2 columns bound to the same field (field D)?  If not could you explain what you mean by 4 columns – A, B, D and D? 

Regarding the first use case: I edit Columns D and update B and D

Do you mean that when the user edits column D you want to change the values for the same column D and another column B or is this a different column D? 

I’m looking forward to your reply. 

Regards,

Maya Kirova

Hello Thomas, 

Currently the way the code is written will cause an infinite loop since totalPris update will trigger OnCellEdit for mmRabat, which will again trigger update on mmRabat (due to the second if statement), which will trigger the event again. 

Could you explain in more details the behavior you are aiming to achieve? For example, when column X is updated via user interactions, then column Y and Z should update their values based on the new user input value.

The code for something like this would look like this:

if (field === 'X') {

const cellY = this.grid.getCellByColumn(t.cellID.rowIndex, 'Y');

const cellZ = this.grid.getCellByColumn(t.cellID.rowIndex, 'Z');

cellY.update(<newValue>);

cellZ.update(<newValue>); 

}

Let me know if you are aiming to achieve something similar. If not please explain in more details the desired behavior.

 

Regards,

Maya Kirova

Hello Thomas, 

Thank you for the additional information. 

onCellEdit is an event that is triggered every time a cell is updated (via the API or via the UI). As such calling update() Api (mmRabat.update(1); ) inside it will trigger the onCellEdit event again, creating an infinite loop.

Please make sure you are not updating the same cell inside the onCellEdit event triggered for it. For example:

  public totalSum(t: IGridEditEventArgs) {

const column = this.grid.columnList.find(e => e.index === t.cellID.columnID);

                 if (column.field !==  'mmRabat ') {

const mmRabat = this.grid.getCellByColumn(t.cellID.rowIndex, 'mmRabat');

                mmRabat.update(1);

}

…

 

Let me know if that solves your issue.

 

Regards,

Maya Kirova

Hello Thomas, 

Thank you for posting in our forum. 

Could you share some additional information like:

• When is this function called? Is it called on a particular Grid event?
• If possible could you share the grid definition and the logic that triggers the related function (totalSum)?
• Which version of the igniteui angular package are you currently using? 

If you happen to have a sample that reproduces the issue please feel free to share it so that we can look into it.

 I’m looking forward to your reply. 

Regards,

Maya Kirova

Hello Eric, 

The second call that selects/deselects the remote ids will, of course, be executed later as it needs to make a remote request to the backend and get the full list of records. Depending on the time needed to process and return the response from the server it is possible for the end-user to change the data in the view (change page, apply filter etc.) and get another view where selection is not yet applied since the request is still pending. You could check if the request is still pending and decide what you want to do in that case ( prevent interactions or allow it and manually select/deselect everything on the new view or something else). Or if the remote data does not change often in your scenario you could get the remote ids once on load and cache them on the client so that you won’t need to make remote calls this often and just update them on actions that change the remote data – like filtering.

For the multiple fast clicks on the checkbox you could simply abort any ongoing remote request initiated from previous clicks and just update the selection once with the latest value, for example:

var remoteReq;
function headerRenderedHandler(evt, ui) {
…
$("#customCheckBox").igCheckboxEditor({
                value: false,
                valueChanged: function (evt, ui) {
                     …
if (remoteReq) {
                        remoteReq.abort();
                    }
                    // get all ids from backend records
                    remoteReq = $.get("@Url.Action("GetIDs")", params, function (data) {
                        for (var i = 0; i < data.length; i++) {
                            $("#Grid").igGridSelection( allSelected ? "selectRowById" : "deselectRowById", data[i]);
                        }
                        ids = data;
                    });

 

Unfortunately, since selection is currently not stored in the data source (it is stored locally on the client) there’s no simple way to mark the records on the server side as selected/deselected and have that automatically reflected on the client. You would always have to set what is to be selected via the related APIs on the client. You can log a product idea request at: https://es.infragistics.com/community/ideas so that we may consider implementing Remote Paging with Select All in future versions.

 Let me know if there’s anything else I can help you with. 

Regards,

Maya Kirova

Hi ericl, 

You could pass the additional request parameters for the remote operations to the request for the ids and since your GridModel is available on the server side you can use its GetData() method that will return the processed data based on the enabled features so that you can get the ids of the currently filtered records only.

Note that in that case, before calling the GetData method paging should be excluded from the GridModel features, so that the result will contain all filtered records, not just the ones on the current page. 

For example:

valueChanged: function (evt, ui) {
                    var allSelected = ui.newValue;
                    //get all additional encoded params for remote operations - sorting, filtering etc.
                    var params = $('#Grid').data("igGrid").dataSource._encodeUrl();
$.get("@Url.Action("GetIDs")", params, function (data) {…}
}

 

public ActionResult GetIDs()
        {
            //disable paging so that GetData will disregard that feature and return all filtered records (not just the ones on the current page).
            GridModel m = GetGridModel(false);
            var filteredData = m.GetData();
            List

Regarding the delay for the selection. You could directly select/deselect the rows that are currently in the view so that they will be marked selected/deselected right away. The ones from the remote records will be marked as selected/deselected after the remote request to get their IDs is complete.

valueChanged: function (evt, ui) {
                    var allSelected = ui.newValue;
//select/deselect all in the current local data
                    var dataView = $('#Grid').data("igGrid").dataSource.dataView();
                    for (var i = 0; i < dataView.length; i++) {
                        var rec = dataView[i];
                        $("#Grid").igGridSelection(allSelected ? "selectRowById" : "deselectRowById", rec.ID);
                    }
…

 

I’ve attached a modified sample for your reference: 7444.Grid_5F00_RemotePaging_5F00_RemoteFiltering_5F00_SelectAll.zip

Let me know if you have any additional questions or concerns regarding this approach.

7230.Grid_5F00_RemotePaging_5F00_SelectAll.zip

Hello ericl, 

Thank you for posting in our forum. 

Unfortunately selection is not stored in the Data Source (neither on the client nor on the server side).

You could however select/deselect a row by its id even if it is not yet available on the client so that when it does become available it is already selected/deselected.

You could add a custom checkbox to the header (because the default one will be updated when page/selected records change based on the local data, which you will probably not want) and on its value changed event make a remote request to get the ids of the remote records and mark them as selected/deselected via the Selection API methods. For example, on the headerRendered event, hide the default checkbox, add your own and on its value changed get the ids of your remote records and select or deselect all of them:

var ids = [];
        function headerRenderedHandler(evt, ui) {
            //hide default checkbox
            $(ui.table).find("span[data-chk]").hide();
            //create your own whose state you can update yourself
            $(ui.table).find("span[data-chk]").parent().append("");
            $("#customCheckBox").igCheckboxEditor({
                value: false,
                valueChanged: function (evt, ui) {
                    var allSelected = ui.newValue;
                    // get all ids from backend records
                    $.get("@Url.Action("GetIDs")", function (data) {
                        for (var i = 0; i < data.length; i++) {
                            $("#Grid").igGridSelection( allSelected ? "selectRowById" : "deselectRowById", data[i]);
                        }
                        ids = data;
                    });
                }
            });
                }

 

Then you can update the state of the header checkbox manually on the related events (dataRendered and rowSelectionChanged) by checking if all remote ids are in the selectedRows collection:

function dataRenderedHandler(evt, ui) {
            updateHeaderState();
        }
        function selectionChangedHandler(evt, ui) {
            updateHeaderState();
        }
        function updateHeaderState() {
            var rows = $("#Grid").igGridSelection("selectedRows");
            //check if all remote ids are selected
            var allSelected = ids.length > 0 && rows.length === ids.length;
            $("#customCheckBox").igCheckboxEditor("value", allSelected);
        }

7230.Grid_5F00_RemotePaging_5F00_SelectAll.zip

 

I’ve attached a MVC sample for your reference. Let me know if you’re aiming to achieve something similar.