Guriddo » Topic: Bug in responsive JQGRID

Bug in responsive JQGRID

Guriddo
responsiveness
Bug in responsive JQGRID

Tagged: responsiveness

This topic has 6 replies, 3 voices, and was last updated 4 years, 10 months ago by tony.

Creator

Topic
July 5, 2017 at 10:37 pm #126249

jstuardo
Participant

I have this JQGRID:
<pre class=”default prettyprint prettyprinted”>$(document).ready(function () { $.jgrid.defaults.width = 780; $.jgrid.defaults.responsive = true; $.jgrid.defaults.styleUI = 'Bootstrap'; $.jgrid.styleUI.Bootstrap.base.rowTable = "table table-bordered table-striped"; $("#gridUsuario").jqGrid({ url: '@Url.Action("GetUsers", "Account", new { area = "Security" })', mtype: "GET", datatype: "json", colModel: [ { label: 'ID', name: 'ID', key: true, width: 70 }, { label: 'Vigente', name: 'UsuarioVigente', hidden: true }, { label: 'Nombre Completo', name: 'FullName', width: 200, edittype: 'text', editable: true, editrules: { required: true }, editoptions: { size: 50, maxlength: 100 }, formoptions: { elmprefix: '(*)' } }, { label: 'Login', name: 'UserName', width: 120, edittype: 'text', editable: true, editrules: { required: true }, editoptions: { size: 30, maxlength: 50 }, formoptions: { elmprefix: '(*)' } }, { label: 'Password', name: 'Password', width: 100, edittype: 'password', editable: true, hidden: true, editrules: { required: true, edithidden: true }, editoptions: { size: 30, maxlength: 50 }, formoptions: { elmprefix: '(*)' } }, { label: 'E-mail', name: 'Email', width: 240, edittype: 'text', editable: true, editrules: { required: true, email: true }, editoptions: { size: 50, maxlength: 100 }, formoptions: { elmprefix: '(*)' } }, { label: 'Teléfono', name: 'PhoneNumber', width: 120, edittype: 'text', editable: true, editoptions: { size: 30, maxlength: 50 } }, { label: 'Ciudad', name: 'Hometown', width: 150, edittype: 'text', editable: true, editoptions: { size: 30, maxlength: 50 } }, { label: 'Fecha Registro', name: 'UsuarioCreadoEn', width: 120, formatter: "date", formatoptions: { srcformat: "ISO8601Long", newformat: "d/m/Y H:i" } } ], viewrecords: true, shrinkToFit: false, autowidth: true, multiselect: true, rowNum: 20, rowList: [10, 20, 30], gridview: true, pager: "#gridPager", sortname: "FullName", sortorder: "asc", beforeRequest: function () { var $PANEL = $('#pnlGrid'), $FOOTER = $('footer');
// 125 = otros altos, como paddings y la fila de paginación $("#gridUsuario").jqGrid('setGridHeight', $FOOTER.offset().top - $PANEL.offset().top - 125); }, rowattr: function (rd) { if (!rd.UsuarioVigente) { return { "class": "no-vigente" }; } } });
All works perfect but responsive behaviour.

At bottom toolbar, I have several actions created with navButtonAdd method.

When I test responsiveness, the action icons at bottom toolbar are replaced by a button with “Actions…” label. When clicked, all action items pop up. That is perfect, however, the paging does not behave the same, causing paging icons to appear over the “Actions…” button.

Is this a bug in JQGRID? is there a way to solve this?

Thanks

Jaime
Creator

Topic

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

Author

Replies

July 6, 2017 at 9:10 am #126250

guriddo.support

Participant

Hello,

The code you posted is very difficult to be read. Can you please post it again or better send it to support at guriddo dot net.

Thank you.

Kind regards

Will

Guriddo Support Team

July 6, 2017 at 2:19 pm #126251

jstuardo

Participant

This forum editor is the worst I have seen… and I tried to modify the post, but the system did not allow it.

The post is also in Stack Overflow site: https://goo.gl/E49cdc

There, some people suggested me to use other component because Guriddo cannot do that. Can you confirm this?

Regards,

Jaime

July 7, 2017 at 10:16 am #126252

tony

Keymaster

Hello,

Thank you for the answer. I think the form editor is fine – maybe you copy paste some code from other forum editor, which causes the problem. Anyway this is a example code which works for us:


$(document).ready(function () {
$.jgrid.defaults.width = 780;
$.jgrid.defaults.responsive = true;
$.jgrid.defaults.styleUI = 'Bootstrap';
$.jgrid.styleUI.Bootstrap.base.rowTable = "table table-bordered table-striped";
$("#gridUsuario").jqGrid({
url: '@Url.Action("GetUsers", "Account", new { area = "Security" })',
mtype: "GET",
datatype: "json",
colModel: [
{ label: 'ID', name: 'ID', key: true, width: 70 },
{ label: 'Vigente', name: 'UsuarioVigente', hidden: true },
{ label: 'Nombre Completo', name: 'FullName', width: 200, edittype: 'text', editable: true, editrules: { required: true }, editoptions: { size: 50, maxlength: 100 }, formoptions: { elmprefix: '(*)' } },
{ label: 'Login', name: 'UserName', width: 120, edittype: 'text', editable: true, editrules: { required: true }, editoptions: { size: 30, maxlength: 50 }, formoptions: { elmprefix: '(*)' } },
{ label: 'Password', name: 'Password', width: 100, edittype: 'password', editable: true, hidden: true, editrules: { required: true, edithidden: true }, editoptions: { size: 30, maxlength: 50 }, formoptions: { elmprefix: '(*)' } },
{ label: 'E-mail', name: 'Email', width: 240, edittype: 'text', editable: true, editrules: { required: true, email: true }, editoptions: { size: 50, maxlength: 100 }, formoptions: { elmprefix: '(*)' } },
{ label: 'Teléfono', name: 'PhoneNumber', width: 120, edittype: 'text', editable: true, editoptions: { size: 30, maxlength: 50 } },
{ label: 'Ciudad', name: 'Hometown', width: 150, edittype: 'text', editable: true, editoptions: { size: 30, maxlength: 50 } },
{ label: 'Fecha Registro', name: 'UsuarioCreadoEn', width: 120, formatter: "date", formatoptions: { srcformat: "ISO8601Long", newformat: "d/m/Y H:i" } }
],
viewrecords: true,
shrinkToFit: false,
autowidth: true,
multiselect: true,
rowNum: 20,
rowList: [10, 20, 30],
gridview: true,
pager: "#gridPager",
sortname: "FullName",
sortorder: "asc",
beforeRequest: function () {
var $PANEL = $('#pnlGrid'),
$FOOTER = $('footer');

// 125 = otros altos, como paddings y la fila de paginación
$("#gridUsuario").jqGrid('setGridHeight', $FOOTER.offset().top - $PANEL.offset().top - 125);
},
rowattr: function (rd) {
if (!rd.UsuarioVigente) {
return { "class": "no-vigente" };
}
}
});

$(document).ready(function () {

$.jgrid.defaults.width = 780;

$.jgrid.defaults.responsive = true;

$.jgrid.defaults.styleUI = 'Bootstrap';

$.jgrid.styleUI.Bootstrap.base.rowTable = "table table-bordered table-striped";

$("#gridUsuario").jqGrid({

url: '@Url.Action("GetUsers", "Account", new { area = "Security" })',

mtype: "GET",

datatype: "json",

colModel: [

{ label: 'ID', name: 'ID', key: true, width: 70 },

{ label: 'Vigente', name: 'UsuarioVigente', hidden: true },

{ label: 'Nombre Completo', name: 'FullName', width: 200, edittype: 'text', editable: true, editrules: { required: true }, editoptions: { size: 50, maxlength: 100 }, formoptions: { elmprefix: '(*)' } },

{ label: 'Login', name: 'UserName', width: 120, edittype: 'text', editable: true, editrules: { required: true }, editoptions: { size: 30, maxlength: 50 }, formoptions: { elmprefix: '(*)' } },

{ label: 'Password', name: 'Password', width: 100, edittype: 'password', editable: true, hidden: true, editrules: { required: true, edithidden: true }, editoptions: { size: 30, maxlength: 50 }, formoptions: { elmprefix: '(*)' } },

{ label: 'E-mail', name: 'Email', width: 240, edittype: 'text', editable: true, editrules: { required: true, email: true }, editoptions: { size: 50, maxlength: 100 }, formoptions: { elmprefix: '(*)' } },

{ label: 'Teléfono', name: 'PhoneNumber', width: 120, edittype: 'text', editable: true, editoptions: { size: 30, maxlength: 50 } },

{ label: 'Ciudad', name: 'Hometown', width: 150, edittype: 'text', editable: true, editoptions: { size: 30, maxlength: 50 } },

{ label: 'Fecha Registro', name: 'UsuarioCreadoEn', width: 120, formatter: "date", formatoptions: { srcformat: "ISO8601Long", newformat: "d/m/Y H:i" } }

viewrecords: true,

shrinkToFit: false,

autowidth: true,

multiselect: true,

rowNum: 20,

rowList: [10, 20, 30],

gridview: true,

pager: "#gridPager",

sortname: "FullName",

sortorder: "asc",

beforeRequest: function () {

var $PANEL = $('#pnlGrid'),

$FOOTER = $('footer');

// 125 = otros altos, como paddings y la fila de paginación

$("#gridUsuario").jqGrid('setGridHeight', $FOOTER.offset().top - $PANEL.offset().top - 125);

rowattr: function (rd) {

if (!rd.UsuarioVigente) {

return { "class": "no-vigente" };

}

});

Anyway I have answered your questions.

In principle it is a good idea to put real working example which demonstrates

the problem and point:

1. Which version of Guriddo is used?
2. Which version of jquery?
3. Which CSS framework is used?
4. in which browser is this happen?
5. Is this happen only on mobile device?

These base points are very important to solve the problem quick and professional.

In your code I do not see full test case and answers of the above 5 basic questions.

I apologize if this sound hard, but you should understand us that it is not possible to reproduce all user descriptions and problems described in a way you do.

I hope you undersatnd our point.

Kind Regards,

Tony Tomov

July 7, 2017 at 3:20 pm #126253

jstuardo

Participant

Hello, of course the problem was that I copied from other site and that way, all other codes were copied too. The problem was that I could not edit the post to fix the error. The system simply sent an error when I tried to save the updated post.

With regard to the grid problem, I thought it was not necessary to post an example since I think this is not a configuration problem but something is wrong with the grid itself when I see it in mobile device.

In mobile, only the bottom toolbar action buttons were replaced by an only button with “Actions…” label, which is great, but the same behaviour is not accomplished by the pagination information. For example, the navigation icons appear superimposed with the action button.

Please see the following screenshot:

http://www.desytec.com/guriddo.png

This is the version of the plugin I am using:

Guriddo jqGrid JS – v5.2.1 – 2017-05-31

And CSS framework is Bootstrap 3.3.7

This happens only in mobile resolution. I am using Chrome to emulate it.

Thanks

Jaime

July 7, 2017 at 3:24 pm #126254

jstuardo

Participant

Ah… and if you look at the post above, you will see no separation between paragraphs, however, I have actually added blank lines between them in the editor. So, the WYSIWYG here is not so good 🙂

July 10, 2017 at 11:23 am #126258

tony

Keymaster

Hello,

Thank you for the detailed explanation. With this I can see that in this case there is a problem. We have plans to fix this within next days. Personally I will let you know about our solution.

Thank you for using our product.

Kind Regards,

P.S. By the way the form editor has two modes – text and visual – maybe you use the text mode where new lines does not appear. Switch to Visual mode (in upper right corner) in order to have new lines

Tony Tomov

Author

Replies

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

You must be logged in to reply to this topic.

Registered Users: 12,188
Forums: 7
Topics: 10,913
Replies: 23,038
Topic Tags: 313

11 Users Online

Users: 4 Guests, 7 Bots

Stay connected with us in your favorite flavor!

Bug in responsive JQGRID

Search Forum

Recent Replies

Forum Statistics

UserOnline