Kendo Grid Custom command with MVVM

[Raja]

I am using Durandaljs to create a single page applications. I am using Kendo UI Grid to display data. All my bindings are working and I am able to see the data in the grid. I am not sure on how to bind command events for Edit. I tried it based on MVVM example on Telerik website bit its not working for me.

Below is my code.

My View Model:

define(['plugins/http', 'durandal/app', 'knockout'], function (http, app, ko) {
    return {
        displayName: 'My Applications',
        applications: ko.observableArray([])

        editApp: function (e) {
            e.preventDefault();
            alert("test");
        },

        activate: function () {
            var that = this;

            return http.get('http://localhost/api/App').then(function (response) {
                that.applications(response);
            });
        }
    }
});

My View:

<section>
    <h2 data-bind="html: displayName"></h2>
    <div id="gridContainer">
        <div data-kendo-role="grid"
             data-kendo-scrollable="false"
             data-kendo-sortable="true"
             data-kendo-bind="source: applications"
             data-kendo-columns="[
                                {'field':'Id','hidden':true},
                                {'field': 'Name'},
                                {'command':[{'text':'Edit Application','click':'this.editApp','name':'Edit-App'}],'title':'','width':'50px'}
                             ]"
             style="height:100%;">
        </div>
    </div>
        <div style="float:left;">
            <a href="#addapp">Register Application</a>
    </div>
</section>

if I click on the Edit button it is not reaching editApp function.
Even tried placing the editApp function in normal js file rather than viewmodel. i am getting a jquery error saying "Object doesn't support property or method 'Apply'".

Please help.

[Alexander Valchev]

Hi Raja,

I am not an expert in Durandal but in terms of Kendo UI the click command property should contain the name of a JavaScript function that is reachable from the global document scope.
The name should not be surrounded by quotation marks.

For example:

{'command':[{'text':'Edit Application','click':editApp,'name':'Edit-App'}],'title':'','width':'50px'}

In your code I am not sure what to what 'this' keyword refers to, but please have in mind that the editApp function must be available in the global scope. To avoid potential issues I recommend not using the 'this' keyword inside Grid's data attributes configuration.

Regards,
Alexander Valchev
Telerik

 

 

[Artur]

It shouldn't be necessary to make a function global. This is no-go for a large JS Project.

There should be simple way to bind the command to the ViewModel.

[Alexander Valchev]

Hello Artur,

If you are using MVVM you may define the click handler in the following way:

{'command':[{'text':'Edit Application','click': viewModel.editApp,'name':'Edit-App'}],'title':'','width':'50px'}

Or to define the command button as a template which allows using data-bind attribute.

Regards,
Alexander Valchev
Telerik

 

 

[Neeraj]

Hello Alexander, please provide for using data-bind in  My motive is to get Observable object  of in command. 

Below is my code: 

<div data-role="grid" data-bind="source: TSTList"
                 data-columns='[
                     { "field": "Segments", "title": "FareBasis", "template": kendo.template($("\\#fareslist").html())},
                     {"field": "Segments","title":"Cabin", "template": kendo.template($("\\#Cabinlist").html())},
                     {"field": "Segments","title":"Segment", "template": kendo.template($("\\#Segmentlist").html())},
                     {"field": "UnitQualifier","title":"PTC", "template": kendo.template($("\\#PTClist").html())},
                     {"field": "Quantity","title":"Qty", "template": kendo.template($("\\#Quantity").html())},
                     {"field": "SupplierCommercials.SupplierHeads.NetFareInclTax","title":"Total", "template": kendo.template($("\\#Total").html())},
                     {"title":"Action",command: [
                        { text: "Select", click: AirPricingWoPNRViewModel.Item.SelectFareFamily, title: "Action"  },
                     { text: "MiniRule", click: AirPricingWoPNRViewModel.Item.SelectFareFamily },
                     { text: "FullRule", click: AirPricingWoPNRViewModel.Item.SelectFareFamily },
                     { text: "Delete", click: AirPricingWoPNRViewModel.Item.SelectFareFamily }
                     ]}
                     ]'></div>

with above code on command button click  get Observable object ( like if we check  e.data(...) in case of I am getting click event  ( like e.sender  to get row data)
          I want to access kendo item Observable like e.data(..)

[Stefan]

Hello Neeraj,

As this button is part of the Grid, the "this" variable can be used the access the Grid. Also, the viewModel is available directly using its name:

http://dojo.telerik.com/iPAqE

Could you please share with us more details what is the desired result when the custom command buttons are clicked?

Regards,
Stefan
Progress Telerik

[Jasmin]

Hello Alexander,

can you give as a simple example of this below:

[quote]
Or to define the command button as a template which allows using data-bind attribute.
[/quote]

Thank you and best regards,

Jasmin

[Jasmin]

Hello everyone,

I am trying to bind the event using command with MVVM and with modelView, but I am getting following error in DevTools console:

Uncaught TypeError: Cannot read property 'testClick' of null

My model is in global scope, hete the code example:

HTML:

data-columns="[                
                                             { 'field' : 'testName', title: 'Name' },
                                             { 'command': { text: 'Delete', click: pageController.testClick, iconClass: 'fa fa-trash mr-1' }, title: '', width: '95px'  }
                                             ]"

TypeScript function:

public testClick(e): any{
        alert("test");
}

Does any have an idea what is causing the problem?

Thank you and BR,

Jasmin

 

[Alex Hajigeorgieva]

Hello, Jasmin,

Please find the answers to your questions below:

1) Or to define the command button as a template which allows using data-bind attribute.

To define a custom command in a template, you should follow the suggestion in the documentation

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.command#columns.command.template

For the click to work when the button is in a template, add the class with the resulting command name per Kendo UI convention "k-grid-[columns.command.name]"

{'command':[{'click': viewModel.SelectFareFamily,'name':'Edit-App', 'template': 'Template command column <a class=\'k-button k-grid-Edit-App\'><span class=\'k-icon k-i-settings\'></span>Settings</a>'}]}

2) Uncaught TypeError: Cannot read property 'testClick' of null

This error shows that in the current context pageController is null. Most likely it is "hidden" from the grid as it is not globally available.

Here is a sample which shows the click working as expected in a command template column where the click function is not part of the viewModel (which looks like what is desired in your case)

https://dojo.telerik.com/@bubblemaster/eKUHuyoT

Feel free to modify my example to better demonstrate the issue that you are experiencing.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik