1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. How to show array/list in grid column?

How to show array/list in grid column?

Hello,

Ive implemented the example in the url https://www.syncfusion.com/kb/4807/how-to-show-array-type-field-in-grid-column
but the example displays the first item in the list. I need to display the entire list in the grid column.

I'm using:
Asp.net 4.0 webforms
Essential Studio 13.3.0.7

Problem:

How to bind the array/list data to the grid column?

Meeting Class Structure:

string ID

string Meeting

List<Note> Notes

 

Note Class Structure

string ID

string Descrip

string EnteredBy

string EnteredDate


 

I want to display all the Descrip's from the Notes list in a grid column something like below:

ID  MEETNG             NOTES
-----------------------------------------------------------------------------------
1   Staff Meeting      Policy changes to be implemented next week
                              Blood Drive Wednesday
                              Tech support ticket for printer has been submitted

2  Telecon               Customer needs NDA faxed




5 Replies
SA Saravanan Arunachalam Syncfusion Team December 30, 2015 08:51 AM UTC

Hi Cliff,

Thanks for contacting Syncfusion support.

We have achieved your requirement using “Template” property of the Grid columns and refer to the below code example.

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

         {{for Addresses}}

            <span>{{>Address1}}</span>

            <span>{{>Address2}}</span><br />

         {{/for}}

     </script>


<asp:ScriptManager runat="server"></asp:ScriptManager>

        <div>

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

           

            <Columns>

                <ej:Column Field="ID" HeaderText="ID" IsPrimaryKey="true" Visible="false" >

                </ej:Column>

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

                </ej:Column>

                <ej:Column Field="LastName" HeaderText="Last Name" >

                </ej:Column>

                <ej:Column HeaderText="Address" Template=true TemplateID="#template">

                </ej:Column>

            </Columns>

           

        </ej:Grid>


We have created a sample that you can download from the below link.

http://www.syncfusion.com/downloads/support/forum/121555/ze/TestGrid497971258

Regards,

Saravanan A.


BL bloatus December 30, 2015 05:22 PM UTC

Works perfectly! Thank You!

SA Saravanan Arunachalam Syncfusion Team December 31, 2015 04:54 AM UTC

Hi Cliff,

Thanks for your update.          

We are happy that the provided information helped you.

Regards,

Saravanan A.


SP Sunil patra March 26, 2018 08:34 AM UTC

do this in ej2 grid

PS Pavithra Subramaniyam Syncfusion Team March 27, 2018 01:05 PM UTC

Hi Cliff, 

Currently we don’t have wrapper support for ASP.NET WebForms for Essential JavaScript 2 components. However you can achieve your requirement by using EJ2 Grid with JavaScript  framework in your WebForms application. We have prepared a simple sample based on your requirement in which the . Please refer to the below code example, online demo link and sample link. 

[WebForm1.aspx] 
<script type="text/x-template" id ="template">          
            ${for(item of Name)}  
<span>FirstName:${item.FirstName}</span> &<span>LastName:${item.LastName}</span>  <br> 
${/for}   
   </script> 
 
<body> 
   <div id="Grid"></div> 
    <script> 
         
        var grid = new ej.grids.Grid({ 
            dataSource: complexData, 
            columns: [ 
                
                { field: 'EmployeeID', headerText: 'ID', width: 120 }, 
                { headerText: 'Name', template: '#template' }, 
                { field: 'Title', headerText: 'Title' } 
            ], 
            width:600 
        }); 
        grid.appendTo('#Grid'); 
        </script> 
</body> 
 


Regards, 
Pavithra S. 


Loader.
Up arrow icon