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网格的数据绑定功能不起作用。请帮忙。 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()
)

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

如何触发按钮单击事件在Telerik网格中编辑行

1 个答案: