Guriddo » Topic: Column Reordering- alignment issue

Column Reordering- alignment issue

Guriddo
column reordering alignment
Column Reordering- alignment issue

Tagged: column reordering alignment

This topic has 5 replies, 2 voices, and was last updated 10 years, 9 months ago by guriddo.support.

Creator

Topic
June 26, 2015 at 5:03 pm #123957

Poet
Participant

Hello, I’ve been searching for an answer to this and can’t find a solution. I’m working on a very complex grid. Basically, when I reorder the columns, the column headers and the actual columns becoming misaligned/mismatched. I’ve tried numerous fixes and none of them seem to work. Any ideas?
Creator

Topic

Viewing 5 replies - 1 through 5 (of 5 total)

Author

Replies

June 26, 2015 at 5:50 pm #123958

guriddo.support

Participant

Hello,

Could you please post your code or at best send a link to the problem?

For us is very difficult to give a solution with this type of description.

Kind Regards,

Will

Guriddo Support Team

June 30, 2015 at 4:10 pm #123977

Poet

Participant

Sorry, I will post the code in a few minutes. I was doing some more testing, I completely removed all of the CSS formating and the problem remains. Be back in a few moments.

June 30, 2015 at 4:36 pm #123978

Poet

Participant

This code has been trimmed down significantly

