This is a migrated thread and some comments may be shown as answers.

How to using ClientTemlate with custom class()

6 Answers 478 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kemal
Top achievements
Rank 1
Kemal asked on 13 Sep 2017, 11:12 PM

Hi, i'm trying to render the value in class.

a.Bound(p => p.Username)
    .Title("User Picture")
    .ClientTemplate("<span>#=Username#</span><img src='" + CustomClass.GetPicture("#=Username#") + "'>");
 
#=UserUsername# not getting a value. But <span>#=Username#</span> working with rendered value (john.smith).
 
when i write name as string in class, it's working and i'm getting the user picture;
 
a.Bound(p => p.Username)
    .Title("User Picture")
    .ClientTemplate("<span>#=Username#</span><img src='" + CustomClass.GetPicture("john.smith") + "'>");

Thank You

6 Answers, 1 is accepted

Sort by
0
Kemal
Top achievements
Rank 1
answered on 14 Sep 2017, 07:09 AM
By the way, my CustomClass.GetPicture(Username) class;

public
class CustomClass
{
   public static string GetPicture(string Username)
   {
       var authType = GetConfigElement("userAuthType");
       if (authType == "LdapAuth")
       {
           AuthorizeAdAttribute.GetThumbnailPhotoFromLdap(Username);
       }
       string imgSrc;
       if (File.Exists(HttpContext.Current.Server.MapPath("~/Files/Uploads/UserThumbs/" + Username + ".jpg")))
       {
           var projectPath = GetConfigElement("projectPath");
           imgSrc = projectPath + "/Files/Uploads/UserThumbs/" + Username + ".jpg";
       }
       else
       {
           imgSrc = "/Content/images/avatars/avatar.png";
       }
       return imgSrc;
   }
}
0
Stefan
Telerik team
answered on 15 Sep 2017, 11:22 AM
Hello Kemal,

Please have in mind that the .ClientTemplate() is executed on the client and it does not have access to the C# classes which are defined on the server.

When the .ClientTemplate() is used we recommend using a custom function on the client to perform the calculations and return the value:

http://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-to-apply-conditional-logic-to-client-column-templates

http://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-to-use-javascript-functions-in-client-column-templates

Let me know if you need additional information on this matter.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Kemal
Top achievements
Rank 1
answered on 15 Sep 2017, 01:44 PM

Hello Stefan

i will try with custom function,

but c# class working with static data (john.smith) in .ClientTemplate()

what is difference? wrong parenthesis or wrong double quotes or single quotes?

CustomClass.GetPicture("john.smith") working
CustomClass.GetPicture("#=username#") not working (i think 
0
Kemal
Top achievements
Rank 1
answered on 16 Sep 2017, 10:09 PM

my class getting string as "#=userusername#"... Not with dynamic value... 

I still think the same thing. i think the problem is quotes or parenthesis...

by the way;

i made some controller modification and now every users pictures are listing perfectly. i'am getting full image location from controller. 

so i'm not using class in .ClientTemplate

<img width='30' src='#=WholePicLocation#' />

But i still want to how I can use dynamic variable in class("x") instead of static data.

Thank you

0
Stefan
Telerik team
answered on 19 Sep 2017, 06:35 AM
Hello Kemal,

I'm glad to hear that the functionality is working as expected.

As for passing the value dynamically, as mentioned the template is executed on the client. The class will be called, but the value passed on it will be evaluated on the client, that is why the value is received as a string originally as it is still not evaluated. Passing directly the value works as the template does not need to be evaluated in order to provide the correct value as the value is already set.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Kemal
Top achievements
Rank 1
answered on 19 Sep 2017, 12:10 PM

i got it, i am learning Mr. Stefan.

Thank you 

Tags
Grid
Asked by
Kemal
Top achievements
Rank 1
Answers by
Kemal
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or