Conditional HTML Properties - How to realize?

[Malcolm]

Hello Dear Telerik Team!

I want to realize a scenario where Html-Attributes are conditionally applied to cells. In a ClientTemplate it would look like
" #if(BooleanProperty) { <p style=\"MyStyle: MyValue\">#= ValueProperty #</p> } else { <p>#=ValueProperty#</p> } "
My Questions now:
1. Is this possible without using a client template?
2. How exactly must the syntax look like?

I hope you can help me...

brgds
Malcolm

[Dimiter Madjarov]

Hello Malcolm,


Using a client template with conditional logic inside is the correct way to go in the current case.

Regards,
Dimiter Madjarov
Telerik

 

 

[Will]

Hi Dimiter,

I have a ForeignKey column that I would rather not create a ClientTemplate for, but would like to conditionally set an html attribute

static: HtmlAttribute( new{ @class = "specialClass" } );

desired pseudo-code...
conditional: HtmlAttribute( "#if (IsSpecial) {# new{ @class = 'specialClass' } #}#");

Is there any way to accomplish conditional HtmlAttributes without using a client template?

Thanks,
Will

[Dimiter Madjarov]

Hello Will,

HtmlAttributes is a server method and is rendered on the server side. This is why a client template cannot be used inside, because the data is read on the client side via Ajax.

Regards,
Dimiter Madjarov
Telerik

 

 

[Curt Rabon]

Why couldn't you allow us to pass a lambda to .HtmlAttributes() that allowed us to specify the attributes based on the value of one of the model properties?

[Dimiter Madjarov]

Hello Curt,

The reason is described in my previous post. HtmlAttributes is a server method and is rendered on the server side, while the data is bound later on the client side via Ajax.

Regards,
Dimiter Madjarov
Telerik

[Sven]

Then please elaborate how I affect the "whole" cell like I could achieve using jquery addClass-method by using the .ClientTemplate which creates in my case a span with class to replace checkbox with an arrow 

[Anton Mironov]

Hi Sven,

In order to achieve the desired behavior, use a function handler in the HtmlAttributes.

In the function handler return the desired content.

Here is an example:

// column configuration
columns.Bound(p => p.OrderDate).HtmlAttributes("attributesHandler");

//handler

function attributesHandler(data) {
  return { title: `Order Date: ${kendo.toString(data.OrderDate, 'dd-MM-yyyy')} ` }
}

Give a try to the approach above and let me know if further assistance or information is needed.

Kind Regards,
Anton Mironov

[Sven]

Thank you for your answer, 

but despite your efforts I was able to solve it using ClientTemplate ^^. Our ClientTemplate checked the data-value for the column and surrounded the field with a <span> Element .. I simply sourrounded the span with a div that received a css class and here I was able to apply the behaviour I was after. (height, background-colour, margin and so on)

[Anton Mironov]

Hi Sven,

Thank you for sharing your approach with the community.

If further assistance or information is needed, do not hesitate to contact me and the team.

Best Regards,
Anton Mironov