Grid Detail Template

[Manolo]

Hi,

I need a template grid details similar at your example:

http://asp.syncfusion.com/demos/web/grid/detailtemplate.aspx

In my case, I only need the grid details, but I don't know how fill this grid.

In your example, there are these lines:

// the datasource "window.ordersView" is referred from jsondata.min.js
var data = ej.DataManager(window.ordersView).executeLocal(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true));

But I don't know how get my details executing a store procedure

Can you give me an example?

Thanks

[Balaji Marimuthu]

Hi Manolo,

Thanks for contacting the Syncfusion support.

We have created a sample using SQL query and bind the data to details Grid using AJAX. Refer to the following sample and code example.

Sample: Sample

To render the Grid only in DetailsTemplate, use the Grid element only in the template.

<ej:Grid ID="EmployeesGrid" runat="server" DetailsTemplate="#tabGridContents">

            <ClientSideEvents DetailsDataBound="detailGridData" />

            <Columns>

                <ej:Column Field="EmployeeID" HeaderText="Employee ID" IsPrimaryKey="True" TextAlign="Right" Width="75" />

                <ej:Column Field="FirstName" HeaderText="First Name" Width="100" />

                <ej:Column Field="Title" HeaderText="Title" Width="120" />

                <ej:Column Field="City" HeaderText="City" Width="100" />

                <ej:Column Field="Country" HeaderText="Country" Width="100" />

            </Columns>
        </ej:Grid>

<script id="tabGridContents" type="text/x-jsrender">

        <div class="tabcontrol">

           

                <div id="detailGrid"></div>

        </div>
    </script>

To bind the data to the Details Grid, we suggest you to use the AJAX post and bind the data to success event. In following code example, we have stored the data to the local variable and retrieve data from the local variable (window.ordersData). Otherwise, for every details expand the post request will be sent to the server.

function detailGridData(e) {

           

            if (!window.ordersData) {

                // get data using the ajax

                $.ajax({

                    url: "/Default.aspx/Data",

                    type: "POST",

                    dataType: "json",

                    contentType: 'application/json; charset=utf-8',

                    success: function (result) {

                        window.ordersData = result.d;

                        bindData(e, window.ordersData);

                    },

                    error: function (xhr) {

                        alert('error');

                    }

                })

            }

            else

                bindData(e, window.ordersData);
        }


[Controller]

[WebMethod]

    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

    public static object Data()

    {

                  // use your code here

        DataTable t = new DataTable();

        using (SqlConnection c = new SqlConnection())

        {

            string cons = ConfigurationManager.ConnectionStrings["NORTHWNDConnectionString"].ConnectionString;

            c.ConnectionString = cons;

            c.Open();

            using (SqlDataAdapter a = new SqlDataAdapter("SELECT  top 50 * FROM [Orders]", c))

            {

                a.Fill(t);

            }

        }

                . . . .

        return order;
    }

The details template will render based on the parent Grid data. So we have filtered the data using the ej.DataManager where the filter bind into the details grid. Refer to the Help Documents for more information.
http://help.syncfusion.com/aspnet/grid/row#details-template
http://help.syncfusion.com/aspnet/datamanager/filtering

//EmployeeID field name same as the parent and details grid

function bindData(e, data) {

            var filteredData = e.data["EmployeeID"];

            var data = ej.DataManager(data).executeLocal(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true));

            e.detailsElement.find("#detailGrid").ejGrid({

              . . .

            });
        }

Regards,
Balaji Marimuthu

[Manolo]

Ok! thank you very much! it works perfectly!

Only one suggestion, Would it be possible to change the web example to include a connection in the template grid?

It will be good for other users

[Balaji Marimuthu]

Hi Manolo,

We are happy that the provided information helped you.

We have considered your suggestion as an improvement and it will be refresh in online any of our upcoming release. 

Regards,
Balaji Marimuthu