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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Detais row with grid

Thread ID:

Created:

Updated:

Platform:

Replies:

123441 Mar 17,2016 02:37 PM UTC Mar 22,2016 08:42 AM UTC ASP.NET Web Forms 4
loading
Tags: Grid
Martin
Asked On March 17, 2016 02:37 PM UTC

Hi,

Just wanna say that your tools are awesome and very good quality.


I'm using your Asp.Net "Grid" but i came from old asp.net programming type.I find your way to do Detail Row,
i would like an easier way to do this cause i'm not a "Javascript expert" but i don't want to use the "Asp.Net Classic"
tools.

Thanks for your help.

Martin K.



Martin
Replied On March 17, 2016 03:38 PM UTC

Hi,

I forgot to say i would like it to be "Hierachytree in GridView"

Jayaprakash Kamaraj [Syncfusion]
Replied On March 18, 2016 03:41 PM UTC

Hi Martin,

Thanks for contacting Syncfusion support.

We have created sample grid with detailtemplate using asp grids. But we have used JavaScript code detailsDataBound client for binding corresponding data to child grid. In detailsDataBound event we need to call ej.widget.init method to refresh child grid models. For rendering child grid like this, we need to enable unobtrusiveJavaScriptEnabled in web.config. Please refer to the following code example, help documentation and sample.


    <script src="../Scripts/ej/ej.unobtrusive.min.js"></script> <div class="frame ">

    <div>

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

            <ClientSideEvents DetailsDataBound="detailsdatabound" />

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

    </div>

    <div id="tabGridContents" style="display:none">

             <ej:Grid ID="Grid1" runat="server" >

                

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

    </div>

        </div>

    <script>

        function detailsdatabound(args) {

            args.detailsElement.find(".e-grid").attr("id", "Grid" + args.data.EmployeeID)

            var id =  args.detailsElement.find(".e-grid").attr("id")

            $("#"+id).empty();

            ej.widget.init($("#"+id).parent());

            var obj = $("#"+id).ejGrid("instance");

            var data = ej.DataManager(obj.model.dataSource).executeLocal(ej.Query().where("EmployeeID", "equal", parseInt(args.data.EmployeeID), true));

            obj.dataSource(data);

         

        }
</script>

Web.config

  <appSettings>

    <add key="PageInspector:ServerCodeMappingSupport" value="Disabled" />

    <add key="vs:EnableBrowserLink" value="false" />

    <add key="UnobtrusiveJavaScriptEnabled" value="true" />


  </appSettings>



Note:  For unobtrusive mode, we need to refer ej.unobtrusive.min.js .The file is located in below location.


Script file:
(installed location)\Syncfusion\Essential Studio\13.3.0.7\JavaScript\assets\scripts\web

Help documentation for detailsdatabound: http://help.syncfusion.com/js/api/ejgrid#events:detailsdatabound

Help documentation for dataSource: http://help.syncfusion.com/js/api/ejgrid#methods:datasource

Sample: http://www.syncfusion.com/downloads/support/forum/123441/ze/SyncfusionASPNETApplication8-1380719215

Regards,

Jayaprakash K.

Martin
Replied On March 21, 2016 06:57 PM UTC

Gave me this error.


Parser Error

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: The base class includes the field 'EmployeesGrid', but its type (Syncfusion.JavaScript.Web.Grid) is not compatible with the type of control (Syncfusion.JavaScript.Web.Grid).

Source Error:

Line 4:  <div class="frame ">
Line 5:      <div>
Line 6:          <ej:Grid ID="EmployeesGrid" runat="server" DetailsTemplate="#tabGridContents">
Line 7:              <ClientSideEvents DetailsDataBound="detailsdatabound" />
Line 8:              <Columns>


Jayaprakash Kamaraj [Syncfusion]
Replied On March 22, 2016 08:42 AM UTC

Hi Martin ,

Thanks for the update.

The issue is due to DLL Conflict. To avoid this issue, please make sure the following things before build your application.
1) Check if multiple versions of Syncfusion assemblies are referred in your project.
2) Delete bin and obj folders exists in the application directory.

3) Check your dll version in reference and webconfig file. And please share those details.

4) Check if you are referring proper dependent assemblies according to the .NET Framework. 

We suggest you to follow the following knowledge base documentation,

https://www.syncfusion.com/kb/3778/how-to-resolve-the-dll-conflict-issue

Regards,

Jayaprakash K.


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

;