How to Add foreignKeyField Having Multiple Value

[M Asif Abrar]

Hi,

I am getting a list of records with corresponding Tags  from table "BlogPost"  with foreginkey  such as

public class BlogPost{

        public Guid Id { get; set; }

        public string Heading { get; set; }

        public string PageTitle { get; set; }

        .........

        public ICollection<Tag> Tags { get; set; }

    }

public class Tag {

        public Guid Id { get; set; }

        public string Name { get; set; }

        public string DisplayName { get; set; }

        public ICollection<BlogPost> BlogPosts { get; set; }

    }

A blog can have too many tags, so I'm using the Include keyword to include all the tags, such as

public async Task<IEnumerable<BlogPost>> GetAllAsync()

        {

            return await applicationDbContext.BlogPosts.Include(x=>x.Tags).ToListAsync();

        }

it is working well, via debugging its shows that all the tags are coming with each blogpost.

Now How To Show all the tags in e-grid-column ?

The corresponding ASP Code also works well as fallow 

 <tr>

      <td>@blogPost.Id</td>

      <td>@blogPost.Heading</td>

      <td>

                 <div class="d-flex">

                        @foreach(var tag in blogPost.Tags) {

                         <span class="badge bg-primary me-1>@tag.Name></span> }

                 </div>

       </td>

</tr>

[Hemanthkumar S]

Hi M Asif Abrar,

Greetings from Syncfusion support.

Before we proceed with providing a solution, we need some information to better understand your query. Please provide us with the following details:

1. Provide a detailed description of your query and what your expected scenario is. This will help us better understand the problem and provide an appropriate solution.
2. Could you tell “Tags” is a foreign key column and contains multiple values?
3. If “Tags” is a foreign key column then provide the dataSource for the foreign key column.
4. Are you want to render the values in the “Tags” with the help of a column template?
5. Share the complete code for rendering the Grid. Having the full code will allow us to review the implementation and potentially identify any issues or suggest improvements.
6. Provide the version of the Syncfusion package that you are using.
7. Sharing a video or screenshot demonstration would greatly assist us in better understanding your query. It would allow us to visualize the problem and provide more precise guidance or suggestions.
8. If possible share the sample that showcases your query. Having a sample will enable us to directly analyze and validate your query, which can lead to a faster resolution.

We appreciate your cooperation in providing us with the requested information, as it will help us provide a more effective solution to your query.

Regards,

Hemanth Kumar S

[M Asif Abrar]

Hi Sir, 

I attached the related file, now the scenario is that one BlogPost can have too many Tags.

In the BlogPostRepository the GetAllAsync() method fetches all the blog posts including all the related Tags.

I want to create another e-grid-column in the List view which shows all the related tags one by one.

public class BlogPost

    {

        public Guid Id { get; set; }

        public string Heading { get; set; }

        public string PageTitle { get; set; }

        public string Content { get; set; }

        public string ShortDescription { get; set; }

        public string FeaturedImageUrl { get; set; }

        public string UrlHandel { get; set; }

        public DateTime PublishDate { get; set; }

        public string Author { get; set; }

        public bool Visible { get; set; }

        public ICollection<Tag> Tags { get; set; }

    }

public class Tag

    {

        public Guid Id { get; set; }

        public string Name { get; set; }

        public string DisplayName { get; set; }

        public ICollection<BlogPost> BlogPosts { get; set; }

    }

public class BlogPostRepository : IBlogPostRepository

    {

        private readonly ApplicationDbContext applicationDbContext;

        public BlogPostRepository(ApplicationDbContext applicationDbContext)

        {

            this.applicationDbContext = applicationDbContext;

        }

        public async Task<BlogPost> AddAsync(BlogPost blogPost)

        {

            await applicationDbContext.AddAsync(blogPost);

            await applicationDbContext.SaveChangesAsync();

            return blogPost;

        }

        public Task<BlogPost?> DeleteAsync(Guid id)

        {

            throw new NotImplementedException();

        }

        public Task<BlogPost?> UpdateAsync(BlogPost blogPost)

        {

            throw new NotImplementedException();

        }

        public async Task<IEnumerable<BlogPost>> GetAllAsync()

        {

            return await applicationDbContext.BlogPosts.Include(x => x.Tags).ToListAsync();

        }

        public async Task<BlogPost?> GetAsync(Guid id)

        {

            return await applicationDbContext.BlogPosts.Include(x => x.Tags).FirstOrDefaultAsync(x => x.Id == id);

        }

    }

@model List<asifabrar.Models.Domain.BlogPost>

<div class="bg-info bg-opacity-10 py-2 text-center">

    <div calss="container">

        <h1>All BlogPosts</h1>

    </div>

</div>

<div class="container py-5">

    <ejs-grid id="grid" dataSource="@Model" allowPaging="true" allowSorting="true">

        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings>

        <e-grid-columns>

            <e-grid-column field="Id" headerText="Id" isPrimaryKey="true" width="200"></e-grid-column>

            <e-grid-column field="Heading" headerText="Heading" width="100"></e-grid-column>

            <e-grid-column headerText="Action" template="#actionColumnTemplateEdit" width="150"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

</div>

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

    <div class="d-flex flex-row justify-content-start">

        <a class="btn btn-primary w-25 btn-sm" rel='nofollow' href="/AdminBlogPosts/Edit/${Id}">

            <i class="fa-solid fa-pen fa-sm"></i> Edit

        </a>

    </div>

</script>

[Hemanthkumar S]

M Asif Abrar,

Query: I want to create another e-grid-column in the List view which shows all the related tags one by one.

Based on your provided information, we understand that you want to display the values of the Tags field (which is an ICollection) as a list view in a column. To achieve this, we suggest using the column template feature in Syncfusion EJ2 Grid. The column template allows you to customize the display of a column with a custom element.

To implement this, we have prepared a sample-level solution. We recommend adding the column template for the Tags field inside the load event of the Grid. This event allows you to customize Grid properties before rendering. Within the column template, you can create the list view for the Tags field, effectively fulfilling your requirement.

For more information, please refer to the below code example, screenshot, API documentation, and sample.

[Views\Home\Index.cshtml]

 

    <ejs-grid id="Grid" dataSource="@ViewBag.dataSource" load="loadFn" allowPaging="true">

        <e-grid-columns>

            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>

            <e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>

            <e-grid-column field="Tags" headerText="Tags" width="150"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

 

<script>

 

    function loadFn() {

        this.getColumnByField('Tags').template = templateFn;

    }

 

    function templateFn(args) {

        const tags = args.Tags;

        let list = '<ul style="padding: 0px">';

        for (let i = 0; i < tags.length; i++) {

            list += '<li> Id: ' + tags[i].Id + ' Name: ' + tags[i].Name + '</li>';

        }

        list += '</ul>';

        return list;

    }

 

</script>

Screenshot:

load API: https://ej2.syncfusion.com/documentation/api/grid/#load

Please feel free to contact us if you require any further assistance. We are always available and eager to help you in any way we can.

Regards,

Hemanth Kumar S

Attachment: sample955725315_12d7bdaa.zip