CODEWITHSUNDEEP
javascriptasp.net-mvcteleriktelerik-grid
ni9e
ni9e

Reputation: 135

How to trigger Editing of row in a Telerik Grid on button click event

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:

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

   $("#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. 

         .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.

Upvotes: 0

Views: 2973

Answers (1)

Igorrious
Igorrious

Reputation: 1618

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

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. 

<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.

@(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.

Upvotes: 1

Related Questions