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

I am using two Telerik Grids adjacent to each other and both of them are synchronised i.e. the first column of the first grid corresponds to and is related to the first column in the second grid. Now we have a column for Edit/Delete(something like this http://demos.telerik.com/aspnet-mvc/grid/buttontext) in both the grids such that all the rows have the button as shown in the link. Now, what I want is that since both the grids are in sync, I want to have the Edit/Delete column in only one of the grids. So, to do this tried the following methods:

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

a) I tried to create a button click event in JQuery for the click event of the Edit or Delete button and then through this function, edit the second grid. But, I couldn't even find the selector tags for the Edit/Delete buttons

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

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

b) Then, after a lot of searching, I found another method of calling a function through the trigger OnEdit.

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

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

But the problem with this method is that, the data bind function of the Telerik Grids are not working when I call "clientevent." Please Help. P.S: I am using ASP.NET MVC.

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

1 个解决方案

#1

There are editRow and UpdateRow functions that can be invoked on a grid object. This should get you started on the right track:

可以在网格对象上调用editRow和UpdateRow函数。这应该让你开始走上正轨：

In this example I created two identical grids, called Clients1 and Clients2 with clientId being the key. The edit buttons are only present on the Clients1 grid.

在这个例子中，我创建了两个相同的网格，名为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>

Attach events to the corresponding buttons

将事件附加到相应的按钮

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

Clients1 grid needs to be edited first, otherwise the lastEditedClientId will not be set.

需要首先编辑客户端1网格，否则不会设置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()
)

Of course this will need extensive error handling.

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

#1