Passing model from Kendo Mvc UI Grid to javascript function

Question

Hi I'm using the Kendo MVC UI Grid. This is how it looks :

@(Html.Kendo().Grid<TegelCheckerModel>()
            .Name("Grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.TegelNaam);
                columns.Bound(p => p.TegelId).Sortable(false).Filterable(false).ClientTemplate("<span class='iconBtn raadplegen' onclick=\"javascript:showDetails('#= TegelNaam #')\" />").Title("");
            })
            .AutoBind(true)
            .Pageable()
            .Sortable()
            .Filterable()
                    .Events(e => e.DataBound("gridDataBound "))
            .DataSource(dataSource => dataSource
            .Ajax() //Or .Server()
            .Read(read => read.Action("GetTegels", "TegelChecker")
            .Data("getAlvNummerAndVoorWie"))
            )
        )

There is a column which displays an image which is clickable. At this moment I can pass the "Tegelnaam" from the row on which the image was clicked. This works, but I want to pass the entire data of the row on which the item was clicked. How can I do this?

Answer 1

as per my answer per a previous question I answered.

see link for a working example: http://dojo.telerik.com/OlALA

Modify your code from this:

.ClientTemplate("<span class='iconBtn raadplegen' onclick=\"javascript:showDetails('#= TegelNaam #')\" />")

to

.ClientTemplate("#=generateLink(data)#");

then the javascript function can do this:

 function generateLink(data)
  {
    var ret = '';

    if(data.StatusDesc === '' && data.newStatusDesc !== ''  && data.newStatusDesc !== null)
    {

      var linkElement = 'javscript:showDetails(' + JSON.stringify(data) + ')'; 




      ret = "<span class='iconBtn raadplegen' onclick='" + linkElement + "'>" +                                  data.newStatusDesc + '</span>'; 

      console.log(ret); 

    }
    else 
    {
      ret = data.StatusDesc; 
    }




    return ret;
  }

the important bit here is JSON.stringify(data) this will encode the item as a string but will pass the object into the function correctly as shown by my mock up of your showDetails function:

 function showDetails(status){
      console.log(status); 
      console.log("Status is::"+ status);

      alert("Status is::" + status.newStatusDesc);
      return true; 
    }

I took me a bit to get this working (and trial an error) but this seems the most sensible way of doing it (in my opinion).