how to show bootstrap modal popup onRowSelect

Jul 22, 2014 at 8:12 PM
When I click on a row in one of my grid tables, I want to show the popup. I have the following code in my javascript function onRowSelect. But I am getting an empty popup. Please help. Thanks.


pageGrids.gridMessages.onRowSelect(function (e) {
        var From = e.row.MessageFrom;
        var subject = e.row.Subject;
        var message = e.row.Message;

        var url = '@Url.Action("ViewMessage", "Home", new { from = "messageFrom", Subject = "messageSubject", msg = "userMessage" })'.replace('messageFrom', From).replace('messageSubject', subject).replace('userMessage', message);

        $('body').on('hidden.bs.modal', '.modal', function () {
            $(this).removeData('bs.modal');
        });
        $('#myModal').modal({
            remote: url
        });
    });


Jul 24, 2014 at 4:10 PM
Nevermind, found the solution. Bukharin thanks for creating this very useful Grid.
Oct 15, 2014 at 4:07 PM
hello gsrakkar,

Could you post the solution you found?

thank you.
Oct 15, 2014 at 4:19 PM
The problem was with in my code. The url was not formatted correctly. I had to use @Html.Raw to format it the right way. The following is the only code that changed.

from

var url = '@Url.Action("ViewMessage", "Home", new { from = "messageFrom", Subject = "messageSubject", msg = "userMessage" })'.replace('messageFrom', From).replace('messageSubject', subject).replace('userMessage', message);

To

var url ='@Html.Raw(Url.Action("ViewMessage", "Home", new { from = "messageFrom", Subject = "messageSubject", msg = "userMessage" })'.replace('messageFrom', From).replace('messageSubject', subject).replace('userMessage', message))';


hope this helps you.
Oct 16, 2014 at 7:33 PM
Thank you,,,

I have a similar scenario, where a modal popup will be a preference, but i find little or not reference in the documentation. Did you have to define 'myModal' code in the MVC View where your grid is placed? Thank you so much.
Oct 17, 2014 at 12:19 AM
Yeah myModal is basically a div that is hidden by default. It has the basic code that fills the modal popup. It's defined in the same view in which your grid is placed. So when some one click on a row in your grid, I am assuming you want to show the row details. In that case you will need to create a partial view that will replace the content in myModal and show the modal. I will try to send you the sample code tomorrow.
Oct 18, 2014 at 12:45 AM
Edited Oct 18, 2014 at 12:47 AM
so the div thats hidden will look like this. This div should be in the same view in which your grid is placed.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

The following div should be placed in your partial view. This content of the hidden div above will be replaced by the content of the div below and the modal will show when the user clicks a row in the grid.
<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">--whatever header you need----</h4>
      </div>
      <div class="modal-body">
        <p>@Model.whatever... you need to show here</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
The javascript I had above will display this partial view.
$('#myModal').modal({
            remote: url  // this url points to your partial view.
        });
For more information with bootstrap modal, you can also look at their site http://getbootstrap.com/javascript/#modals

hope this helps.
Oct 20, 2014 at 1:23 PM
Thank you,,, yes, I am using a Partial View, I am going to try it out. Your approach is very nice.
Nov 7, 2014 at 4:16 PM
Gsrakkar, I wanted to thank you,,, it worked nicely..
Nov 7, 2014 at 4:54 PM
You're welcome. I am glad, I was able to help.
Nov 7, 2014 at 6:50 PM
FYI, I am not sure if you tried Ajax paging, but just in case, I could not find documentation or a working download. I even tried the nuget package,,,, the demo is not in the dowload either,,,
Nov 7, 2014 at 8:56 PM
First you should get the latest version gridmvc. Then you can refer to this page for paging help.

https://gridmvc.codeplex.com/wikipage?title=Paging&referringTitle=Documentation
Nov 7, 2014 at 9:56 PM
Thank you,, I checked the version,,,, I think it is the latest version 3.0.
I am working with that version running the modal popup, it works great. Now I am trying to replicate the Demo using Ajax Paging like: http://gridmvc.azurewebsites.net/Home/AjaxPaging.

But the documentation (http://gridmvc.codeplex.com/wikipage?title=Creating%20ajax%20pager&referringTitle=Documentation) is blank.

I downloaded the source code to test the model site, but when I click on the Ajax Paging menu from my Visual Studio, it does not show like the online demo, It does not have the Ajax. Perhaps version 3.0 is not the last. ??
Nov 11, 2014 at 3:35 PM
I have used paging in gridmvc. But I haven't done any ajax paging in gridmvc yet. You may want to take look at this.

https://gridmvc.codeplex.com/discussions/449038