How to render Grid in Bootstrap modal

1 min read

We can render the grid inside a bootstrap modal by rendering grid inside a “modal-body” class.

While using bootstrap modal we need to refer the “bootstrap.min.js” script file and “bootstrap.min.css” file which are necessary for rendering Bootstrap modal.

Solution:

JS:

<div class="container">
        <h2>Modal Example</h2>
        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog" style="float:left;left: 368px">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <div id="Grid"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
<script type="text/javascript">
// the datasource "window.gridData" is referred from jsondata.min.js
            $("#Grid").ejGrid({
                dataSource: window.gridData,
                columns: [
                        { field: "OrderID", headerText: "Order ID", width: 75},
                        { field: "CustomerID", headerText: "Customer ID", width: 80 },
                        { field: "EmployeeID", headerText: "Employee ID", width: 75},
                        { field: "Freight", width: 75, format: "{0:C}"},
                        { field: "ShipCity", headerText: "Ship City", width: 110 }
                ]
            });
  </script>

MVC:

<div class="container">
    <h2>Modal Example</h2>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog" style="float:left;left: 368px">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    @(Html.EJ().Grid<object>("FlatGrid")
                        .Datasource((IEnumerable<object>)ViewBag.datasource)
                        .AllowPaging()
                        .Columns(col =>
                        {
                            col.Field("OrderID").HeaderText("OrderID").Width(75).Add();
                            col.Field("CustomerID").HeaderText("CustomerID").Width(90).Add();
                            col.Field("EmployeeID").HeaderText("EmployeeID").Width(75).Add();
                            col.Field("Freight").HeaderText("Freight").Width(75).Format("{0:C}").Add();
                            col.Field("ShipCity").HeaderText("ShipCity").Width(100).Add();
 
                        })    )
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div></div>

ASP:

<asp:Content runat="server" ID="Content1" ContentPlaceHolderID="MainContent">
    <div class="container">
        <h2>Modal Example</h2>
        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
 
        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog" style="float: left; left: 368px">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <ej:Grid ID="Grid1" runat="server" AllowPaging="True">
                            <Columns>
                                <ej:Column Field="OrderID" HeaderText="Order ID" Width="75" />
                                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80" />
                                <ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="80" />
                                <ej:Column Field="Freight" HeaderText="Freight" Width="80" Format="{0:C}" />
                                <ej:Column Field="ShipCity" HeaderText="ShipCity" Width="150" />
                            </Columns>
                        </ej:Grid>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</asp:Content>

Result:

Figure: Rendering grid inside a bootstrap modal

Did you find this information helpful?

Yes

Comments (0)

How to render Grid in Bootstrap modal

Access denied