mainApp.directive(&#039;ngJqGrid&#039;, function () {

//var errorCountValue = 0;
//var warningCountValue = 0;
var errorRows = [];
var currentCensusSeqNum;
var genderOptions = {&#039;&#039;: &#039;-SELECT-&#039;, &#039;F&#039;: &#039;Female&#039;, &#039;M&#039;: &#039;Male&#039;};
var paymentModeOptions = {&#039;&#039;: &#039;-SELECT-&#039;, &#039;S&#039;: &#039;Semi-Annual&#039;, &#039;A&#039;: &#039;Annual&#039;};
var occupationSpecialityOptions = {&#039;&#039;: &#039;-SELECT-&#039;, &#039;-1&#039;: &#039;Not Applicable&#039;, &#039;0&#039;: &#039;Unknown&#039;};
var stateCodeOptions = {&#039;&#039;: &#039;-SELECT-&#039;, &#039;AL&#039;: &#039;Alabama&#039;, &#039;AK&#039;: &#039;Alaska&#039;};
var censusClassIdOptions = {&#039;&#039;: &#039;-SELECT-&#039;, &#039;-1&#039;: &#039;Not Eligible&#039;, &#039;0&#039;: &#039;Decline&#039;};
var dependentTypeOptions = {&#039;&#039;: &#039;-SELECT-&#039;, &#039;0&#039;: &#039;None&#039;, &#039;5&#039;: &#039;Decline&#039;};
//Select options Sorting will not work with javascript object.Using this String for ordering.
var tierRateOptionsStr = &quot;:-SELECT-;0:Composite;4:EE&quot;;
return {
restrict: &#039;E, A, C&#039;,
scope: {
optionId: &quot;&amp;optionIdAttribute&quot;,
errorCountValue: &quot;=errorValueAttribute&quot;,
warningCountValue: &quot;=warningValueAttribute&quot;,
errorRows: &quot;=errorRowsAttribute&quot;,
config: &#039;=&#039;,
data: &#039;=&#039;,
btnStatus: &#039;=&#039;,
userCanEdit: &#039;=&#039;
// requiredColumns: requiredColumnMap
},
link: function (scope, element, attrs) {

var lastsel3;

// JQGrid based table
$(&quot;#list2&quot;).jqGrid({
data: {},
datatype: &quot;local&quot;, // Data Type
height: 300,
width: 1300, // make the table width 100%
shrinkToFit: true, // make the table width 100%
// Col Names and Model should be separated should be a service or json file
colNames: [
&#039;&#039;,
&#039;Sequence&#039;,
&#039;Plan Id&#039;,
&#039;&lt;input name=&quot;jqcolHeader&quot; type=&quot;checkbox&quot; value=&quot;birthDate&quot; /&gt; DOB &#039;,
&#039;&lt;input name=&quot;jqcolHeader&quot; type=&quot;checkbox&quot; value=&quot;age&quot; /&gt; Age &#039;,
&#039;&lt;input name=&quot;jqcolHeader&quot; type=&quot;checkbox&quot; value=&quot;stateCode&quot; /&gt; State&#039;

],
colModel: [
{
name: &#039;isChecked&#039;,
index: &#039;isChecked&#039;,
width: 60,
editable: scope.userCanEdit,
edittype: &#039;checkbox&#039;,
editoptions: {value: &quot;True:False&quot;},
formatter: &quot;checkbox&quot;,
formatoptions: {disabled: false}
},
{
name: &#039;plnGrpId&#039;, index: &#039;plnGrpId&#039;, jsonmap: &#039;plnGrpId&#039;, hidden: true,
editoptions: {class: &#039;form-control&#039;}
},
{
name: &#039;birthDate&#039;,
index: &#039;birthDate&#039;,
jsonmap: &#039;birthDate&#039;,
hidden: true,
editable: scope.userCanEdit,
formatter: dobFormatter,
cellattr: function (rowId, tv, rawObject, cm, rdata) {
if (cm.isRequired || $.trim(rdata.birthDate).length &gt; 0) {
return validateCells(rdata.birthDate, &#039;birthDate&#039;, &#039;init&#039;, &#039;good&#039;);
} else {
return &quot;&quot;;
}
}
},
{
name: &#039;age&#039;, index: &#039;age&#039;, width: 110, sorttype: &#039;int&#039;, formatter: ageFormatter, hidden: true,
editable: scope.userCanEdit,
cellattr: function (rowId, tv, rawObject, cm, rdata) {
// Get DOB, YOB and Age validated
if (cm.isRequired || $.trim(rdata.age).length &gt; 0) {
return validateCells(rdata.age, &#039;age&#039;, &#039;init&#039;, &#039;good&#039;);
} else {
return &quot;&quot;;
}
}
},
{
name: &#039;stateCode&#039;, index: &#039;stateCode&#039;, jsonmap: &#039;stateCode&#039;, width: 150, hidden: true,
editable: scope.userCanEdit, edittype: &quot;select&quot;, formatter: stateCodeFormatter,
editoptions: {
defaultValue: &#039;&#039;,
class: &#039;form-control&#039;,
value: stateCodeOptions,
dataEvents: [{
type: &#039;focus&#039;, fn: function (e) {
setState(e, &#039;select-box&#039;);
}
},
{
type: &#039;change&#039;, fn: function (e) {
setState(e, &#039;select-box&#039;);
}
},
{
type: &#039;keydown&#039;, fn: function (e) {
setState(e, &#039;select-box&#039;);
}
}]
},
cellattr: function (rowId, tv, rawObject, cm, rdata) {
if (cm.isRequired || $.trim(rdata.stateCode).length &gt; 0) {
return validateCells(rdata.stateCode, &#039;select-box&#039;, &#039;init&#039;, &#039;good&#039;, stateCodeOptions);
} else {
return &quot;&quot;;
}
}
}
],
jsonReader: {
root: &quot;rows&quot;,
page: &quot;page&quot;,
total: &quot;total&quot;,
records: &quot;records&quot;,
repeatitems: false,
id: &quot;0&quot;
},

autowidth: false,
editurl: &#039;url&#039;,
fixed: false,
//scroll: 1,
loadonce: false,
mtype: &quot;GET&quot;,
rownumbers: true,
rownumWidth: 40,
altclass: &#039;even&#039;,
altRows: true,
gridview: true,
pager: &#039;#pager2&#039;,
sortname: &#039;item_id&#039;,
viewrecords: true,
sortorder: &quot;asc&quot;,
sortable: true,
caption: &quot;Census Data&quot;,
cellEdit: true,
cellsubmit: &#039;clientArray&#039;,
ordering: true,
hidegrid: false,
hiddengrid: false,
cellLayout: 15,
afterSaveCell: function (rowid, cellname, value, iRow, iCol) {
scope.$apply(function () {
if (cellname == &#039;age&#039;) {
value = $.trim(value); // trim value
var dateValue = new Date($.trim($(this).getCell(rowid, &#039;birthDate&#039;))); // Get date value
var currentDate = new Date();
// Do the checks - null , empty, non digit and non date
if (!isNaN(value) &amp;&amp; value !== &quot;&quot;) {
// Do checks on the date value and subtract age from year
if (dateValue !== &quot;&quot; &amp;&amp; !isNaN(dateValue.valueOf())) {
dateValue.setFullYear(currentDate.getFullYear() - value);
} else {
dateValue.setFullYear(currentDate.getFullYear() - value);
dateValue.setDate(1);
dateValue.setMonth(0);
}
}
// set the value
$(this).setCell(rowid, &#039;birthDate&#039;, dateValue.getDate() + &quot;/&quot; + (dateValue.getMonth() + 1) + &quot;/&quot; + dateValue.getFullYear());

}
// Enable the Save Button if its disabled
scope.btnStatus.isSubmitDisabled = false;

// Enable the Revert Button if its disabled
scope.btnStatus.isRevertDisabled = false;
});
},
beforeSelectRow: function (rowid, e) {
scope.$apply(function () {
// arrays to maintain selected rows
var $target = $(e.target);
var rowData = $(&#039;#list2&#039;).getRowData(rowid);
var seqNum = rowData.mbrCensusSeqNum + &quot;&quot;;
if ($target.is(&quot;:checkbox&quot;)) {
if ($target.is(&quot;:checked&quot;)) {
scope.$parent.checkedRows.push(seqNum);
} else if (scope.$parent.checkedRows.indexOf(seqNum) &gt;= 0) {
scope.$parent.checkedRows.splice(scope.$parent.checkedRows.indexOf(seqNum), 1);
}
}
// Enable the duplicate and delete selected button if any row is selected
if (scope.$parent.checkedRows.length &gt; 0) {
scope.btnStatus.isDuplicateSelectedDisabled = false;
scope.btnStatus.isDeleteSelectedDisabled = false;
}
else {
scope.btnStatus.isDuplicateSelectedDisabled = true;
scope.btnStatus.isDeleteSelectedDisabled = true;
}
});
return true;
},
afterEditCell: function (id, name, val, iRow, iCol) {
//Modify event handler to save on change.
$(&quot;#&quot; + iRow + &quot;_&quot; + name, &quot;#list2&quot;).bind(&#039;change&#039;, function () {
$(&#039;#list2&#039;).saveCell(iRow, iCol);
});
scope.$apply(function () {
// Enable the Save Button if its disabled
scope.btnStatus.isSubmitDisabled = false;
// Enable the Revert Button if its disabled
scope.btnStatus.isRevertDisabled = false;
});
},
beforeRequest: function () {
scope.errorCountValue = 0;
scope.warningCountValue = 0;
errorRows = [];
scope.$parent.checkedRows = [];
},
gridComplete: function () {
toggleViewErrorsOnlyLink(scope.errorCountValue);
}
});
$(&quot;#list2&quot;).jqGrid(&#039;navGrid&#039;, &#039;#pager2&#039;, {edit: false, add: true, del: true});
}
}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

mainApp.directive('ngJqGrid', function () {

//var errorCountValue = 0;

//var warningCountValue = 0;

var errorRows = [];

var currentCensusSeqNum;

var genderOptions = {'': '-SELECT-', 'F': 'Female', 'M': 'Male'};

var paymentModeOptions = {'': '-SELECT-', 'S': 'Semi-Annual', 'A': 'Annual'};

var occupationSpecialityOptions = {'': '-SELECT-', '-1': 'Not Applicable', '0': 'Unknown'};

var stateCodeOptions = {'': '-SELECT-', 'AL': 'Alabama', 'AK': 'Alaska'};

var censusClassIdOptions = {'': '-SELECT-', '-1': 'Not Eligible', '0': 'Decline'};

var dependentTypeOptions = {'': '-SELECT-', '0': 'None', '5': 'Decline'};

//Select options Sorting will not work with javascript object.Using this String for ordering.

var tierRateOptionsStr = ":-SELECT-;0:Composite;4:EE";

return {

restrict: 'E, A, C',

scope: {

optionId: "&optionIdAttribute",

errorCountValue: "=errorValueAttribute",

warningCountValue: "=warningValueAttribute",

errorRows: "=errorRowsAttribute",

config: '=',

data: '=',

btnStatus: '=',

userCanEdit: '='

// requiredColumns: requiredColumnMap

link: function (scope, element, attrs) {

var lastsel3;

// JQGrid based table

$("#list2").jqGrid({

data: {},

datatype: "local", // Data Type

height: 300,

width: 1300, // make the table width 100%

shrinkToFit: true, // make the table width 100%

// Col Names and Model should be separated should be a service or json file

colNames: [

'',

'Sequence',

'Plan Id',

'<input name="jqcolHeader" type="checkbox" value="birthDate" /> DOB ',

'<input name="jqcolHeader" type="checkbox" value="age" /> Age ',

'<input name="jqcolHeader" type="checkbox" value="stateCode" /> State'

colModel: [

{

index: 'isChecked',

width: 60,

editable: scope.userCanEdit,

edittype: 'checkbox',

editoptions: {value: "True:False"},

formatter: "checkbox",

formatoptions: {disabled: false}

{

editoptions: {class: 'form-control'}

{

index: 'birthDate',

jsonmap: 'birthDate',

hidden: true,

editable: scope.userCanEdit,

formatter: dobFormatter,

cellattr: function (rowId, tv, rawObject, cm, rdata) {

if (cm.isRequired || $.trim(rdata.birthDate).length > 0) {

return validateCells(rdata.birthDate, 'birthDate', 'init', 'good');

} else {

return "";

}

{

name: 'age', index: 'age', width: 110, sorttype: 'int', formatter: ageFormatter, hidden: true,

editable: scope.userCanEdit,

cellattr: function (rowId, tv, rawObject, cm, rdata) {

// Get DOB, YOB and Age validated

if (cm.isRequired || $.trim(rdata.age).length > 0) {

return validateCells(rdata.age, 'age', 'init', 'good');

} else {

return "";

}

{

name: 'stateCode', index: 'stateCode', jsonmap: 'stateCode', width: 150, hidden: true,

editable: scope.userCanEdit, edittype: "select", formatter: stateCodeFormatter,

editoptions: {

defaultValue: '',

value: stateCodeOptions,

dataEvents: [{

type: 'focus', fn: function (e) {

setState(e, 'select-box');

}

{

type: 'change', fn: function (e) {

setState(e, 'select-box');

}

{

type: 'keydown', fn: function (e) {

setState(e, 'select-box');

}

}]

cellattr: function (rowId, tv, rawObject, cm, rdata) {

if (cm.isRequired || $.trim(rdata.stateCode).length > 0) {

return validateCells(rdata.stateCode, 'select-box', 'init', 'good', stateCodeOptions);

} else {

return "";

}

jsonReader: {

root: "rows",

page: "page",

total: "total",

records: "records",

repeatitems: false,

id: "0"

autowidth: false,

editurl: 'url',

fixed: false,

//scroll: 1,

loadonce: false,

mtype: "GET",

rownumbers: true,

rownumWidth: 40,

altclass: 'even',

altRows: true,

gridview: true,

pager: '#pager2',

sortname: 'item_id',

viewrecords: true,

sortorder: "asc",

sortable: true,

caption: "Census Data",

cellEdit: true,

cellsubmit: 'clientArray',

ordering: true,

hidegrid: false,

hiddengrid: false,

cellLayout: 15,

afterSaveCell: function (rowid, cellname, value, iRow, iCol) {

scope.$apply(function () {

if (cellname == 'age') {

value = $.trim(value); // trim value

var dateValue = new Date($.trim($(this).getCell(rowid, 'birthDate'))); // Get date value

var currentDate = new Date();

// Do the checks - null , empty, non digit and non date

if (!isNaN(value) && value !== "") {

// Do checks on the date value and subtract age from year

if (dateValue !== "" && !isNaN(dateValue.valueOf())) {

dateValue.setFullYear(currentDate.getFullYear() - value);

} else {

dateValue.setFullYear(currentDate.getFullYear() - value);

dateValue.setDate(1);

dateValue.setMonth(0);

}

// set the value

$(this).setCell(rowid, 'birthDate', dateValue.getDate() + "/" + (dateValue.getMonth() + 1) + "/" + dateValue.getFullYear());

}

// Enable the Save Button if its disabled

scope.btnStatus.isSubmitDisabled = false;

// Enable the Revert Button if its disabled

scope.btnStatus.isRevertDisabled = false;

});

beforeSelectRow: function (rowid, e) {

scope.$apply(function () {

// arrays to maintain selected rows

var $target = $(e.target);

var rowData = $('#list2').getRowData(rowid);

var seqNum = rowData.mbrCensusSeqNum + "";

if ($target.is(":checkbox")) {

if ($target.is(":checked")) {

scope.$parent.checkedRows.push(seqNum);

} else if (scope.$parent.checkedRows.indexOf(seqNum) >= 0) {

scope.$parent.checkedRows.splice(scope.$parent.checkedRows.indexOf(seqNum), 1);

}

// Enable the duplicate and delete selected button if any row is selected

if (scope.$parent.checkedRows.length > 0) {

scope.btnStatus.isDuplicateSelectedDisabled = false;

scope.btnStatus.isDeleteSelectedDisabled = false;

}

else {

scope.btnStatus.isDuplicateSelectedDisabled = true;

scope.btnStatus.isDeleteSelectedDisabled = true;

}

});

return true;

afterEditCell: function (id, name, val, iRow, iCol) {

//Modify event handler to save on change.

$("#" + iRow + "_" + name, "#list2").bind('change', function () {

$('#list2').saveCell(iRow, iCol);

});

scope.$apply(function () {

// Enable the Save Button if its disabled

scope.btnStatus.isSubmitDisabled = false;

// Enable the Revert Button if its disabled

scope.btnStatus.isRevertDisabled = false;

});

beforeRequest: function () {

scope.errorCountValue = 0;

scope.warningCountValue = 0;

errorRows = [];

scope.$parent.checkedRows = [];

gridComplete: function () {

toggleViewErrorsOnlyLink(scope.errorCountValue);

}

});

$("#list2").jqGrid('navGrid', '#pager2', {edit: false, add: true, del: true});

}

June 30, 2015 at 4:47 pm #123979

Poet

Participant

I’m trying to upload some images but I can’t figure out how to.

July 1, 2015 at 9:18 am #123983

guriddo.support

Participant

Hello,

Sorry, but we van not reproduce the problem.

Could you please send us a link to the problem or at last very simple example.

Please note the version used – i.e jQuery version, jQuery UI version and jqGrid version.

Column Reordering- alignment issue

Search Forum

Recent Replies

Forum Statistics

UserOnline