CODEWITHSUNDEEP
knockout.jskogrid
Priyanka Chandok
Priyanka Chandok

Reputation: 215

KnockOut KoGrid : How can I have row double click and a link in koGrid?

Update:

Please check and suggest on how to have a column value as link in koGrid and also how can I have double click functionality in kogrid at the same time i.e., age column as link which when clicked takes me to home/about page and when I double click on any row it takes me to home/Index page.

[here] : http://jsfiddle.net/LRY2U/

 {
field: "age", 
displayName: "Age",
cellTemplate: "content"
 }

Thanks Priyanka

Upvotes: 1

Views: 875

Answers (1)

Robert Westerlund
Robert Westerlund

Reputation: 4838

The problem is that the row selection handles the mouse click, so we want to ensure that we don't allow the click event to propagate to the row selection handler, which we can do using the method event.stopPropagation.

To get this working, I first changed the ItemViewModel constructor to perform the actual navigation.

function ItemViewModel(name, age) {
    var self = this;

    self.name = name;
    self.age = age;
    self.ageUrl = "/Home/Index/" + self.age;
    function navigateTo(url){
        // Before navigation we want to stop propagation of the event to avoid 
        // other handlers to handle the click and replace the url (this will 
        // ensure the row selection isn't triggered by clicking the age link)
        event.stopPropagation();
        window.location.href = url;
    }
    self.navigateToName = function(){
        navigateTo("/Home/Index?Name=" + self.name);
    };
    self.navigateToAge = function(){
        navigateTo(self.ageUrl);
    };
};

Then I updated your cell template to use properties and methods on the ItemViewModel object.

cellTemplate: "<a data-bind='click: $parent.entity.navigateToAge, attr: {href: $parent.entity.ageUrl}, text: $parent.entity.age'></a>"

And finally also updated the row selection handler to use methods on the ItemViewModel object.

afterSelectionChange: function (rowItem, event) {
    if (event.type == 'click') {
        rowItem.entity.navigateToName();
    }
}

After doing these changes everything worked well for me (if I put it in a custom html page, since jsfiddle isn't very keen on navigations).

Upvotes: 1

Related Questions