How to open a popup, MVC webgrid, dynamic columns

Question

I have a webgrid, which is stated below

@grid.GetHtml(tableStyle: "webgrid", 
              headerStyle: "webgrid-header", 
              footerStyle: "webgrid-footer", 
              alternatingRowStyle: "webgrid-alternating-row", 
              selectedRowStyle: "webgrid-selected-row", 
              rowStyle: "webgrid-row-style"
             )

Since my columns are dynamic i am not defining any columns in the webgrid.

My question is, How do I link a particular column to open a popup?

Please let me know.

Answer 1

Add a class to the item (an achor tag? ) where you want to show a popup when clicking on that. So your HTML may be rendered as something like

<a href="user/details/12" class="aPopup">View details</a>

Now have a little bit of jQuery code to listen to the click event of the link and show a popup. You may simply call the window.open method which opens a page in a new window or use plugin to show a model popup.

$(function(){
  $("a.aPopup").click(function(e){
     e.preventDefault();

     var popupUrl=$(this).attr("href");

     //code to show popup here
     //window.open or model popup plugin call

  });    
});

There are a number of plugins there to show a model popup. check out jQuery UI dialog.