[Solved] Feeding Objects into Client template to perform differently based on objects assigned value

[Lp1]

//.ClientTemplate("<# { #><span style='color:[object]'>[object]</span><# } #>")

I'm trying to see if there is anyway to use jscript to feed an object into 'color: [object]' but to have this affect the whole cell or just text and if I had to do it the same way as shown above then to also feed the actual date value into the 2nd [object]

If this is possible then I would guess I'd use jscript to find out the value for each object.

This was previously covered in point 5 here and here.

[Atanas Korchev]

Hello Lp1,

 The whole data item is available in the client template. You can use all its properties to make the final html. Consider this model:

public class Customer
{
        public int ID
        {
              get;
              set;
        }

        public string Name
        {
             get;
             set;
        }
}

Say you want to color red the Name cell if ID is greater than 1 and color it green if ID is less than or equal to 1. Here is how you could do it via the ClientTemplate:

columns.Bound(c => c.Name).ClientTemplate("<# if (ID > 1) { #><span style='background:red'><#= Name #> <# } else { #> <span style='background:green'><#= Name #><# } #>") ;

I am sending a running project showing the same.

Regards,

Atanas Korchev
the Telerik team

[Lp1]

I knew that much from the original posts you made on SO but since my problem revolves around 4 conditions this wouldn't work which is why I was wondering if I could but an object in the client template like '#Colourflag' which wouldn't have a static value.

I'm also wondering why you didn't reply to this question in my original question when I raised this in point 5?

[Atanas Korchev]

Hi Lp1,

I can't reply to something which I don't understand. I find it difficult to understand your requirements. For example I don't understand this statement:
"my problem revolves around 4 conditions this wouldn't work which is why I was wondering if I could but an object in the client template like '#Colourflag' which wouldn't have a static value."

What do you mean by this "I was wondering if I could but an object in the client template"? 

If you have complex conditions to check against you can call a JavaScript function which will built the template based on the provided values. Something like this:

columns.Bound(c => c.Name).ClientTemplate("<#= myTemplate(ID, Name) #>");

<script>

function myTemplate(id, name) {
      if (id > 1) {
           return "<span style='background:red'>" + name + "</span>";          
      } else {
           return "<span style='background:green'>" + name + "</span>";
      }
 }
</script>

Regards,
Atanas Korchev
the Telerik team

[Lp1]

This is close to what I was meaning so I hope this makes it clearer, my hope was to have both the colour and object be dynamic since what your showing right now would only provide me 2 results so for more complex functions it would be able to provide needed results.

ideally the if statement would be

if(date !=null) { return "<span style='background:+ colour +'>" + date + "</span>";}

and otherwise with part of my solution to my original topic was with using a 2nd hidden field to display the colour for each col item like u can see below

if (e.dataItem.C1D == "green") {

                   e.row.cells[1].style.backgroundColor = "green";
               }

this ofc meaning if the hidden col which displays the colour based off the controller calc for any item in col 1 is green then it will colour that cell green but ofc this means for each col I need to repeat this code for all colours I want to use.

It would be nice if I could roll it all into the single row and just use client template but that's strict on whether I can pull the colour and fit it into the span otherwise my way works but I think it should be possible to change it slightly and get it to be something like  

e.row.cells[1].style.backgroundColor = "+ colour +";

and of the if statment would be != null instead of  == "blah" then I would only need 1 if statement per col.

But as mentioned before I've not used much jscript so although I have ideas about how I'd like things to work I don't know just how feasible it all is or how to go about implementing it but ofc I'm eager to learn hence the 20Q's even tho I've got a solution albeit a very messy long winded one.

[Atanas Korchev]

Hello Lp1,

I still don't understand everything you are writing but I think you want the whole data item to be available in the function which determines the template. You can do so like this:

.ClientTemplate("<#= tmpl(data) #>")

<script type="text/javascript">
   function tmpl(dataItem) {
    return "<strong>" + dataItem.CustomerID + "</strong>";
   } 
</script>

The client template must return a string which is used as the content of the cell. If you must have access to the whole table row a client-template will not be enough - you have to use the OnRowDataBound event where the dataItem and table row are available. 

Regards,

Atanas Korchev
the Telerik team