Telerik Forums / Kendo UI for jQuery Forum / MVVM /

kendo mvvm grid

Kendo UI
Resources Buy Try

5 posts, 0 answers

Neeraj

127 posts

Member since:
May 2015

Posted 03 May 2018 Link to this post

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

        </div>

</script>

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

678 posts

Posted 07 May 2018 Link to this post

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

127 posts

Member since:
May 2015

Posted 07 May 2018 Link to this post

I have added another column 'Amount' in grid. The editor doesnt 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
Neeraj

127 posts

Member since:
May 2015

Posted 07 May 2018 Link to this post

for nested property which has array , 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
Admin

678 posts

Posted 09 May 2018 Link to this post

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.

kendo mvvm grid

Neeraj

Alex Hajigeorgieva

Neeraj

Neeraj

Alex Hajigeorgieva