Conditional-Templates

Hi,

I'm programming web site to use the grid with MVC…

I have this example in your web Site 

https://www.igniteui.com/templating-engine/conditional-templates

I want to use  the conditional-Templates to change the color of a specifi cell for the specific value.

I want to know where i can find some MVC example or tell me how i can convert this to MVC.

thx

Hello Michel,

Thank you for contacting Infragistics!

To achieve conditional templates in MVC instead of using a script tag you can just pass in your template as a string, for example:

column.Unbound("Person").HeaderText("Template").Template(“{{if ${age} > 21 }} <tr><td><b>First Name: </b>${firstName}</td><td><b>Last Name: </b>${lastName}</td><td><b>Age: </b>${age}</td></tr> {{/if}}”);

https://www.igniteui.com/help/creating-basic-conditional-template#steps

https://www.igniteui.com/help/creating-conditional-template-containing-default-statement

Hi,

What wrong in the template of the EventDate Column the cell is always empty

@(Html.Infragistics()
.Grid(Model.CleaningTasks)
.ID("grid1")
.Height("500px")
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.Columns(column =>
{
//column.For(x => x.RecordID).HeaderText("#enregistrement");
column.Unbound("EventDateMonth").HeaderText("Mois").Formula("getEventDateMonth").Format("MMM-yy");
column.For(x => x.HouseNo).HeaderText("Bâtiment d'élevage").Template("<b>${HouseNo}</b>");
column.For(x => x.EventDate).HeaderText("Date d'entrée").Template("{{if ${EventDate} < new Date()}}" +
"<div style='background-color:yellow'>${EventDate}</div>" +
"{{elseif ${EventDate} > new Date()}}" +
"<div style='background-color:green'>${EventDate}</div" +
"{{/if}}"
);

column.For(x => x.LastModificationDate).HeaderText("Dernière modif.").Format("ddd, dd MMM yy HH:mm").FormatterFunction("formatColumn");
})
.Features(features =>
{
features.Sorting().Type(OpType.Local);
features.CellMerging().InitialState(CellMergingInitialState.Merged);
//features.Paging().Type(OpType.Local);
//features.Filtering().Type(OpType.Local);
})
.DataSource((from rec in Model.CleaningTasks
where rec.DetailsType == DetailsTypeEnum.Placed
select rec).AsQueryable())
.DataBind()
.Render()
)

Hello Michel,

Thank you for the update. The reason why your cells are empty is the EventDate is being conversted to a string and you are trying to compare a string to a date. So you will have to wrap your EventData in a new Date:

        "{{if new Date(${EventDate}) < new Date()}}" +
               "<div style='background-color:yellow'>${EventDate}</div>" +
               "{{elseif new Date(${EventDate}) > new Date()}}" +
               "<div style='background-color:green'> ${EventDate}</div" +
               "{{/if}}"

Thank you very much !!!

I want you know how i can call a function inside this template ? 

example :

i want to format my EventDate  like this   [new Date(${EventDate}).toLocalDateString()+new Date(${EventDate}).toLocalTimeString()] 

Or calling a function who return me a formatted string

thx

Hello Michel,

To achieve this you would set the format on the column:

http://www.igniteui.com/help/api/2016.2/ui.iggrid#options:columns.format

for example if you want a date and time to display you would set:

column.For(x => x.EventDate).HeaderText("Event Date").DataType("date").Format("dateTime").Template("{{if new Date(${EventDate}) < new Date()}}" +
                                         "<div style='background-color:yellow'>${EventDate}</div>" +
                                         "{{elseif new Date(${EventDate}) > new Date()}}" +
                                         "<div style='background-color:green'> ${EventDate}</div" +
                                         "{{/if}}");

Thanks 🙂