toolbar:kendo.template

3 posts, 1 answers
  1. Steve
    Steve avatar
    41 posts
    Member since:
    Apr 2015

    Posted 08 Feb 2016 Link to this post

    Hi All,

    I don't understand why the following snippet will not disable the button initially.  I forked someone code and it's similar to what I got (http://jsfiddle.net/ze6mf3ck/2/). It's a toolbar with kendo.template inside of a grid and it's bind the demo-grid.  CanVoid observable will be used depending on the conditions.  How can I make the "void" button disabled initially? Am I missing something?

     TIA

     

  2. Steve
    Steve avatar
    41 posts
    Member since:
    Apr 2015

    Posted 08 Feb 2016 in reply to Steve Link to this post

    I modified the code, but now I got two buttons.  The one using the data-template is working the work I wanted, but it's NOT in the toolbar of the grid.  How do I get the template in the toolbar to work (response to the value of CanVoid when changed).

    Thanks,

    html

    <div id="demo-grid">
     <div data-template="detail-template" data-bind="source:this, enabled: CanVoid"></div>

      <script id="detail-template" type="text/x-kendo-template">
          <div>
               <button id="asdf" type="button" data-bind="click:test, enabled: CanVoid">Void</button>
          </div>
      </script>
    </div>

     

    Javascript

    vm = kendo.observable({
    CanVoid: false,
       test: function(){
       alert("Hello there!");
       }
    });

    kendo.bind($("#demo-grid"),vm);

    var ds = new kendo.data.DataSource({
      data: [
          {name: "Joe", phone: "212-555-1234"}, 
          {name: "Sally", phone: "212-999-7785"},
          {name: "Bill", phone: "212-244-7035"}
      ]
    });

    var scholarGrid = $("#demo-grid").kendoGrid({
        filterable: false,
        dataSource: ds,   
        //detailTemplate: kendo.template($("#detail-template").html()),
    toolbar :kendo.template($("#detail-template").html()),
        columns:[{field: 'name', title:'Name'},
        {field: 'phone', title: 'Phone'}]
    }).data("kendoGrid");

     

  3. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 10 Feb 2016 Link to this post

    Hello Steve,

     

    By default the Grid's toolbar will not be bound to the View-Model, respectively all the widgets that it contains will not be initialized. As a workaround I suggest to bind the toolbar manually after the grid is initialized (e.g. after initial kendo.bind).

    kendo.bind($("#grid").find(".k-grid-toolbar"), viewModel);

     

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top