EzDevInfo.com

client-templates

HTML5 SSE, client templating, web components, helper CSS

Pass 2 parameters to function in ClientTemplate of Telerik grid in Asp.net mvc3

I want to send two parameters to a function in a ClientTemplate of a Telerik Grid in Asp.net MVC3.

I did something like this:

 columns.Bound(m => m.ID).Title("Delete").ClientTemplate("<a rel='nofollow' href='#' title='Delete' onclick='return DeleteData(<#=ID#>,<#=Name#>)'><SPAN class='delete'></SPAN></a>").Width(53);

But this is not working.

In this ID field is an int field and Name is a string type field. How can I accomplish this task? Can anyone please help me??????


Source: (StackOverflow)

add css to a cell through client template in a kendo grid

My cols are defind as belwo

x.Bound(y => y.IsStudentIn).Hidden(true);
x.Bound(y => y.Student).ClientTemplate("# if(IsStudentIn== false) {# <span style = \" background-color:red; \"></span>#}#");

if IsStudentIn = false, I want the Student cell to turn red color. Tried the above way, its not working. How to add css to this specific td


Source: (StackOverflow)

Advertisements

ASP.NET AJAX Client Templates - Jquery Equivalent

I've been looking at ASP.NET AJAX Client Templates.

My position is that I prefer to use Jquery rather than ASP.NET AJAX as I feel this will win the day in the long term.

Are there Jquery plugins/functionaility that provide the same kind of help for rendering that client templates do in ASP.NET AJAX?


Source: (StackOverflow)

Are there any ASP.NET template technologies which can be used both client and server-side?

Currently I'm working with ASP.NET 2.0, which may explain why I'm not as up on this as I might be. However, I don't see a full solution in my Googling of ASP.NET MVC, etc.

Here's my background thinking.

Firstly, data-bound templates are really useful. I'm currently dealing with lots of legacy code whereby people are building up controls programmatically, both on the client and the server, and it's a huge pain.

Secondly, sometimes you want controls to be data-bound on the client, sometimes on the server. The most obvious case for databinding on the server is where you're trying to account for people turning off javascript. But issues of speed, caching, bandwidth etc. all play their part as to deciding where to bind.

