[Ali_bParticipant]

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

[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;
}

[Ali_bParticipant]

Thank you Martin.
It’s helpful.

[Ali_bParticipant]

Thank you Martin,
It’s so helpful.
Is it away to fetch data from database for each row?
I use Handler to fetch data for treegrid.
This is my handler to fetch data for treegrid:
$.getJSON(‘../../../Handler/PurchaseFactorDetailsTree.ashx?rps_Id=’ + rps_Id + ‘&fct_Id=’ + fct_Id, function (data) {});
Now I want to use another handler to fethch data for each dropdown list from database.
Thank you.

[Ali_bParticipant]

Thank you Martin,
this example is good but my problem was not solved.
In your example all of the dropdown lists (10 dropdown lists in 10 rows) have the same data source : [“Gram”, “Kilo Gram”, “Ton”]
but may problem is these dropdown list have different data sources. for example first row has the product apple and its dropdown list has data source [“Gram”, “Kilo Gram”, “Ton”].
The second row has the product rope and its dropdownlist has data source [“Meter”, “Kilo Meter”, “Centimeter”] At the same other rows has different data sources. So each dropdown List data source depends on the product that exist on that row.
Thanks

[Ali_bParticipant]

Hello Martin,
Thank you for your Response.
My TreeGrid is a JQTreeGrid. I have some columns in it. For Example:
columns.push({
text: ‘Product’, dataField: ‘gud_Descrp’, align: ‘center’, cellsAlign: ‘center’, width: “130”, editable: false, cellClassName: cellClass
, cellsrenderer: function (row, column, value) {
return changeToMoney(value);
}
});
Another column is Unit.

columns.push({
text: ‘Unit’, dataField: ‘unt_Descrp’, align: ‘center’, cellsAlign: ‘center’, min_width: “80”, editable: true, columnType: “custom”, cellClassName: cellClass
, createEditor: function (rowKey, cellvalue, editor, cellText, width, height) {
var row = $(“#treeGrid”).jqxTreeGrid(‘getRow’, rowKey);
//var checkbox = $(“<div style=’margin-top: 6px; margin-left: -8px; left: 50%; position: relative;’ class=’wareHouseCheckbox’/>”).appendTo(editor);
//checkbox.jqxCheckBox({ checked: cellvalue });
var dropDownList = $(“<div class=’dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ width: ‘100%’, height: ‘100%’, autoDropDownHeight: true, theme: “energyblue”, rtl: true, source: [“Gram”, “Kilo Gram”, “Ton”] });
}
});
In This Example source: [“Gram”, “Kilo Gram”, “Ton”] is my datasource. I want to bind this dropdown list dynamically for each row.
As you know units depend on products. Each product has its own units. How can I do that dynamically?
Thanks.

[Author]

Posts