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

Kendo Grid Custom command with MVVM

8 Answers 195 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Raja
Top achievements
Rank 1
Raja asked on 24 Apr 2014, 07:41 PM
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.

8 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 28 Apr 2014, 10:46 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Artur
Top achievements
Rank 2
answered on 10 Sep 2015, 09:03 AM

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.

0
Alexander Valchev
Telerik team
answered on 12 Sep 2015, 07:28 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Neeraj
Top achievements
Rank 1
Veteran
answered on 05 Sep 2017, 04:31 AM
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(..)





0
Stefan
Telerik team
answered on 06 Sep 2017, 11:31 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jasmin
Top achievements
Rank 1
answered on 05 Dec 2018, 09:18 AM

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

0
Jasmin
Top achievements
Rank 1
answered on 05 Dec 2018, 09:34 AM

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

 

0
Alex Hajigeorgieva
Telerik team
answered on 07 Dec 2018, 07:38 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Raja
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Artur
Top achievements
Rank 2
Neeraj
Top achievements
Rank 1
Veteran
Stefan
Telerik team
Jasmin
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or