jqxgrid change scrollbar position on cell double click

[Ali_bParticipant]

Hi,
I have jqxgrid that has many columns. So it needs horizontal scrollbar. some columns need to be edited.
The problem is when I double click on column to edit its value, the scrollbar position changed.
what should I do?
Thanks.

[MartinParticipant]

Hello Ali_b,

I have tried the following Example and do not see such an issue.
The scrollbar position is changed only if your start editing a cell which is not fully visible, so you can see the column you edit.

Best Regards,
Martin

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

[Ali_bParticipant]

Hi Martin,
This is my code:

var mrq_Id = 1500;

$.ajaxSetup({ scriptCharset: ‘utf-8’, contentType: ‘application/json;charset=utf-8’, async: true });
$.getJSON(‘../../../Handler/RequestDetailData.ashx?mrq_Id=’ + mrq_Id, function (data) {
data = AddRowNumber(data);
var source =
{
dataType: “json”,
dataFields: [
{ name: ‘rowNumber’, type: ‘number’ },
{ name: ‘id’, type: ‘string’ },
{ name: ‘drq_Id’, type: ‘number’ },
{ name: ‘sun_Id’, type: ‘number’ },
{ name: ‘drq_Quantity’, type: ‘number’ },
{ name: ‘drq_RequesterQuantity’, type: ‘number’ },
{ name: ‘drq_ManagerQuantity’, type: ‘number’ },
{ name: ‘drq_QuantitySecondUnit’, type: ‘number’ },
{ name: ‘drq_RequesterQuantitySecondUnit’, type: ‘number’ },
{ name: ‘drq_ManagerQuantitySecondUnit’, type: ‘number’ },
{ name: ‘drq_PurchasedQuntity’, type: ‘number’ },
{ name: ‘drq_Descrp’, type: ‘string’ },
{ name: ‘gdt_Id’, type: ‘number’ },
{ name: ‘gud_Id’, type: ‘number’ },
{ name: ‘gud_Descrp’, type: ‘string’ },
{ name: ‘gdt_Descrp’, type: ‘string’ },
{ name: ‘gud_BrandModel’, type: ‘string’ },
{ name: ‘unt_Descrp’, type: ‘string’ },
{ name: ‘Top_gud_Id’, type: ‘number’ },
{ name: ‘Top_gud_Descrp’, type: ‘string’ },
{ name: ‘mrq_Id’, type: ‘number’ },
{ name: ‘drq_Parent_Id’, type: ‘number’ },
{ name: ‘children’, type: ‘array’ },
{ name: ‘drq_Chairman_decision’, type: ‘string’ },
{ name: ‘drq_PaymentMng_decision’, type: ‘string’ },
{ name: ‘drq_Accountant_decision’, type: ‘string’ },
{ name: ‘drq_Pundit_decision’, type: ‘string’ },
{ name: ‘drq_PriceSpl_user_id’, type: ‘string’ },
{ name: ‘drq_PriceSplName’, type: ‘string’ },
{ name: ‘drq_SaleSpl_user_id’, type: ‘string’ },
{ name: ‘drq_SaleSplName’, type: ‘string’ },
{ name: ‘drq_UnitPrice’, type: ‘number’ },
{ name: ‘drq_UnitPriceSecondUnit’, type: ‘number’ },
{ name: ‘drq_PunditDescrp’, type: ‘string’ },
{ name: ‘sun_Descrp’, type: ‘string’ },
{ name: ‘TotalPrice’, type: ‘number’ },
{ name: ‘TotalPriceSecondUnit’, type: ‘number’ }
],
hierarchy:
{
root: ‘children’
},
id: ‘id’,
localData: data
};

var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () { }
});

var columns = createColumns();
var configuration = createConfiguration(columns);
function createConfiguration(columns) {
var configuration =
{
width: “99%”,
source: dataAdapter,
pagerMode: “Advanced”,
sortable: true,
columnsResize: true,
rtl: true,
icons: true,
editable: true,
editSettings: {
saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true,
cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: true, editOnF2: true, editSingleCell: true
},
altRows: false,
columns: columns,
columnGroups:
[
{ text: “JST Corp.”, name: “cGroup”, align: “center” }
]
};
return configuration;
}
$(“#treeGrid”).jqxTreeGrid(configuration);
});

