Display problem with "showvalidationpopup"

[mallepaddiParticipant]

Hi

I am using “showvalidationpopup” to show error messages, it’s working fine when the grid doesn;t have vertical scroll bar and message showing at correct place …

code : $(“#jqxgrid”).jqxGrid(‘showvalidationpopup’, event.args.rowindex, “qty”, “Enter Quantity for selected product.”);

But the problem was with grid having vertical scroll bar, if i scroll and editing any row after scrolling, message not showing at targeted row level but somewhere at top which is not visible.

For testing purpose, better to work on last item once scrolled ..

please help

Thanks

[Peter StoevKeymaster]

Hi mallepaddi,

Please, provide a sample which demonstrates your scenario. The fact that you use “event.args.rowindex” as an event argument means that you dynamically display that validation on some event and a sample would help us to understand what you try to achieve.

Best Regards,
Peter Stoev

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

[mallepaddiParticipant]

Hi

It’s simple, popup message should be shown when :

Validation in on checkbox status … if user selects “checkbox” but Quantity field value is ZERO then popup should be like “Enter value ..”

It’s all working .. but …

When you have more rows, when you scroll and doing above action not showing popup at right place …

var theme = ‘web’;
var editedRows = new Array();
var source = {
datafields: [
{ name: ‘selected’, type: ‘bool’ },
{ name: ‘productcode’, type: ‘string’ },
{ name: ‘description’, type: ‘string’ },
{ name: ‘supplier’, type: ‘string’ },
{ name: ‘price’, type: ‘string’ },
{ name: ‘uom’, type: ‘string’ },
{ name: ‘qty’, type: ‘string’ }
],
datatype: “json”,
url: ‘Products.json’,
id: ‘productcode’
};

var cellsrenderer = function (row, column, value, defaultHtml) {
return “”;
}

var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) {
},
loadError: function (xhr, status, error) { alert(‘Data load error !!!’);}
});

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid({
width:’650′,
height:’400′,
source: dataAdapter,
editable: true,
theme: theme,
selectionmode: ‘none’,
editmode: ‘click’,
enablehover: true,
columns: [
{ text: ”, datafield: ‘selected’, menu: false, sortable: false, editable: true, columntype: ‘checkbox’, width: 10 ,
renderer: function () {
return ‘

‘;
}
},
{ text: ‘Code’, datafield: ‘productcode’, editable: false,width: 70},
{ text: ‘Description’, datafield: ‘description’, editable: false, width: 235},
{ text: ‘Supplier’, datafield: ‘supplier’, editable: false, width: 125},
{ text: ‘Price / Unit’, datafield: ‘price’, editable: false, width: 70, align: ‘right’, cellsalign: ‘right’},
{ text: ‘Qty’, datafield: ‘qty’, width: 70, editable: true, cellsalign: ‘right’, align: ‘center’, columntype: ‘numberinput’, cellsrenderer:cellsrenderer},
{ text: ‘UoM’, datafield: ‘uom’, columntype: ‘textbox’, editable: false}
]});

$(“#jqxgrid”).on(‘cellvaluechanged’, function (event) {
var row = event.args.rowindex;
var dataField = event.args.datafield;
var value = event.args.value
var datarow = $(“#jqxgrid”).jqxGrid(‘getrowdata’, row);

//if checkbox checked
if(value === true){
$(“#jqxgrid”).jqxGrid(‘selectrow’, event.args.rowindex);
if (parseInt(datarow.qty) <= 0) {
$("#jqxgrid").jqxGrid('showvalidationpopup', event.args.rowindex, "qty", "Enter Quantity for selected product.");
}
}
});

[Author]

Posts