my aspx
<ej:Grid ID="grdPurchaseWHTIncome"
runat='server'
MinWidth="600"
EnableTheming="true"
IsResponsive="true"
AllowScrolling="true"
AllowSorting="true"
AllowMultiSorting="true"
AllowResizing="true"
AllowPaging="false"
EnableTouch="true"
GridLines="None"
OnServerAddRow="grdPurchaseWHTIncome_ServerAddRow"
OnServerEditRow="grdPurchaseWHTIncome_ServerEditRow"
OnServerDeleteRow="grdPurchaseWHTIncome_ServerDeleteRow">
<Columns>
<ej:Column HeaderText="ประเภทเงินได้" Field="WHTCode" TextAlign="Left" AllowEditing="true" IsPrimaryKey="true">
<EditTemplate Create="create" Read="readPurchaseWHTCode" Write="writePurchaseWHTCode" />
</ej:Column>
<ej:Column HeaderText="จำนวนเงินได้" Field="WHTAmount" DataType="Decimal" TextAlign="Right" AllowEditing="true" Format="{0:n2}">
<EditTemplate Create="create" Read="readPurchaseWHTAmount" Write="writePurchaseWHTAmount" />
</ej:Column>
<ej:Column HeaderText="อัตราภาษี" Field="WHTPercent" DataType="Decimal" TextAlign="Right" AllowEditing="true" Format="{0:n2}"></ej:Column>
<ej:Column HeaderText="มูลค่าภาษี" Field="WHTTotalVat" DataType="Decimal" TextAlign="Right" AllowEditing="true" Format="{0:n2}">
</ej:Column>
</Columns>
<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>
<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
</ej:Grid>
my js
function filtering(e) {
if (e.text == '')
e.updateData(e.model.dataSource);
else {
var query = new ej.Query().select(['Text', 'Value']);
query = (e.text !== '') ? query.where('Text', 'contains', e.text, true) : query;
e.updateData(e.model.dataSource, query);
}
}
function create() {
return "<input/>";
}
function readPurchaseWHTCode(args) {
return value = args.siblings("#" + args.closest(".e-grid").attr("id") + "WHTCode").ejComboBox("model.text");
}
function readPurchaseWHTAmount(args) {
//return value = args.siblings("#" + args.closest(".e-grid").attr("id") + "WHTAmount").ejNumericTextbox("model.text");
return value = args.siblings("#" + args.closest(".e-grid").attr("id") + "WHTAmount").ejNumericTextbox("model.value").context.value;
}
function writePurchaseWHTCode(args) {
$.ajax({
type: "POST",
url: "WebService/WHTSetupWS.asmx/Get",
datatype: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(),
success: ej.proxy(function (data) {
$("#MainContent_grdPurchaseWHTIncomeWHTCode").ejComboBox({
dataSource: data.d.result,
fields: {
value: "Code",
text: "CombindedNameTH"
},
text: args.rowdata.SourceCode,
popupHeight: '200px',
popupWidth: '300px',
allowFiltering: true,
filtering: filtering,
change: purchaseIncomeChange
});//assign the filtered dataSource obtained from serverSide
}, this)
});
}
function writePurchaseWHTAmount(args) {
$("#MainContent_grdPurchaseWHTIncomeWHTAmount").ejNumericTextbox({
decimalPlaces: 2,
width: "100%",
change: purchaseAmountChange
});
}
function purchaseIncomeChange(args) {
$.ajax({
type: "POST",
url: "WebService/WHTSetupWS.asmx/GetByCode",
datatype: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ code: args.value }),
success: ej.proxy(function (data) {
$("#MainContent_grdPurchaseWHTIncomeWHTPercent").val(data.d.result.WHTPercent + ' %');
var amount = parseFloat($("#MainContent_grdPurchaseWHTIncomeWHTAmount").val());
if (amount && amount > 0 && data.d.result.WHTPercent && data.d.result.WHTPercent > 0) {
$("#MainContent_grdPurchaseWHTIncomeWHTTotalVat").val(parseFloat(amount * data.d.result.WHTPercent / 100).toFixed(2));
}
}, this)
});
}
function purchaseAmountChange(args) {
var amount = parseFloat($("#MainContent_grdPurchaseWHTIncomeWHTAmount").val());
var percent = parseFloat($("#MainContent_grdPurchaseWHTIncomeWHTPercent").val().trim().replace("%", ""));
if (amount && amount > 0 && percent && percent > 0) {
$("#MainContent_grdPurchaseWHTIncomeWHTTotalVat").val(parseFloat(amount * percent / 100).toFixed(2));
}
}