i have another question regarding columns in the grid.
When i have a client template something like this
......
@(Html.Kendo().Grid<MyProject.ViewModels.TestViewModel>()
.Name("Grid")
.Columns(columns =>
{
.columns.Template(x => { }).ClientTemplate("<a href='#'><img src="" alt=""></img></a>").Width(100)
......
}
but is huge on several lines, for example
@"<a class='k-button' href='javascript: void(0)' onclick='doLoading(this)' style='min-width:32px!important'><span class='k-icon k-edit'></span></a>
<a class='k-button' href='javascript: void(0)' onclick='deleteRow(this);return false;' style='min-width:32px!important'><span class='k-icon k-delete'></span></a>"
can i use a javascript function that return all this html string ?
Regards,
Daniel
15 Answers, 1 is accepted
Yes you can. A Kendo Template can include any JavaScript code. Here is how:
.ClientTemplate("#= template(Property1, Property2)#);
<script>
function template(property1, property2) {
var html = "<a>";
html += property1;
html += property2;
html += "</a>";
return html;
}
</script>
Atanas Korchev
the Telerik team
Rank 1
Rank 1
Rank 1
there is still a problem,i have also a lot of html code in the toolbar of the grid,where i am using something like
.Toolbar(toolbar=>toolbar.Template("<a><img>....")
but in this case it seems i cannot use the template method that you gave me .if i put .ToolBar(toolBar => toolBar.Template("#= addCustomToolbar()#"
it appears literally ,the content of the template as a string so "#= addCustomToolbar()#"
how do i solve this?to replace also in toolbar a html code,using javascript or there is another way other than javascript?
Regards,
Daniel
The toolbar template isn't evaluated on the client side. You can use a razor template delegate to define it
toolbar.Template(@<text>
<a><img></a>
<p>some text</p>
</text>)
Atanas Korchev
the Telerik team
Rank 1
.ToolBar(toolBar => toolBar.Template(@"<a id='addSome' class='k-button k-button-icontext k-grid-add' onclick='createRow()' href='javascript: void(0)'><span class='k-icon k-add'></span>adauga</a>
<span id='spanAdd' style='display:none;font-size:150%;margin-top:25px'><b>Adaugare</b></span>
<span id='spanEdit' style='display:none;font-size:150%'><b>Editare</b></span>
<div style='float:right;color:black;font-size:150%'><b>Unitati de masura</b></div>
"
))
and because it will be the same for every
grid,how can i do no to repeat myself in each page where i add the grid.
I was thinking about that javascript function ,or some other way,server-side to make this template reusable.
Regards,
Daniel
You can use a constant string.
All the best,Atanas Korchev
the Telerik team
Rank 1
The template option of the grid toolbar isn't executed on the client-side. You can either set it to a string which will be output as it is or to a template razor delegate @<text></text>. It is up to you to decide how to reuse code and constants. This isn't something which we can decide for you.
Greetings,Atanas Korchev
the Telerik team
Rank 1
and the best way is to show some code example with my scenario,a function for toolbar that returns html code,but it has inside also a javascript function with some string parameters.
Regards,
Daniel
We are still not sure what you are after. Please show us your current code and explain which parts you would like to customize.
As I said for a few times the template of the toolbar is *not* executed on the client-side as the ClientTemplate of the column. There is a simple convention - client-side template contain "client" in their name. Thus we cannot give you a JavaScript version of the toolbar template. The template only accepts strings and razor delegates.
Atanas Korchev
the Telerik team
Rank 1
a toolbar with a template something like this
.ToolBar(toolBar => toolBar.Template(@"<a id='addSome' class='k-button k-button-icontext k-grid-add' onclick='createRow(\"'text1\")' href='javascript: void(0)'><span class='k-icon k-add'></span>add</a>
<span id='spanAdd' style='display:none;font-size:150%;margin-top:25px'><b>Add</b></span>
<span id='spanEdit' style='display:none;font-size:150%'><b>Edit</b></span>
<div style='float:right;color:black;font-size:150%'><b>Units</b></div>
"
))
and i need to create a generic myGrid template,until now i created a class something like this
namespace Namespace.Infrastructure
{
public static class MyHtmlHelperExtensions
{
public static Kendo.Mvc.UI.Fluent.GridBuilder<T> MyGrid<T>(this HtmlHelper helper, string name)
where T : class
{
return helper.Kendo().Grid<T>()
.Name(name)
.Sortable()
.Scrollable()
.Filterable()
}
in that toolbar template i have a javascript function with a string parameter,and i would like to pass also this long template inside this extension method,
but to take in account that the javascript function is different each time i use this extension method,and also it has a different string parameter
so for the onclick event in that toolbar template the javascript function it could be
createRow('text1') ,DoStuff('text2'),DoStuff('text3'),DeleteRow('text4'),etc
Regards,
Daniel
In that case I can suggest you use string.Format. Define your common template contents as a const string and leave a format placeholder in there: "{0}". Then use string.format to pass the JavaScript function when you use the template:
toolbar.Template(string.Format(ToolBarTemplate, "createRow('Text1')"))
Atanas Korchev
the Telerik team
Rank 1
Rank 1
Thank you again for the ideea.it was tricky.
Regards,
Daniel