kendo mvvm grid in Kendo UI for jQuery

This is a migrated thread and some comments may be shown as answers.

kendo mvvm grid

4 Answers 18 Views

MVVM

This is a migrated thread and some comments may be shown as answers.

Neeraj asked on 03 May 2018, 10:24 AM

<script id="ImportPNRSupplierHeads" type="text/x-kendo-template" class="KendoExtTemplate">

<div data-role="window" id="ImportPnrSupplierTaxWindow" class="PricingCommercialSubWindow"

data-animation="false"

data-title="Supplier Tax Breakup" data-modal="true"

data-width="770" data-visible="false" data-bind="events:{close: SupplierTaxWindowClose,open: OnSupplierTaxWindowOpened}">

<button type="button" data-role="button" text-align="left" class="btn btn-default"

data-bind="click: AddSupplierTaxRow" style="margin-bottom: 2px">

<i class="fa fa-plus"></i>

Add Tax

</button>

<br />

<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"},

{ "field": "Type", "title": "Sub Code", width: 80 },

{ "field": "Description", "title": "Description", width: 250},

{ "field": "AmountCurrency", "title": "Currency", width: 80 , editable: "false" }

]'

data-bind='source: Tax.TaxBreakup,events: {dataBound: ImportPnrSupplierTaxGridDataBound}'></div>

<br />

<div style="text-align: center">

<button type='button' class='k-button' data-bind="">

<i class='fa fa-close fa-fw'></i> Close

</button>

</div>

</script>

I am using Grid MVVM InCell Editing and want the column "AmountCurrency" to be editable based on value "IsUserCreated" (true/false). And want to add class "Red" to column "CountryCode How can do that?

4 Answers, 1 is accepted

answered on 07 May 2018, 05:08 AM

Hi, Neeraj,

To achieve the desired conditional editable state of the AmountCurrency column, you may use "columns.editable" setting as a function:

'editable' : function(dataItem){ return dataItem.IsUserCreated; }

Here is an example of that :

http://dojo.telerik.com/IfIZaYAL

As for adding a class to a specific column, you may use the columns.template:

'template': '<span class=\'red\'>#=CountryCode#</span>'

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 07 May 2018, 08:41 AM

I have added another column 'Amount' in . The editor work as expected :

<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>

//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

answered on 09 May 2018, 11:06 AM

Hi, Neeraj,

Please find the answers to your questions below:

1) When we click on Amount , the name of function displayes as text . there should be kendoNumericTextbox as specified in Editor

This is expected as the name of the function is passed as a string, not the function itself. You may declare it as a standalone function and pass the name to the "columns.editor" property minus the quotes:

function ImportPnrSupplierTaxGridAmountEditor(container, options) {}

{ "field": "Amount", width: 70, "editor": ImportPnrSupplierTaxGridAmountEditor ,"editable" : function(dataItem){ return dataItem.IsUserCreated; } },

Alternatively, if you wish to keep it in the viewModel, then you should get it out of it when needed with a get() or directly:

'editor': viewModel.ImportPnrSupplierTaxGridAmountEditor

'editor': viewModel.get('ImportPnrSupplierTaxGridAmountEditor')

2) How to set nested properties

In order for the observable to trigger change, you should use the set() method. I tested setting in the following two ways and they both work as expected:

this.nested.nestedOne.nestedTwo.nestedThree.nestedFour.set("nestedFive", this.get("name"))

this.set("nested.nestedOne.nestedTwo.nestedThree.nestedFour.nestedFive", this.get("name"))

In my case, all of the nested fields are observable objects and you can see that by inspecting their prototype, so any combination of setting works well.

Here is a Dojo that I tested for both of the questions above:

http://dojo.telerik.com/@bubblemaster/aYerugoL

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.