Send parameter(id) on Onclick action grid Column

1 Answer 3023 Views
Grid
wajdi
Top achievements
Rank 1
Iron
wajdi asked on 25 Jun 2021, 10:23 AM | edited on 25 Jun 2021, 12:46 PM

Hello,

how can i send a id parameter on Onclick delete action javascript, this is my code. i don't want to use action link because i'm using ajax call

Thanks for helping.

 


@(Html.Kendo().Grid(Model)
            .Name("Conventions")
            .Columns(columns => {
                columns.Bound(c => c.Libelle).Width("450px");
                columns.Bound(c => c.DateEnvoi).Format("{0:dd/MM/yyyy}");
                columns.Bound(c => c.Statut.Libelle).Title("Statut");
                columns.Template(@<text></text>).ClientTemplate("<span class='k-icon k-i-delete' id='deleteIcon'></span>").HtmlAttributes(new { onclick = "onDeleteConvention()" }).Width("40px");

            }).NoRecords("Pas de conventions trouvés")
            .Scrollable().Height(200).DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .ServerOperation(false)
                .Model(model =>
                {
                    model.Id(p => p.ConventionId);
                    model.Field(p => p.Libelle).Editable(false);
                    model.Field(p => p.DateEnvoi).Editable(false);
                    model.Field(p => p.Statut.Libelle).Editable(false);
                })
             )
            )

1 Answer, 1 is accepted

Sort by
0
Accepted
Ivan Danchev
Telerik team
answered on 30 Jun 2021, 08:54 AM

Hello wajdi,

To send the id modify the column's template so that you can pass the id to the onDeleteConvention function:

columns.Template(@<text></text>).ClientTemplate("<span class='k-icon k-i-delete' id='deleteIcon' onclick='onDeleteConvention(#: OrderID#)'></span>").Width("40px");

Replace OrderID with the actual field you use.

It will be passed to the function and then you can sent it as a parameter to an action. For example:

function onDeleteConvention(id) {
	console.log(id);

	$.ajax({
		type: "POST",
		url: '@Url.Action("ActionName", "ControllerName")',
		contentType: "application/json; charset=utf-8",
		data: {
			id: id
		},
		dataType: "json",
		success: function (response) {
			alert('success');
		},
		error: function () {
			alert('error');
		}
	});
}

Regards,
Ivan Danchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
wajdi
Top achievements
Rank 1
Iron
Answers by
Ivan Danchev
Telerik team
Share this question
or