Detais row with grid

[Martin]

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]

Hi,

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

[Jayaprakash Kamaraj]

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]

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]

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.