infragistics igGrid: how to remove a row with javascript

Question

i think my question is pretty simple but i still didn't find any answer that fits me, neither here nor out there.. so i'd be really happy if someone could help me out, it doesn't matter if it's by providing useful links or whatever...

what i'm trying to achieve: i've got an Ignite UI Grid (igGrid), where i'd like to remove a row using javascript. it doesn't even matter which one. simple, right?

what i've tried so far:

$(row).remove(); -> in this case every single row is being removed
$(row).remove(1); -> JavaScript runtime error: Object doesn't support property or method 'replace'
get_rows(): not supported by javascript, it would work in c# though..
removeat-method: not supported by javascript, it would work in c# though..
igGridSelection: selected stuff that i want to keep will be removed, too

and now the code snippet:

    $sender = $(this).attr('id');
    $varTablName = gridMap.getVarTable($sender);
    var rowCount = $("#" + $varTablName).igGrid("widget").igGrid('rows').length;

    $("#" + $varTablName).igGrid("widget").igGrid('rows').each(function (index) {
        var row = $("#" + $varTablName).igGrid("widget").igGrid("rowAt", index);
        if (rowCount > 1) {
            $(row).remove(); //the not quite working part
        }

it's doable, right? there's no need to go all the way and write it in c# and call it with js, right..? RIGHT??^^

thanks to everyone..! i havn't a solution yet and i don't think i will find it today. but i'll start all over again on monday with fresh spirit and my collegues who aren't at the office today.. so as soon as i know more i'll tell you so that it may help someone else one day... cheers! — , Apr 08 '16 at 14:45
thanks to bfmags i came up with this solution: $("#" + $varTablName).igGrid("widget").igGrid('rows').each(function (index) { if (index >= 1) { $(this).css("display", 'none'); } }); — , Apr 11 '16 at 08:18

bfmags · Accepted Answer · 2016-04-15T09:42:50.887

2

Infragistics guide to deleting a row programmatically

$('#grid').igGridUpdating('deleteRow', "AFG");  
$('#grid').igGridUpdating('deleteRow', 1, $('#grid').igGrid("rowAt", 0));

Following to the api docs -- thnx @KonstantinDinev -- the code above will delete a row from the grid, creating a transaction and updates the UI. This functionality depends on autoCommit option of igGrid

the API should always be first option ^^

We can also target the dom element and remove or hide it ourselves. When removed the number of rows displayed changes but the data source will need to be updated

http://jsfiddle.net/gtw916um/6/

$(function() {
  $("#grid").igGrid({});

  //hides 2nd row (index starts at 0)
  $("#grid").igGrid("allRows").each(function(index) {
    if (index == 1) {
      $(this).css("display", 'none');
    }
  });

  //deletes 4th row (index starts at 0)
  var row = $("#grid").igGrid("widget").igGrid("rowAt", 3);
  $(row).remove();

  //un-hiding 2nd row (index starts at 0)
  row = $("#grid").igGrid("widget").igGrid("rowAt", 1);
  $(row).css("display", 'table-row');

});

untested update data method

$("#grid").data("igGrid").dataSource.deleteRow(3, true);
$("#grid").data("igGrid").commit();

edited Apr 15 '16 at 09:42

answered Apr 08 '16 at 13:17

bfmags

2,885
2
17
28

thanks a lot, but unfortunately this doesn't work with removing rows. (deleteRow just deletes the data in the row, but the row itself still stays there..) – Apr 08 '16 at 13:43
can you get the row id ? var id = row.attr("data-id"); $(id).remove(); – bfmags Apr 08 '16 at 14:00
no, not the way you described (Object doesn't support property or method 'attr'). but i tried var RemoveRowId = $($("#" + $sender).igGrid("widget").igGrid("rowAt", args.row.index)).attr("data-id"); this doesn't throw any exceptions, but doesn't remove anything either... i'm beginning to think the problem i have is called ME...^^' – Apr 08 '16 at 14:22
jsfiddle.net/gtw916um/6 details above – bfmags Apr 09 '16 at 10:25
thanks! it works now, but i had to give up on removing. so your first solution almost worked perfectly (just changed into (index >= 1) ), sorry for being so stubborn last friday^^ – Apr 11 '16 at 08:15
deleteRow does not just delete the data, it also deletes the row element: http://jsfiddle.net/gtw916um/8/ – Konstantin Dinev Apr 14 '16 at 09:00
thnx @KonstantinDinev updated the answer, but couldn't get your jsfiddle to work – bfmags Apr 14 '16 at 09:15

score 1 · Answer 2 · edited May 23 '17 at 12:08

1

deleteRow is the method you're looking for as the other answer suggests. For this method you can provide the row element as parameter, or the row ID. Here's the API docs.

Here's the code:

var row = $("#" + $varTablName).igGrid("rowAt", index);
$("#" + $varTablName).igGridUpdating("deleteRow", row);

edited May 23 '17 at 12:08

Community

1
1

answered Apr 14 '16 at 09:03

Konstantin Dinev

34,219
14
75
100

score 0 · Answer 3 · answered Apr 08 '16 at 13:05

0

You could try this or some jquery equivalent. I don't know how it will affect the ultragrid though, so doublecheck if you retain all other functionality.

var row = document.querySelector('myRowReference');
row.parentNode.removeChild(row);

answered Apr 08 '16 at 13:05

Shilly

8,511
1
18
24

hmm.. this looks fine to me, but i cant make it work.. just to be sure if i got you right.. this is what i tried: var tmpRow = document.querySelector('id', 1); row.parentNode.removeChild(row); edit: well, it worked in a sense.. it didn't throw any exceptions, but it still ended up deleting everything... – Apr 08 '16 at 13:44

infragistics igGrid: how to remove a row with javascript

3 Answers3