Open Modal on GridView Row Command

Notes on  How to Open Modal on GridView Row Command.  The Update Panel is important when doing it this way. 



Have the grid and the entire modal within a UpdatePanel.


In the Columns section 

 <asp:CommandField ShowSelectButton="True" SelectText="Detail" />

In the markup put function to
<script type = "text/javascript">
 function openModal() {
        $('#detailModal').modal('show');
    }
</script>

In the row command
 protected void grdDetail_RowCommand(object sender, GridViewCommandEventArgs e)
    {

        if (e.CommandArgument == string.Empty)
        {
            return;
        }

        int index = Convert.ToInt32(e.CommandArgument);
          

        if (e.CommandName.Equals("Select"))
        {
                
            ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "OpenDetailModalScript", "openModal()", false);

        }

    }


And to have the modal vertically, horizontally aligned

  .vertical-alignment-helper {
        display: table;
        height: 100%;
        width: 100%;
        pointer-events: none; /* This makes sure that we can still click outside of the modal to close it */
    }

    .vertical-align-center {
        /* To center vertically */
        display: table-cell;
        vertical-align: middle;
        pointer-events: none;
    }

    .modal-content {
        /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
        width: inherit;
        height: inherit;
        /* To center horizontally */
        margin: 0 auto;
        pointer-events: all;
    }

 The modal markup code


<div id="detailModal" class="modal fade" role="dialog">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog  vertical-align-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">
                             Detail
                    </h4>

                </div>
                <div class="modal-body">
<%-- your content--%>
</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>



Ref
http://www.programming-free.com/2013/02/gridviewrow-details-modalpopup-bootstrap.html
http://stackoverflow.com/questions/18053408/vertically-centering-bootstrap-modal-window


Comments

Post a Comment

Popular posts from this blog

Asp.net Publishing Broke Site - "App_WebReferences is not allowed because the application is precompiled"

When publishing site to live, trying to go to site gives a Server Error – Runtime Error.  Looking in the Application logs on the server  gave " The directory App_WebReferences/ is not allowed because the application is precompiled."   This was causing a bit of stress to a programmer in a our company since he tried to publish a change during business ours.   Solution http://stackoverflow.com/questions/9892646/how-publish-my-web-site When publishing the options that work are to have “Delete all existing files prior to publish”, and “Precompile during publishing” checked.  And “Exclude files from the App_Data” unchecked.
Read more

Telerik - Custom Group Footers In RadGrid

As anyone that has dealt with this knows Telerik only supports a single Group or Header Template.  So what happens when you want to change them?  You really only have two options from what I have seen.  The first option is to have something in the data that is brought back that you can use in the designer code in the form of a conditional.  Too bad I do not see a way to check the data based on level like some sort of ParentID like some people have done.  If the ParentID is null  It would look something like below where you check it in the designer: < asp : Label runat = "server" ID = "Label2" Text = '<%# "Number of items in group: "+ (((GridGroupHeaderItem)Container).AggregatesValues["AvailableUnits"]) %>' Visible = '<%# ((((GridGroupHeaderItem)Container).AggregatesValues["AvailableUnits"]) != null)%>' > Or you can use the code behind to really get at the groupIDs like this per
Read more

Bootstrap Modal Popup is Grayed Out

The popup shows up, but after it pops up the whole page becomes unusable.  So not only was it not displaying right, the whole page is frozen.  I found a StackOverflow post, below describing how the popup may have that behavior when it is nested inside elements that have positioning elements, which fits with previous experiences I have had.  One of the answers described how appending the modal popup to the body of the page  "$('#mytModal').appendTo('body');" would be a way of getting it out of any positioning elements.  Previously on a different page I had moved it out of some divs and it worked right.  However in this particular site the modal is in a ASP.Net site as a user control where the "offending" positioning element is in the master page and it contains the user control.  I stuck the script in the user control, but the behavior was the same.  When I used Firebug I saw that I was getting a "$ is not defined" message. With Jquery we ne
Read more