I am having a problem with the select all feature of the row selectors.
If I chose the select all checkbox in the rowselector-header it selects all of the rows but when I create an alert function to alert the ui.rowKey for each selected row on the page, I get an error.
Is there any way to hide the select all checkbox in the header of the grid?
function createGrid(d)
{
$("#sourceInfo").igGrid({
autoGenerateColumns: false, dataSource: d, dataSourceType: "json", primaryKey: "SourceID", width: "1024px", height: "500px", columns: [ { headerText: "Source Information", group: [ { headerText: "Source ID", key: "SourceID", dataType: "number" }, { headerText: "Session ID", key: "SessionID", dataType: "number"}, { headerText: "Source Name", key: "SourceName", dataType: "string" }, { headerText: "Title", key: "Title", dataType: "string"}, { headerText: "Source File Name", key: "SourceFileName", dataType: "string" }, { headerText: "Source Created Date", key: "SourceCreated", dataType: "date", format: "MM/dd/yyyy HH:mm tt" }, { headerText: "Custodian Name", key: "CustodianName", dataType: "string" }, { headerText: "Item Total", key: "ItemTotal", dataType: "number"}, { headerText: "Session Created Date", key: "SessionCreated", dataType: "date", format: "MM/dd/yyyy HH:mm tt" } ] }], features: [ { name: "MultiColumnHeaders" }, { name: "Filtering", type: "local", mode: "advanced" }, { name: 'Paging', type: "local", pageSize: 10 }, { name: 'RowSelectors', enableCheckBoxes: true, enableRowNumbering: false, showCheckBoxesOnFocus: false, checkBoxStateChanged: function (evt, ui) { if (ui.state == "on") { selectedSourcesArray.push(ui.rowKey); } else { selectedSourcesArray = jQuery.grep(selectedSourcesArray, function (value) { return value != ui.rowKey; }); } } }, { name: "Selection", multipleSelection: true, } ] });
}
Also, I've tried to theme just the rowselector section of my grid and I cannot seem to get it to work. I've tried using this code below but not really sure what I should be using in order to make the checkbox smaller in the grid.
.ui-iggrid-rowselector-class{font-size:9px!important;align-content: center;}
Hi Ryan,
To manipulate the checkboxes in the row selectors, you can adjust the height and width in css on the .ui-igcheckbox-normal class:
For example:
.ui-igcheckbox-normal { display: inline-block; _display: inline; overflow: hidden; width: 8px; height: 8px; }
The way I identified the css elements is by using Chrome console and with the element selector clicked on the checkbox element. From this Chrome shows me all the relevant html elements and the classes assigned:
Let me know if you need additional assistance.
Yup, that did the trick for me. Thanks for pointing out that simple solution that I overlooked!