如何在按钮单击事件上触发编辑 Telerik Grid 中的行

Question

我正在使用两个彼此相邻的 Telerik 网格，它们都是同步的，即第一个网格的第一列对应于第二个网格中的第一列并与之相关。现在我们在两个网格中都有一个用于编辑/删除的列（类似于 http://demos.telerik.com/aspnet-mvc/grid/buttontext），这样所有行都有链接中所示的按钮。现在，我想要的是，由于两个网格都是同步的，我希望只在其中一个网格中有编辑/删除列。因此，为此尝试了以下方法：

a) 我尝试在 JQuery 中为编辑或删除按钮的单击事件创建一个按钮单击事件，然后通过此函数编辑第二个网格。但是，我什至找不到编辑/删除按钮的选择器标签

   $("#FirstGridMainInput .t-grid-content .t-button").click(function () {
            // code to edit the corresponding row in the second grid
        });

b) 然后，经过一番搜索，我找到了另一种通过触发器OnEdit调用函数的方法。

         .ClientEvents(e => e.OnRowDataBound("function_to_edit_row"))

但是这种方法的问题是，当我调用“clientevent”时，Telerik Grids 的数据绑定功能不起作用。请帮忙。 P.S：我正在使用 ASP.NET MVC。

Answer 1

可以在网格对象上调用 editRow 和 UpdateRow 函数。这应该会让你走上正确的道路：

在此示例中，我创建了两个相同的网格，分别称为 Clients1 和 Clients2，其中 clientId 是键。编辑按钮仅出现在 Clients1 网格上。

<script type="text/javascript">

    //Finds the row to edit on Clients2 grid based on the cached ClientId.
    //Passes this row to the editRow function.
    function editRow() {
        $('#Clients2').data('tGrid').editRow($($('#Clients2 table tr').find("td:contains(" +lastEditedClientId + ")").parent()))
    }

    //Finds the row to save on Clients2 grid based on the cached ClientId.
    //Passes this row to the updateRow function.
    function saveRow() {
        $('#Clients2').data('tGrid').updateRow($($('#Clients2 table tr').find("td:contains(" + lastEditedClientId + ")").parent()))
    }


    var lastEditedClientId = -1;
    //Attached to the Clients1 grid, onSave event  
    function onSave(e) {
        lastEditedClientId = e.dataItem.ClientId; //Cache the primary key of the Clients1 grid
    }

</script>

将事件附加到相应的按钮

<button id="editButton" onclick="editRow()">Edit Grid 2</button>
<button id="saveButton" onclick="saveRow()">Save Grid 2</button>

需要先编辑Clients1网格，否则不会设置lastEditedClientId。

@(Html.Telerik().Grid<Client>()
    .Name("Clients1")
    .Columns(columns =>
    {
        columns.Bound(o => o.ClientId);
        columns.Bound(o => o.FirstName);
        columns.Bound(o => o.LastName);
        columns.Bound(o => o.City);
        columns.Command(commands =>
        {
            commands.Edit();
        }).Width(200);
    })
    .DataKeys(keys => keys.Add(c => c.ClientId))
    .DataBinding(db1 => db1.Ajax().Select("_Index", "Home").Update("_Update", "Home"))
    .ClientEvents(e => e.OnSave("onSave"))
    .Pageable()
    .Sortable()
    .Filterable()
)

@(Html.Telerik().Grid<Client>()
    .Name("Clients2")
    .Columns(columns =>
    {
        columns.Bound(o => o.ClientId).ReadOnly(true);
        columns.Bound(o => o.FirstName);
        columns.Bound(o => o.LastName);
        columns.Bound(o => o.City);
        columns.Command(commands =>
        {
            commands.Edit();
        }).Width(200).Visible(false);  //Important to have the edit button column, otherwise the editRow() function doesn't work. Set it to be invisible.
    })
    .DataKeys(keys => keys.Add(c => c.ClientId))
    .DataBinding(db1 => db1.Ajax().Select("_Index", "Home").Update("_Update", "Home"))
    .Pageable()
    .Sortable()
    .Filterable()
)

当然，这需要大量的错误处理。