简体   繁体   English

如何从Kendo网格中包含按钮的列中向ClientTemplate发送值?

[英]How can I send a value from a column in a Kendo Grid containing a button to a ClientTemplate?

I am trying to send an ID from the row in the Grid to a ClientTemplate. 我试图将ID从网格中的行发送到ClientTemplate。 I have a column with a delete button and I want to send the ID of the row clicked on to the ClientTemplate so I can hit the controller with an AJAX call. 我有一列带有删除按钮的列,我想将单击的行的ID发送到ClientTemplate,以便我可以通过AJAX调用来访问控制器。 I know I can do this via a "Url.Action("Action","Controller")" but I am attempting to do this without the page refreshing since the Grid I am dealing with is a child View located within a Kendo Popup Window. 我知道我可以通过“ Url.Action(“ Action”,“ Controller”)“来执行此操作,但是我正在尝试执行此操作而不刷新页面,因为我处理的网格是位于Kendo弹出窗口中的子视图。 I have tried several variations of syntax to no avail. 我已经尝试了几种语法变体,但均无济于事。 Any help in helping to solve this matter would be greatly and truly appreciated. 对于帮助解决此问题的任何帮助将不胜感激。 Below is some of the syntax I have tried..... 以下是我尝试过的一些语法.....

column
.Template(@<text></text>).Width(90)

.ClientTemplate("#= MyDeleteTemplate(CsvSubmittalID) #"); 

.ClientTemplate("<div style='text-align:center'><a class=ActionbuttonDelete href=\"" + Url.Action("DeleteCsvRow", "Project") + "/#=CsvSubmittalID#\"> [Delete] </a></div>");

.ClientTemplate("#= MyDeleteTemplate(CsvSubmittalID)#", <div style='text-align:center'><a class=ActionbuttonDelete [Delete] </a></div>"); 

I need the button to be in the column yet pass the ID of the row to the Javascript without the use of Url.Action 我需要将按钮放在列中,但不使用Url.Action将行的ID传递给Javascript

The below works for me using similar functionality. 下面使用类似的功能为我工作。 I just issue the call via $.ajax{} 我只是通过$ .ajax {}发出呼叫

.... ....

.ClientTemplate("<a style='' id='lnkDelete#=CsvSubmittalID#' onclick='lnkDeleteOnClick(#=CsvSubmittalID#)' href='javascript:void(0)'><strong>${FirstName}, ${LastName}</strong</a>")

... ...

function lnkDeleteOnClick(CsvSubmittalID){
    $.ajax({
        type: "GET",
        url: '@Url.Action("DeleteCsvRow","Project")',
        datatype: "json",
        traditional: true,
        data: {CsvSubmittalID:CsvSubmittalID},
        success: function (data, status, xhr ) {
            var grid = $("#myGrid").data("kendoGrid");
            grid.dataSource.read();    
        },
        error: function (xhr, status, error) {
            console.log(error);    
        }

     });
}

After struggling with this for a day and a half I found the syntax to achieve what I was originally going for. 经过一天半的努力,我找到了实现我最初想要的语法。

 column
     .Template(@<text></text>).Width(90)

     .ClientTemplate("<div style='text-align:center; cursor:pointer '><a class=ActionbuttonDelete onclick=\"MyDeleteTemplate('#=CsvSubmittalID#')\">[Delete]</a></div>");  

And the following is my template that sent the Ajax call.... 以下是我发送Ajax调用的模板。

 function MyDeleteTemplate(CsvSubmittalID)
{
    $.ajax({
        url: '@Url.Action("DeleteCsvRow", "Project")',
        type: "POST",
        data: ({ id : CsvSubmittalID }),
        dataType: "json"
    })

    $('#CsvGrid').data('kendoGrid').dataSource.read();

}

The read() at the end of the Javascript updated the Grid and all is working as expected. Javascript末尾的read()更新了Grid,并且一切都按预期工作。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM