We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid Detail Template


I need a template grid details similar at your example:


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?


3 Replies

BM Balaji Marimuthu Syncfusion Team February 16, 2016 11:58 AM UTC

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" />


                <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" />


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

        <div class="tabcontrol">


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


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


                    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) {






                bindData(e, window.ordersData);



    [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;


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





                . . . .

        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.

//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));


              . . .


Balaji Marimuthu

MA Manolo February 17, 2016 07:53 AM UTC

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

BM Balaji Marimuthu Syncfusion Team February 18, 2016 07:10 AM UTC

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. 

Balaji Marimuthu

Live Chat Icon For mobile
Up arrow icon