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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid Detail Template

Thread ID:

Created:

Updated:

Platform:

Replies:

122080 Feb 15,2016 03:09 PM UTC Feb 18,2016 07:10 AM UTC ASP.NET Web Forms 3
loading
Tags: Grid
Manolo
Asked On February 15, 2016 03:09 PM UTC

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 [Syncfusion]
Replied On 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" />

            <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
Replied On 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



Balaji Marimuthu [Syncfusion]
Replied On 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. 


Regards,
Balaji Marimuthu


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;