jQuery datagridview manipulating the datagridview after creating

It's possible to manipulate the datagridview via client-side javascript. The datagridview plugin can be called with a callback parameter function. The function provides access to the DataGridView object via this as a first parameter. It is possible to call the datagridview function multiple times on a selector; this will only create the grid once but provide access to the grid object on the first and on subsequent calls.

<script type="text/javascript">
    var selectedData;
    
    $('#example-table').datagridview(function(grid) {
        // this refers to the datagridview object
        selectedData = this.getSelectedData();
        
        // parameter grid also refers to the datagridview object
        grid.setSelectedRows($(false));
    });
</script>

When creating the grid, the callback function becomes the second parameter of the call to the datagridview function.

<script type="text/javascript">
    $('#example-table').datagridview({
        [
            { data: 'firstName' },
            { data: 'lastName' }
        ]
    }, function () {
        console.log(this.getColumns());
    });
</script>

Please note that this gives you access to the datagridview internal properties. Manipulating these properties is unsupported and can create unexpected side effects.

Functions

• General
  • populate(metaData, data) populates the grid with the given DataGridViewMetaData object and data array
  • remove() removes the datagridview functionality and restores the element to its original condition
  • getMetaData() returns the currently used DataGridViewMetaData object to allow you to repopulate the grid
  • getData() returns the data array that was supplied when populating the grid last, if available
  • getTotals() returns the totals object that was supplied when populating the grid last, if available
  • isPopulated() returns true if the grid is populated and false if the grid is not populated; please note that an empty data array does count as populated but a null data object does not
  • getColumns() returns the currently used column definitions
  • initiatePaging(page, rowsPerPage) triggers a paging event with the current meta data and new page/rows per page
  • toggleColumnVisibility(id, visible) shows or hides the column referenced by the id; to find the id get the column id from getColumns
• Selection
  • getSelectedRows() returns a jQuery object containing currently selected rows
  • getSelectedIndexes() returns an array containing the currently selected row indexes
  • getSelectedData() returns an array containing the currently selected data objects
  • setSelectedRows(selector) sets the selected rows by selector/selection/function/element
  • setSelectedIndexes(indexes) sets the selected rows by an array of indexes
  • setSelectedData(filter) sets the selected rows by a filter function
    • Filter function arguments are the standard array filter function arguments value, index, array
• Internal
  • setColumnStyle() sets the width and visibility of the columns
  • createElement(tagName, className, attr1, ..., attrN) creates elements with the appropriate attributes
  • displaySortOrder() sets the sorting icon as needed
  • displayFooters() creates the footers based on the meta data
  • alterSelection(selectedRows, toggle, resetSelection) alters the selection and triggers selectionChanged event if needed