Hi,
I am setting height of iggrid to set fixed header with vertical scrolling, it is fixed the header, but its not aligned with row data, please refer to this snap.
Below is the code:
$("#tblCheckInQueList").igGrid({ primaryKey: "templateID", width: '100%', height: '170px', autofitLastColumn: false, autoGenerateColumns: false, renderCheckboxes: true, dataSource: data, showHeader: true, multiSelection: { enabled: true }, columns: [ { headerText: "AppTypeMapID", headerCssClass: "", key: "appTypeMapID", dataType: "number", columnCssClass: "", hidden: true }, { headerText: "TemplateID", headerCssClass: "", key: "templateID", dataType: "number", columnCssClass: "", hidden: true }, { headerText: "Select", headerCssClass: "", key: "select", dataType: "bool", columnCssClass: "", hidden: true }, { headerText: "Questionnaire(s)", headerCssClass: "", key: "questTemplate", dataType: "string", columnCssClass: "smd-font-color" }, { headerText: "Portal", key: "portal", dataType: "boolean", hidden: true }, { headerText: "Portal", key: "portal1", dataType: "boolean", unbound: true, columnCssClass: "text-left", formula: function displayStatus(data, grid) { var ActiveStatus = null; if (data["portal"] == true) { ActiveStatus = "<label class='custom-control custom-checkbox pmd-checkbox smd-margin-bottom-none'><input type='checkbox' name='CheckInQuest_" + data["templateID"] + "' class='custom-control-input' onclick='activeChange(this)' id='chkPortalQI_" + data["templateID"] + "' checked='checked' /><span class='custom-control-label pmd-checkbox-ripple-effect'></span></label>"; } else { ActiveStatus = "<label class='custom-control custom-checkbox pmd-checkbox smd-margin-bottom-none'><input type='checkbox' name='CheckInQuest_" + data["templateID"] + "' class='custom-control-input' onclick='activeChange(this)' id='chkPortalQI_" + data["templateID"] + "' /><span class='custom-control-label pmd-checkbox-ripple-effect'></span></label>"; } return ActiveStatus; } }, { headerText: "Clipboard", key: "clipboard", dataType: "boolean", hidden: true }, { headerText: "Clipboard", key: "clipboard1", dataType: "boolean", unbound: true, columnCssClass: "text-left", formula: function displayStatus(data, grid) { var ActiveStatus = null; if (data["clipboard"] == true) { ActiveStatus = "<label class='custom-control custom-checkbox pmd-checkbox smd-margin-bottom-none'><input type='checkbox' name='CheckInQuest_" + data["templateID"] + "' class='custom-control-input' onclick='activeChange(this)' id='chkClipboardQI_" + data["templateID"] + "' checked='checked' /><span class='custom-control-label pmd-checkbox-ripple-effect'></span></label>"; } else { ActiveStatus = "<label class='custom-control custom-checkbox pmd-checkbox smd-margin-bottom-none'><input type='checkbox' name='CheckInQuest_" + data["templateID"] + "' class='custom-control-input' onclick='activeChange(this)' id='chkClipboardQI_" + data["templateID"] + "' /><span class='custom-control-label pmd-checkbox-ripple-effect'></span></label>"; } return ActiveStatus; } }, { headerText: "Both", key: "both", dataType: "boolean", hidden: true }, { headerText: "Both", key: "both1", dataType: "boolean", unbound: true, columnCssClass: "text-left", formula: function displayStatus(data, grid) { var ActiveStatus = null; if (data["both"] == true) { ActiveStatus = "<label class='custom-control custom-checkbox pmd-checkbox smd-margin-bottom-none'><input type='checkbox' name='CheckInQuest_" + data["templateID"] + "' class='custom-control-input' onclick='activeChange(this)' id='chkBothQI_" + data["templateID"] + "' checked='checked' /><span class='custom-control-label pmd-checkbox-ripple-effect'></span></label>"; } else { ActiveStatus = "<label class='custom-control custom-checkbox pmd-checkbox smd-margin-bottom-none'><input type='checkbox' name='CheckInQuest_" + data["templateID"] + "' class='custom-control-input' onclick='activeChange(this)' id='chkBothQI_" + data["templateID"] + "' /><span class='custom-control-label pmd-checkbox-ripple-effect'></span></label>"; } return ActiveStatus; } } ],
// Grid Settings features: [ { name: "RowSelectors", enableCheckBoxes: true, enableRowNumbering: false, checkBoxStateChanging: function (evt, ui) { isFiredFromCheckboxCIQ = true; var grid = $("#tblCheckInQueList").data("igGrid"); if (ui.newState.toLowerCase() == 'off') { grid.dataSource.updateRow(parseInt(ui.rowKey), { portal: false, clipboard: false, both: false }, true); $(ui.row[0]).find("input[id^='chkPortalQI']").prop('checked', false); $(ui.row[0]).find("input[id^='chkClipboardQI']").prop('checked', false); $(ui.row[0]).find("input[id^='chkBothQI']").prop('checked', false); } else { grid.dataSource.updateRow(parseInt(ui.rowKey), { both: true }, true); $(ui.row[0]).find("input[id^='chkBothQI']").prop('checked', true); } }, }, { name: "Selection", mode: 'row', persist: true, multipleSelection: true, activation: true, rowSelectionChanging: function (evt, ui) { schApptTypeIsChangesOnKeyup = true; if (isFiredFromCheckboxCIQ) { isFiredFromCheckboxCIQ = false; } else { return false; } } }, { name: "Responsive", enableVerticalRendering: false, }, { name: "Sorting", type: "local", columnSettings: [ { columnKey: "questTemplate", allowSorting: false, }, { columnKey: "portal1", allowSorting: false, }, { columnKey: "clipboard1", allowSorting: false, }, { columnKey: "both1", allowSorting: false, } ] },
] });
Please help to fix this issue.
Thanks,
The fixed header in my igGrid is not aligning with row data, creating a visual misalignment. Seeking solutions for a seamless display. Any assistance or guidance from a risk management assignment help specialist would be greatly appreciated. Ensuring precision and clarity in header and data presentation is crucial for an optimal user experience.