kendo mvvm grid

5 posts, 0 answers
  1. Neeraj
    Neeraj avatar
    94 posts
    Member since:
    May 2015

    Posted 03 May 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 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 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?  

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    441 posts

    Posted 07 May 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.
  3. Neeraj
    Neeraj avatar
    94 posts
    Member since:
    May 2015

    Posted 07 May 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>
     
    <!--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

  4. Neeraj
    Neeraj avatar
    94 posts
    Member since:
    May 2015

    Posted 07 May 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() 
  5. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    441 posts

    Posted 09 May 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.
Back to Top