Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
20
iggrid fixed header not aligned with row data
posted

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,

Parents
No Data
Reply
  • 0
    Offline posted

    It is quite difficult if you do not understand about setting columns and rows. Each value really needs to be exact. Easy reference through scratch games shares you update.

Children
No Data