javascriptinfragisticsignite-uiiggrid

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


Solution

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