use of javascript functions

16 posts, 1 answers
  1. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 19 Apr 2013 Link to this post

    Hello ,
    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
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 19 Apr 2013 Link to this post

    Hi,

     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>

    Greetings,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 22 Apr 2013 Link to this post

    Ok,thank you,i will try what you said.

  4. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 24 Apr 2013 Link to this post

    it's ok for now,something like that i was looking for.
  5. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 25 Apr 2013 Link to this post

    Hello,
    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
  6. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 25 Apr 2013 Link to this post

    Hello,

     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>)

    Greetings,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 25 Apr 2013 Link to this post

    yes but when i have a lot of html to put inside the toolbar template, like this

    .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
  8. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 25 Apr 2013 Link to this post

    Hi,

    You can use a constant string.

    All the best,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 26 Apr 2013 Link to this post

    and if that constant,it has a javascript function inside,which may vary,then how can i manage that?
  10. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 26 Apr 2013 Link to this post

    Hi Daniel,

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 29 Apr 2013 Link to this post

    it's not about to decide for me,it's about kendo limitations that pushes me to find solutions ,because the mvc wrappers for kendo ui are not a mature product like rad ajax controls and i do not have a comprehensive organized documentation,so i need some help to see some things.
    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
  12. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 29 Apr 2013 Link to this post

    Hello 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. 

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 29 Apr 2013 Link to this post

    so ,i have a grid which have
    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
  14. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 29 Apr 2013 Link to this post

    Hello 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')"))

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  15. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 29 Apr 2013 Link to this post

    ok, thank you for the suggestion,i will try it.
  16. Daniel
    Daniel avatar
    192 posts
    Member since:
    Mar 2012

    Posted 07 May 2013 Link to this post

    seems to work your ideea.it's interesting how we can make a workaround for this string constants,especially when two different string technics are combined,and they are a little bit limited.
    Thank you again for the ideea.it was tricky.

    Regards,
    Daniel
Back to Top