<script id=
"test"
type=
"text/x-kendo-template"
>
<div data-role=
"grid"
id=
"ImportPnrSupplierTaxGrid"
data-editable=
'true'
data-columns='[{
"field"
:
"ID"
,hidden:
true
},
{
"field"
:
"IsUserCreated"
, hidden:
true
},
{
"field"
:
"OfficePNRTSTID"
, hidden:
true
},
{
"field"
:
"CountryCode"
,
"title"
:
"Code"
,
"attributes"
: {
"class"
:
"focusedCell"
}},
{
"field"
:
"Type"
,
"title"
:
"Sub Code"
, width: 80 },
{
"field"
:
"Description"
,
"title"
:
"Description"
, width: 250},
{
"field"
:
"AmountCurrency"
,
"title"
:
"Currency"
, width: 80 , editable:
false
},
{
"field"
:
"Amount"
, width: 70,
"footerTemplate"
: kendo.template($(
"\\#ImportPnrSupplierTaxGridAmountFooter"
).html()),
"editor"
:
"ImportPnrSupplierTaxGridAmountEditor"
,
"editable"
:
function
(dataItem){
return
dataItem.IsUserCreated; } },
{
"field"
:
"IsGST"
, width: 60,
"title"
:
"IsGST"
, template: kendo.template($(
"\\#ImportPnrSupplierTaxGridIsGST"
).html()) },
{ command: [{ name:
"destroy"
}], width: 90,visible:
function
(dataItem){
return
dataItem.IsUserCreated; } }
]'
data-bind=
'source: Tax.TaxBreakup,events: {dataBound: ImportPnrSupplierTaxGridDataBound}'
style=
"height: 200px"
></div>
</script>
<!--javascript side -->
//function inside viewmodel
ImportPnrSupplierTaxGridAmountEditor:
function
(container, options) {
debugger;
$(
'<input data-bind="value: '
+ options.field +
'" />'
)
.appendTo(container)
.kendoNumericTextBox({
spinners:
false
,
attributes: { style:
"text-align:right"
},
change:
function
(e) {
debugger;
var
total = 0;
var
griddata = $(
"#ImportPnrSupplierTaxGrid"
).data().kendoGrid.dataSource.data();
for
(i = 0; i < griddata.length; i++) {
total = total + parseFloat(griddata[i].Amount != undefined ? griddata[i].Amount : 0);
}
$(
"#ImportPnrSupplierTaxGrid tbody tr div.TaxGridFooter"
).text(total.toFixed(2));
}
});
},
When we click on Amount , the name of function displayes as text . there should be kendoNumericTextbox as specified in Editor