I need responsive jqxgrid like this

[kashehiParticipant]

I need to change my jqxgrid to responsive grid like this, Is it posible?
If screen width is not enough to display all columns, the grdid hides them according to the specified priority. To view values of hidden columns, click the ellipsis button in the last column of the required row

[Peter StoevKeymaster]

We have this. Our Grid demo: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/grid-adaptive-layout.htm?material

[kashehiParticipant]

Thanks for Your response, but my jqwidget is v4.1.2 and t think this version not support adaptive, i will update my jqwidget and then test it.
Thank You

[kashehiParticipant]

I updated jqwidget version form 4.1.2 to 6.2.0 and then set adaptive:true in creategrid, but is not work, would you please tell me what is wrong?
it’s my code:

function CreatGrid() {
var cellsrendererView = function (row, columnfield, value, defaulthtml, columnproperties) {
return ‘<div style=”text-align:center;” title=”View”>’ +
‘‘ +
‘</div>’;
},
delrenderer = function (row, datafield, value) {
return ‘<div style=”text-align:center;” Title=”Delete”></div>’;
},
Actionrenderer = function (row, datafield, value) {
var IsReplicated = $(“#jqxgrid”).jqxGrid(‘getcellvalue’, row, ‘IsReplicated’);

if (IsReplicated == 1) {
return ‘<div style=”text-align:center;” title=”More facility” ></div>’;
}
else {
return ‘<div style=”text-align:center;” title=”More Facility” ></div>’;
}
},
cellsrenderLetterViewCode = function (row, columnfield, value, defaulthtml, columnproperties) {
var str = ”;
for (var i = 0; i < value.length; i++) {
if (str == ”) {
str = ‘<td class=”FontLetterViewCode”>’ + value.charAt(i) + ‘</td>’;
}
else {
str = str + ‘<td class=”FontLetterViewCode”>’ + value.charAt(i) + ‘</td>’;
}
}
return ‘<div style=”text-align:center;width:100%;height:100%;” >’ +
‘<table style=”margin: 4px auto auto;text-align: center; “><tr>’ +
str + ‘</tr></table></div>’;

},
cellclassname = function (row, column, value, data) {
var Priority = $(“#jqxgrid”).jqxGrid(‘getcellvalue’, row, ‘Priority’);
if (Priority == ‘1’) {
return “Class0”;
}
if (Priority == ‘2’) {
return “Class1”;
} else if (Priority == ‘3’) {
return “Class2”;
};
};
var h = $(window).height() – 100;
var e = h – 92;
var psie = e / 30;
//تعداد صفحات
var psize = Math.round(psie);

$(“#jqxgrid”).jqxGrid(
{
width: ‘100%’,
height: h,
adaptive: true,
columnsresize: true,
rtl: true,
pageable: true,
editable: true,
rowsheight: 30,
pagesize: psize,
selectionmode: ‘multiplecellsadvanced’,
columns: [
{
text: ”,
menu: false,
filterable: false,
datafield: ‘IsSelected’,
columntype: ‘checkbox’,
width: “30px”,
editable: true,
rendered: function (element) {
var checkbox = $(element).last();
$(checkbox).jqxCheckBox({
width: 16,
height: 16,
animationShowDelay: 0,
animationHideDelay: 0
});
columnCheckBox = $(checkbox);
$(checkbox).on(‘change’, function (event) {
var checked = event.args.checked;
var flag = checked;
SelectAllRowInCurrentPage(flag);
});
return true;
}
},
{ text: ‘ReplicateType’, datafield: ‘ReplicateType’, hidden: true },
{ text: ‘IsReceiveArchived’, datafield: ‘IsReceiveArchived’, hidden: true },
{ text: ‘LetterPostId’, datafield: ‘LetterPostId’, hidden: true },
{ text: ‘Priority’, datafield: ‘Priority’, hidden: true },
{ text: ‘SendType’, datafield: ‘SendReceiveType’, hidden: true },
{ text: ‘IsDone’, datafield: ‘IsDone’, hidden: true },
{ text: ‘ClosingType’, datafield: ‘ClosingType’, hidden: true },
{ text: ‘IsReturned’, datafield: ‘IsReturned’, hidden: true },
{ text: ‘FlagReplicate’, datafield: ‘FlagReplicate’, hidden: true },
{ text: ‘Id’, datafield: ‘Id’, hidden: true },
{ text: ‘IsReplicated’, datafield: ‘IsReplicated’, hidden: true },
{ text: ‘importletter’, datafield: ‘Number’, width: ’70px’, cellclassname: cellclassname, filtertype: ‘textbox’, filtercondition: ‘contains’, cellsalign: ‘left’, align: ‘center’, editable: false },
{ text: ‘numberletter’, datafield: ‘FormatNumber’, width: ’70px’, cellclassname: cellclassname, filtertype: ‘textbox’, filtercondition: ‘contains’, cellsalign: ‘left’, align: ‘center’, cellsrenderer: cellsrenderLetterViewCode, editable: false },
{ text: ‘letterdate’, datafield: ‘AddedDate’, width: ’70px’, cellclassname: cellclassname, cellsalign: ‘center’, filtertype: ‘textbox’, filtercondition: ‘contains’, align: ‘center’, editable: false },
{ text: ‘LetterSend’, datafield: ‘SendReceiveDate’, width: ’70px’, cellclassname: cellclassname, cellsalign: ‘center’, filtertype: ‘textbox’, filtercondition: ‘contains’, align: ‘center’, editable: false },
{ text: ‘ReferDate’, datafield: ‘ReferenceDate’, width: ’70px’, cellclassname: cellclassname, cellsalign: ‘center’, filtertype: ‘textbox’, filtercondition: ‘contains’, align: ‘center’, editable: false },
{ text: ‘Subject’, datafield: ‘Subject’, minwidth: ‘180px’, cellclassname: cellclassname, filtertype: ‘textbox’, filtercondition: ‘contains’, align: ‘center’, cellsalign: ‘right’, editable: false },
{ text: ‘Sender’, datafield: ‘SenderFullName’, width: ‘110px’, cellclassname: cellclassname, filtertype: ‘textbox’, filtercondition: ‘contains’, cellsalign: ‘right’, align: ‘center’, editable: false },
{ text: ‘Reciever’, datafield: ‘ReceiverFullName’, filtertype: ‘textbox’, cellclassname: cellclassname, filtercondition: ‘contains’, cellsalign: ‘right’, align: ‘center’, width: ‘110px’, editable: false },
{ text: ‘Refererr’, datafield: ‘RefereFullName’, cellclassname: cellclassname, width: ‘110px’, filtertype: ‘textbox’, filtercondition: ‘contains’, cellsalign: ‘right’, align: ‘center’, editable: false },
{ text: ‘Type’, datafield: ‘LetterType’, width: ’50px’, cellclassname: cellclassname, filtertype: ‘checkedlist’, filteritems: [‘internal’, ‘import’, ‘external’], filtercondition: ‘contains’, cellsalign: ‘right’, align: ‘center’, editable: false },
{ text: ‘‘, datafield: ‘IsView’, cellsrenderer: cellsrendererView, cellclassname: ‘AccessID_149’, cellsalign: ‘center’, align: ‘center’, width: ’30px’, filterable: false, editable: false },
{ text: ‘‘, datafield: ‘Action’, cellsrenderer: Actionrenderer, cellsalign: ‘center’, align: ‘center’, width: ’30px’, filterable: false, editable: false },
{ text: ‘‘, datafield: ‘delete’, cellsrenderer: delrenderer, cellclassname: ‘AccessID_152’, cellsalign: ‘center’, align: ‘center’, width: ’30px’, filterable: false, editable: false },
{ text: ‘text’, datafield: ‘Text’, cellclassname: cellclassname, filtercondition: ‘contains’, cellsalign: ‘right’, align: ‘center’, width: ‘150px’, editable: false }
]
});

$(“#jqxgrid”).jqxGrid(‘localizestrings’, localizationobj);
$(‘#jqxgrid’).jqxGrid({ pagesizeoptions: [psize, psize + 50, psize + 100, psize + 200] });

}

[Peter StoevKeymaster]

It collapses the columns when the Grid’s width is below the Grid’s adaptivewidth which by default is 600px.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[kashehiParticipant]

Tahnks alot,I do that and solved.
firts question:
but i have another question, my grid by default shows the additional adaptive column with “…” ,I change width of my grid but it shows that, at first i expect it doesn not show that, when the browser window is resized it should be show that coloumn.what can i do for that?
second question is :
additional adaptive column shows all field that return in json data, but i dont want some of them to show in that column, like Row Id, and some field such as deleted edited and…, how can i customize that?

[Author]

Posts