jqueryasp.net-mvckendo-ui

Passing a value in Command function in a column for Kendo UI Grid


I want to add a button in a Kendo UI grid which will redirect to a different site the URL is created dynamically in a function based on the environment and a ID field for that respective row is passed in the URL. So I added a command column in the grid but I am not sure how to pass the ID to that function . Please help . Below is not working for me

{ command: { text: "View", click: "getredirectURL(#=Id#)" }, title: " ", width: "100px" }

Solution

  • The problem is that you are configuring the click event wrong. As per the documentation, you need to set the JavaScript function which gets executed when the command button is clicked. You cannot set the parameters of this function using templating (i.e. #=Id#). The function receives a jQuery Event as an argument (copy-paste statement).

    You need to do the following:

    click: function(e) {
          // e.target is the DOM element representing the button
          var tr = $(e.target).closest("tr"); // get the current table row (tr)
          // get the data bound to the current table row
          var data = this.dataItem(tr);
    
          //the "data" variable is now the entire "object" and has properties
          //you now have access to the Id property so just call your function
          getredirectURL(data.Id);
    }
    

    You might want to add a debugger; and start inspecting the e event and the this object inside the function. There are many interesting things inside.