Mix Template syntax and Razor tag helpers

[Jorge Orellana]

Hello

I am wondering if  this is at all possible. I am looking at migrating some of our existing components to use Syncfusion and there is one thing I can't really figure out if it is even possible.

<ejs-grid id="Grid" allowGrouping="true" allowPaging="true">

        <e-data-manager json="@Model.Events"></e-data-manager>

        <e-grid-groupsettings showDropArea="false" columns="@(new string[] { "EventDate"})"></e-grid-groupsettings>

        <e-grid-pagesettings pageCount=5></e-grid-pagesettings>

        <e-grid-columns>

            <e-grid-column field="EventDate" headerText="Date" width="140" format="E MMM d yyyy" enableGroupByFormat="true"></e-grid-column>

            <e-grid-column field="EventData" template="#templateeventdata" width="120"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

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

                  <partial name="${EventView}" model="e" />  ( I know this does not work as is, but is there any way that I could make that work?)

    </script>

Is there any way to be able to render my partial within the grid and pass along the model? I am thinking no but I am fairly new to syncfusion so apologies if this question is pretty obvious.

Thanks

[Balaji Sekar]

Hi Jorge, 

 

Greetings from the Syncfusion support. 

 

Query: Is there any way to be able to render my partial within the grid and pass along the model? 

No, it is not feasible to define the razor codes inside the “text/x-template”. By default when we set the type “text/x-template” we can define only the HTML elements inside the script tag. So, please elaborate your requirement we will try to provide the solution. 

Regards, 

Balaji Sekar 

[Jorge Orellana]

Thanks for the response. 

I have a entity say Student. When a student gets updated, I am storing the "event" which will tell me small bit of information about what I just update. Right now I am just using a plain Bootstrap group list to show a list of events for that student, each event has its own partial view when they are different enough 

For example:

1. Student was created
2. Student was  updated
3. Student is enrolled in calculus
4. Student is no longer enrolled in calculus
5. Student has enough credits to graduate
6. Student has graduated as a result they are no longer active

Now currently, items 1 and 2 use the same partial view, 3,4 use the same partial view, 5 and 6 for example could have their own view and that is why I want each row in my syncufusion table to show the partial view, the templates for each row vary on based on the event.

 I have already taken care of the logic of which view to display in Model.Events but it seems like for me to get this to work,  I would have to rip my partial views and do the logic and customization in my <script id="templateeventdata" type="text/x-template">

[Balaji Sekar]

Hi Jorge, 

 

Based on your query we suspect that you have bound the column template through partial view in ASP .Net Core and we have render the partial view page to view page(Index.cshtml) using Html.Partial.  

 

Please refer the below code example and sample for more information. 

 

[index.cshtml] 

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

 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" validationRules="@(new { required = true })" width="100"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> 

        <e-grid-column field="EmployeeID" headerText="Employee ID" template="#template" width="120"></e-grid-column> 

        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 

        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script id="template" type="text/template"> 

    <div class="image"> 

        @Html.Partial("_DialogAddPartial") 

        </div> 

</script> 

 

[_DialogAddPartial.cshtml] 

 

@model EJ2Grid.Controllers.HomeController.Orders 

@*//define the model for store the model values*@ 

 

<img src="@Url.Content("https://ej2.syncfusion.com/javascript/demos/src/grid/images/${EmployeeID}.png")" alt="${EmployeeID}" /> 

 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/276400/ze/Grid-DialogTemplate-581205872.zip  

 

For your reference we have shared the Partial view rendering on html page using JavaScript. 

https://stackoverflow.com/questions/11098198/is-it-ok-to-put-javascript-in-partial-views  

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar 

[Jorge Orellana]

Thanks for your response. I wanted to download the sample you provided, however I get this error message:

[Balaji Sekar]

Hi Jorge, 

Based on your query we have shared the provided sample again 

Sample: https://www.syncfusion.com/downloads/support/forum/161056/ze/Grid-DialogTemplate-581205872_(2)204718039.zip  

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar