Open form on click in ClientTemplate

[Daniel Blendea]

Hi,

I'm using Telerik for ASP .NET Core and I have a model with a column that is a list.

1.columns.Bound(p => p.Actions)
2..ClientTemplate("#= actionsTemplate(data) #");

 

The client template, which is generated correctly:

01.function actionsTemplate(item) {
02.  let template = "";
03.  for(var i=0; i< item.Actions.length; i++){
04.     let action = item.Actions[i];
05.     template += kendo.format("<button class='btn btn-block btn-outline-success btn-sm action'" +
06.      "onclick='showDetails(this)' data-url='{0}' data-allowedState='{1}'>{2}</button>",
07.       action.Url, action.AllowedState, action.Title);
08.   }
09.   return template;
10.}

 

Then when I click a button in the column, I want to display a form, with 2 buttons, one that makes a POST, one that cancels/closes the form:

01.let detailsTemplate = kendo.template($("#template").html());
02.
03.function showDetails(e) {
04.    e.preventDefault();
05.
06.    let row = $(e).closest("tr");
07.    let closest = $(e.currentTarget).closest("tr");
08.    let dataItem = this.dataItem(closest);
09.
10.    let wnd = $("#action").data("kendoWindow");
11.
12.    wnd.content(detailsTemplate(dataItem));
13.    wnd.center().open();
14.}

 

The template:

01.<script type="text/x-kendo-template" id="template">
02.    <form action="#= Url #" method="post">
03.        <div id="action-container">
04.            <h2>#= Title # </h2>
05.
06.            Do you want to perform #= Action # for #= Title # ?
07.        </div>
08.        <button type="submit" class="btn btn-primary">Yes</button>
09.        <button type="reset" class="btn btn-default float-right">No</button>
10.    </form>
11.</script>

 

The problem is that in showDetails() function, I get an error on line 8:

 this.dataItem is not a function.

Also, e.currentTarget is undefined, but $(e).closest("tr") is the containing tr element.

 

 How can I achieve this functionality?

[Martin]

Hello Daniel,

Thank you for the provided code. The error concerning this.dataItem is because you need to get a reference to the Grid to use this method:

var grid = $("#grid").data("kendoGrid");
var dataItem = grid.dataItem(row);

About the e.currentTarget error, that is because "e" in that context is the pressed button, and it does not have a currentTarget property.

Attached you will find a project which opens the Window upon pressing the buttons in the column. Please review it and get back to me if you need further assistance.

Regards,
Martin
Progress Telerik