[Solved] kendo mvvm grid

[Neeraj]

<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 id="ImportPnrSupplierTaxGrid"></div>-->
           <!--Import PNR SupplierTaxGrid Starts-->
           <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>

           <!--Import PNR SupplierTaxGrid Ends-->
            <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>

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

[Alex Hajigeorgieva]

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

[Neeraj]

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>

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

[Neeraj]

for nested property which has we should assign like this:

VM.set("SelectedFareFamily.PricingCommercialSkeleton.SupplierCommercials.SupplierHeads.Tax.TaxBreakup",$(source).data("kendoGrid").dataSource.data());

OR

VM.SelectedFareFamily.PricingCommercialSkeleton.SupplierCommercials.SupplierHeads.Tax.TaxBreakup = $(source).data("kendoGrid").dataSource.data() 

[Alex Hajigeorgieva]

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