Now, on the server I can write UserControls with databinding points. And on the client I can write templates and bind them with JQuery (I'm currently using the microtemplating engine by John Resig as amended by Rick Strahl). But ideally there should be a way to write a template once and let the plumbing make it available for both server and client-side data binding. I guess that XML/XSLT would be one approach to this, but a horrible one. So what else is there? It needn't be an ASP.NET 2.0 solution; I'd just like to think that somewhere there is a fix.


Source: (StackOverflow)

Calling Helper Within If Block in Handlebars Template

I am working with Handlebars.js template engine and am trying to figure out a way to do something like this (contrived example):

{{#if itemSelected "SomeItem"}}
    <div>This was selected</div>
{{/if}

where itemSelected is a registered helper like this:

Handlebars.registerHelper("itemSelected", function(item) {
    var selected = false;
    // Lots of logic that determines if item is selected
    return selected;
});

I get errors when trying to use this syntax for the template, and I cannot find any example showing this kind of thing. I do see simple #if blocks like this...

{{#if myValueInContext}}
    <div>This will show if myValueInContext results in a truthy value.</div>
{{/if}}

But, I can't figure out how to tackle the first example. Maybe I am approaching this wrong.

By the way, I tagged this Mustache as I could not add a Handlebars tag to the question.


Source: (StackOverflow)

How to set font-weight of a column text to bold based on another column value in Telerik Grid

I have a Telerik grid in which based on whether my IsTrue value is true or false, I need to set the font-weight of Name text in only that particular row to bold. I tried the following but I seem to be missing something.

columns.Bound(d => d.IsTrue).Width(0).HtmlAttributes(new { id="hdnIsTrue", style = "visibility:hidden;" });
columns.Bound(d => d.Name).ClientTemplate("#<#= hdnIsTrue ? font-weight : bold : font-weight : normal #>#" + "# } #")
                            .Title("Name").Width(200);

Source: (StackOverflow)

Does ASP.NET AJAX 4.0 tout client-side templating with the jQuery Templates plug-in?

I am a little lost on what happened with ASP.NET AJAX 4.0 with regard to the push for client templates with the jQuery Templates plug-in (which is still in beta) and/or whatever proprietary flavor of the same thing that it had. I thought I heard months ago that Microsoft had abandoned the push for jQuery Templates and that ASP.NET AJAX 4.0 was released (??) with these features that had been featured in the betas and CTPs stripped out. Is this true?

More specifically, what features were removed from ASP.NET AJAX 4.0 between the big, heavily touted preview and the RTM? What stayed?


Source: (StackOverflow)

Emitting Javascript from jquery templates

i want to emit some js from jquery templates e.g i have template like

<script id="tmplID" type="text/x-jQuery-tmpl">
<input id="static.${val}" type="text"/>
<input id = "static2.${val}" type="text"/>
<script type="text/javascript">
$('#static.'+${val}).change(function(){
  alert('some value');
});
</script>
</script>  

when i call this template like

var obj = {val:'123'};
$('#tmplID').tmpl(obj).appendTo("some_container");

it renders the javascript change function as string on the page whereas i want it to be appended as executable javascript.
I appreciate any help
regards


Source: (StackOverflow)

Using Pre-Compiled Templates with Sammy

Sammy has a lot of features for working with template languages. However, when working with brunch, the server pre-compiles all the templates for me, which is very much desired.

So they're all available as java-functions, how can I use those with Sammy?


Source: (StackOverflow)

how customize filtering Client Template kendo grid column asp.net mvc 5

I have a kendo grid that contain a column with client template containing three type of icone, I would like to be able to filter this column with the three icon but i didn't find a solution for my question ? please help me this is my code:

columns.Bound(p => p.x).ClientTemplate(
            " # if (x == -1) { #  <img src='***** />  # } #"
             + " # if (x == 0) { #  <img src='***# } #"
             + " # if (x == 1) { #  <img src='**** />   # } #"
            ).Filterable("???????").Title("").Width(20);
        columns.Bound(c => c.Code)
            .Groupable(false);

Any help please


Source: (StackOverflow)

Can I return a DataTable to fill an ASP.NET AJAX Client Template?

The following Server-Side code works:

[OperationContract]
public IEnumerable<object> GetBooks() {
    var people = new List<object>
                     {
                        new Book{ Author="Richard Preston", Title="The Hot Zone"},
                        new Book{ Author="Jim Norton", Title="I Hate Your Guts"}
                     };
    return people.AsEnumerable();
}

Here is a portion of the Client-Side code:

<table class="Template">
    <thead>
        <tr>
            <th>Author</th>
            <th>Title</th>
        </tr>
    </thead>
    <tbody id="bookListView">
        <tr>
            <td>{{Author}}</td>
            <td>{{Title}}</td>
        </tr>
    </tbody>
</table>

function pageLoad() {
    $create(Sys.UI.DataView, { serviceUri: "MyService.svc", query: "GetBooks" }, {}, {}, $get("bookListView"));
}

I'd like to be able to return a DataTable to the client, and populate the client template by simply referencing each column's name. Is that possible?


Source: (StackOverflow)

How can I send a value from a column in a Kendo Grid containing a button to a ClientTemplate?

I am trying to send an ID from the row in the Grid to a ClientTemplate. I have a column with a delete button and I want to send the ID of the row clicked on to the ClientTemplate so I can hit the controller with an AJAX call. I know I can do this via a "Url.Action("Action","Controller")" but I am attempting to do this without the page refreshing since the Grid I am dealing with is a child View located within a Kendo Popup Window. I have tried several variations of syntax to no avail. Any help in helping to solve this matter would be greatly and truly appreciated. Below is some of the syntax I have tried.....

column
.Template(@<text></text>).Width(90)

.ClientTemplate("#= MyDeleteTemplate(CsvSubmittalID) #"); 

.ClientTemplate("<div style='text-align:center'><a class=ActionbuttonDelete rel='nofollow' href=\"" + Url.Action("DeleteCsvRow", "Project") + "/#=CsvSubmittalID#\"> [Delete] </a></div>");

.ClientTemplate("#= MyDeleteTemplate(CsvSubmittalID)#", <div style='text-align:center'><a class=ActionbuttonDelete [Delete] </a></div>"); 

I need the button to be in the column yet pass the ID of the row to the Javascript without the use of Url.Action


Source: (StackOverflow)

Did Client Templates in ASP.NET AJAX 4.0 get dropped entirely, in favor of the jQuery Templates plug-in?

I think that Microsoft dropped client templates from the AJAX Toolkit in favor of jQuery Templates plug-in. I'm trying to find full documentation on this and except for some "will do" blog posts such as this one I am unable to find anything except @#$%-loads of bogus, obsolete documentation and magazine articles from the Preview / Beta days of ASP.NET AJAX 4.0.

Can anyone please confirm that the ASP.NET AJAX 4.0 Client Templates feature is, in fact, jQuery Templates, officially, and that there is absolutely no Sys.* equivalent in the current Microsoft libraries for client templates?


Source: (StackOverflow)

Kendo Grid ClientTemplate conditional column

I am working with ASP.NET MVC 4 with Kendo UI(kendo grid).Below is sample code of Kendo Grid -

@(Html.Kendo().Grid(Model.Users).Name("Grid").Columns(columns =>
{
   columns.Bound(p => p.FirstName);
   columns.Bound(p => p.LastName);
   columns.Bound(p => p.UserName);
   columns.Bound(p => p.Email);   
   columns.Bound(o => o.IsActive).ClientTemplate(links).Title("Action");      

})

In the above code my IsActive column have some links for Actions like Edit,Update,Delete.And i am adding those links into Kendo grid by links variable.And I want to use links variable on the basis of conditions.Means i want conditional ClientTemplate here.

So anyone suggest how can make a conditional ClientTemplate in kendoGrid ?

2) Also i want to add condition on the basis on the bool field value of my model(Model.Users).

So i want to know how we can get that field from Model.Users model in kendo grid for each row.Like -

.ClientTemplate(if(IsAdmin && ViewBag.IsActive){.....} else{....})

Source: (StackOverflow)

Asp.net Client Templates -

Is it possible to re-use a client-template using asp.net ajax 4.0 client templates? I have a scenario as shown in the example below. I have two questions here:

  1. I could not get the if conditionwork in client-template
  2. How can I re-use the u l tag template for three types of "column" data (col1, col2, col3 in example json)?

sample code:

<style>
    .sys-template { display:none; }
    .list {width:220px; float:left;  margin:0px 0px 0px 10px; background-color:#f2f2f2; }
    </style>

    <script src="MicrosoftAjax.debug.js" type="text/javascript"></script>
    <script src="MicrosoftAjaxTemplates.debug.js" type="text/javascript"></script>

    <script type="text/javascript">
        var listItems = [{ item: "item1", col: "col1" },
        				 { item: "item2", col: "col1" },
        				 { item: "item3", col: "col1" },
        				 { item: "item4", col: "col2" },
        				 { item: "item5", col: "col2" },
        				 { item: "item6", col: "col2" },
        				 { item: "item7", col: "col2" },
        				 { item: "item8", col: "col3" },
        				 { item: "item9", col: "col3" },
        				 { item: "item10", col: "col3" }]
    </script>
    </head>

    <body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="*">
    <ul id="col1" class="list sys-template"  sys:attach="dataview" dataview:data="{{ listItems }}">
        <!--* if (col=="col1") { *-->
        <li>{{item}}</li>
        <!--* } *-->
    </ul>
    <ul id="col2" class="list sys-template"  sys:attach="dataview" dataview:data="{{ listItems }}">
        <!--* if (col=="col2") { *-->
        <li>{{item}}</li>
        <!--* } *-->
    </ul>
    <ul id="col3" class="list sys-template"  sys:attach="dataview" dataview:data="{{ listItems }}">
        <!--* if (col=="col3") { *-->
        <li>{{item}}</li>
        <!--* } *-->
    </ul>
    </body>

Source: (StackOverflow)