$(‘#treeGrid’).on(‘cellValueChanged’, function (event) {
var dataField = args.dataField;
if (dataField == “drq_UnitPrice”) {
var row = args.row;
computeComplexGoodPrice(row);
}
var firstLevelRows = $(“#treeGrid”).jqxTreeGrid(‘getRows’);
});

$(“#treeGrid”).on(‘cellBeginEdit’, function (event) {
var row = args.row;
if (row.children.length != 0) {
$(“#treeGrid”).jqxTreeGrid(‘endUpdate’);
}
});

function computeComplexGoodPrice(row) {
if (row.drq_Parent_Id != null) {
var root = $(“#treeGrid”).jqxTreeGrid(‘getRow’, row.drq_Parent_Id);
if (root != undefined) {
var rootPrice = 0;
root.children.forEach(function (child) {
if (child.drq_UnitPrice != null && child.drq_UnitPrice != ”) {
rootPrice += (parseInt(child.drq_UnitPrice) * parseInt(child.drq_Quantity));
}
});
root.drq_UnitPrice = rootPrice;
}
}
}

function createColumns() {
var columns = [
{ text: ‘RowNumber’, dataField: ‘rowNumber’, align: ‘center’, cellsAlign: ‘right’, width: “60”, editable: false },
{
text: ‘Name’, dataField: ‘gud_Descrp’, align: ‘center’, cellsAlign: ‘right’, width: “250”, editable: false, cellClassName: cellClass
, cellsrenderer: function (row, column, value) {
var rowData = $(“#treeGrid”).jqxTreeGrid(‘getRow’, row);
if (rowData.children == undefined || rowData.children.length == 0) {
return value;

}
return getComplexGoodNameWithTooltipEnabled(rowData, column);
}
},
{ text: ‘Model’, dataField: ‘gud_BrandModel’, align: ‘center’, cellsAlign: ‘center’, width: “150”, editable: false, cellClassName: cellClass }
];
columns.push({
text: ‘Quantity’, dataField: ‘drq_Quantity’, align: ‘center’, cellsAlign: ‘center’, width: “80”, editable: true, cellClassName: cellClass
, cellsrenderer: function (row, column, value) {
return changeToMoney(value);
}
, validation: function (cell, value) {
if (value == ”) {
return true;
}
if (isNaN(parseInt(value)) || parseInt(value) < 0) {
return { message: “Please Enter Valid Data…”, result: false };
}
return true;
}
});
columns.push({
text: ‘Unit’, dataField: ‘unt_Descrp’, align: ‘center’, cellsAlign: ‘center’, width: “70”, editable: false, cellClassName: cellClass
});
columns.push({
text: ‘SecondUnit’, dataField: ‘sun_Descrp’, align: ‘center’, cellsAlign: ‘center’, width: “70”, editable: false, cellClassName: cellClass
});
columns.push({ text: ”, dataField: ‘gdt_Id’, hidden: true, editable: false });
columns.push({ text: ”, dataField: ‘gud_Id’, hidden: true, editable: false });
columns.push({ text: ”, dataField: ‘Top_gud_Id’, hidden: true, editable: false });
columns.push({ text: ”, dataField: ‘mrq_Id’, hidden: true, editable: false });
columns.push({ text: ‘Price Supplier’, dataField: ‘drq_PriceSplName’, align: ‘center’, cellsAlign: ‘right’, width: “150”, editable: false, cellClassName: cellClass });
columns.push({
text: ‘Unit Price’, dataField: ‘drq_UnitPrice’, align: ‘center’, cellsAlign: ‘center’, width: “150”, editable: true, cellClassName: cellClass
, cellsrenderer: function (row, column, value) {
return changeToMoney(value);
}
, validation: function (cell, value) {
if (value == ”) {
return true;
}
if (isNaN(parseInt(value)) || parseInt(value) < 0) {
return { message: “Please enter valid data…”, result: false };
}
return true;
}
});
columns.push({
text: ‘Total Price’, dataField: ‘TotalPrice’, align: ‘center’, cellsAlign: ‘center’, width: “150”, editable: false, cellClassName: cellClass,
cellsrenderer: function (row, column, value) {
var rowData = $(“#treeGrid”).jqxTreeGrid(‘getRow’, row);
return changeToMoney(parseInt(rowData.drq_Quantity * rowData.drq_UnitPrice, column));
}
});
columns.push({ text: ‘Purchased Quntity’, dataField: ‘drq_PurchasedQuntity’, align: ‘center’, cellsAlign: ‘center’, width: “100”, editable: false, cellClassName: cellClass });
columns.push({ text: ‘Purchased Supplier’, dataField: ‘drq_SaleSplName’, align: ‘center’, cellsAlign: ‘center’, width: “150”, editable: false, cellClassName: cellClass });
columns.push({
text: ‘توضیحات’, dataField: ‘drq_Descrp’, align: ‘center’, cellsAlign: ‘center’, minWidth: “250”, editable: true, cellClassName: cellClass
, cellsrenderer: function (row, column, value) {
var rowData = $(“#treeGrid”).jqxTreeGrid(‘getRow’, row);
if (rowData.children == undefined || rowData.children.length == 0) {
return getComplexGoodNameWithTooltipEnabled(rowData, column);
}
//return value;
}
});
return columns;
}

var cellClass = function (row, dataField, cellText, rowData) {
if (rowData.drq_Parent_Id == null || rowData.drq_Parent_Id == 0) {
return “normalCell”;
}
return “childrenCell”;
}

function getComplexGoodNameWithTooltipEnabled(rowData, column) {
var result = “<div id=” + rowData[“id”] + “>” + rowData[column] + “</div>”;
return result;
}

function changeToMoney(value) {
var x = value.toString().replace(/(,| )/g, ”).commafy();
return value.toString().replace(/(,| )/g, ”).commafy();
}

function AddRowNumber(data) {
for (i = 1; i <= data.length; i++) {
data[i – 1].rowNumber = i;
}
return data;
}

function simpleStringify(object) {
var result = [];
object.forEach(function (data, index) {
if (data.children == undefined || data.children.length == 0) {
result.push(createSimpleData(data));
}
else {
var temp = {};
temp = createSimpleData(data);
data.children.forEach(function (child, index) {
temp.children.push(createSimpleData(child));
});
result.push(temp);
}
});
return JSON.stringify(result);
}

function createSimpleData(data) {
var result = {};
result.id = data.id;
result.drq_Id = data.drq_Id;
result.drq_Quantity = data.drq_Quantity; result.drq_Descrp = data.drq_Descrp; result.gdt_Id = data.gdt_Id;
result.gud_Id = data.gud_Id; result.gud_Descrp = data.gud_Descrp; result.gdt_Descrp = data.gdt_Descrp;
result.unt_Descrp = data.unt_Descrp; result.Top_gud_Id = data.Top_gud_Id; result.Top_gud_Descrp = data.Top_gud_Descrp;
result.mrq_Id = data.mrq_Id; result.drq_GroupId = data.drq_GroupId; result.drq_Chairman_decision = data.drq_Chairman_decision;
result.drq_PaymentMng_decision = data.drq_PaymentMng_decision; result.drq_Accountant_decision = data.drq_Accountant_decision;
result.drq_Pundit_decision = data.drq_Pundit_decision; result.drq_PunditDescrp = data.drq_PunditDescrp;
result.drq_PriceSpl_user_id = data.drq_PriceSpl_user_id; result.drq_PriceSplName = data.drq_PriceSplName; result.drq_SaleSpl_user_id = data.drq_SaleSpl_user_id;
result.drq_SaleSplName = data.drq_SaleSplName; result.drq_UnitPrice = data.drq_UnitPrice; result.TotalPrice = data.TotalPrice;
result.children = [];
return result;
}

[MartinParticipant]

Hello Ali_b,

From your code I see that you actually mean jqxTreeGrid.
This issue is present when the rtl property is set to true.
Thank you for your feedback!
I will create a work item for this case.

Best Regards,
Martin

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

[Ali_bParticipant]

Hi Martin,
Thank you very much.
Would you mind tell me how I can notice the result?
Thanks.

[MartinParticipant]

Hello Ali_b,

You can follow our Release History page, for checking the new updates and fixes.

Best Regards,
Martin

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

[Author]

Posts