CODEWITHSUNDEEP
javascriptinfragisticsignite-uiiggrid
user5967971
user5967971

Reputation:

infragistics igGrid: how to remove a row with javascript

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:

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??^^

Upvotes: 3

Views: 2882

Answers (3)

bfmags
bfmags

Reputation: 2935

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();

Upvotes: 2

Konstantin Dinev
Konstantin Dinev

Reputation: 34905

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);

Upvotes: 1

Shilly
Shilly

Reputation: 8589

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);

Upvotes: 0

Related Questions