CODEWITHSUNDEEP
c#asp.net-mvc
pep
pep

Reputation: 1

MVC pass data from one grid to another grid

Updated: I have uploaded a simple solution with my 2 grids in it. When I double-click on the first grid I can get the Row ID but who to pass it on "into" the second grid ??...I dont get it ..please help

The solution are uploaded to this URL --> http://www.4shared.com/file/HPRynWG8/MvcApplication1.html

Pep

I have a problem with my 2 grids (MVC 2.0) When I double-click on a row in the first grid, the second grid should reload and show detailed data matching the clicked row from the first grid. But how do I pass the row ID from the first grid into the second grid ( to the controller function) ??

Pep

Upvotes: 0

Views: 1425

Answers (3)

Rune
Rune

Reputation: 8380

Have each row in the first grid contain a hidden input field containing the entity / row id (or give each row an id or class like 'ROWID'). Then use jQuery to do something like 

$(document).ready(function() {
  $('#firstgrid tr').dblclick(function(){
    var id = $(this).find('input').val();
    var urlToRequestDataFrom = /* built using the id above */
    $.ajax(/* request data and update second grid */);
  });
});

To update the second grid you can just render all of it on the server and use jQuery's .html() to insert the rendered grid in your page. Alternatively, return a JSON result from the server and render it using custom DOM manipulations using jQuery's methods for DOM manipulation or take a look at the templating system.

More references:

jQuery, dblclick

To retrieve data use jQuery get or jQuery ajax

Upvotes: 1

jim tollan
jim tollan

Reputation: 22485

pep,

you'll need to do this via an ajax call that uses your rowid. If you've got your table structure setup with id's per row, then you're good to go. the functionality would be along the following lines (assuming jquery):

$(document).ready(function() {
    $('#grid1 tr').dblclick(function(){
        var id = $(this).attr('id');
        var url = '<%=Url.Action("Details")%>/' + id;
        // now call your controller action with this id via $ajax()
        $.ajax(/* your core code here */);
    });
});

Your called action should then populate a partialview with the data. This in turn would target the div id of the target table on the page.

I'm assuming a familiarity with jquery/ajax - hope this helps

Upvotes: 0

Daveo
Daveo

Reputation: 19912

See here Master-Detail View ASP.NET MVC

asp.net MVC - How to do a master/detail page

Upvotes: 0

Related Questions