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

dynamic row template with Grid in MVVM structure

2 Answers 105 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Wesley
Top achievements
Rank 1
Wesley asked on 11 Apr 2014, 03:22 AM
Hi,

I am trying to work on the grid like below,

 basically i give a checkbox to user, when it is not checked, the grid only display data from URL1,
but if the checkbox is checked, it merge 2 json data and display the comparison of URL1 and URL 2

<label><input type="checkbox" name="compCB" id="compCB">Enable Compare</label>
<div id="grid" style="height: 365px"></div>
<script>
$(document).ready(function () {
  var url1="http://XXXXXXXXX/clients/1";
  var url2="http://XXXXXXXXX/clients/2";
  var J1=null;
  var J2=null;
  var Jdata;
  var toCompare;
  loadData('init');

  function loadData(act){
    toCompare =$('#compCB').is(':checked');
      if(act=='init'||act=='reload'){
        $.getJSON(url1, function(jd) {
          J1=jd;
          meargeData();
        });
      };
      if(toCompare){
        $.getJSON(url2, function(jd) {
          J2=jd;
          mergeData();
        });
      }else if(act='toggle'){
        J2=null;
        mergeData();
      };
    };
    function mergeData(){
      if(J1!=null&&(J2!=null||!toCompare)){
        if(!toCompare){
          Jdata=[{
            clientId: J1.clients[0].clientId,
            name: J1.clients[0].name,
            status: J1.clients[0].status
          }];
        }else{
          Jdata=[{
            clientId: {
              C1: J1.clients[0].clientId,
              C2: J2.clients[0].clientId
            },
            name: {
              N1: J1.clients[0].name,
              N2: J2.clients[0].name
            }, 
            status: {
              S1: J1.clients[0].status,
              S2: J2.clients[0].status
            }
          }];
        };
        genGrid();
      };
    };
    function genGrid(){
      if(!toCompare){
        RT='<tr data-uid="#= uid #"><td>#: clientId #</td><td><strong>#: name #</strong></td><td style="text-transform:lowercase;">#: status #</td></tr>';
        ART='<tr data-uid="#= uid #" style="background-color:rgb(255,200,255)"><td>#: clientId #</td><td><strong>#: name #</strong></td><td style="text-transform:lowercase;">#: status #</td></tr>';
      }else{
        RT='<tr data-uid="#= uid #"><td>#: clientId.C1 #<br/>#: clientId.C2 #</td><td><strong>#: name.N1 #<br/>#: name.N2 #</strong></td><td style="text-transform:lowercase;">#: status.S1 #<br/>#: status.S2 #</td></tr>';
        ART='<tr data-uid="#= uid #" style="background-color:rgb(255,200,255)"><td>#: clientId.C1 #<br/>#: clientId.C2 #<br/></td><td><strong>#: name.N1 #<br/>#: name.N2 #</strong></td><td style="text-transform:lowercase;">#: status.S1 #<br/>#: status.S2 #</td></tr>';
      };
      $("#grid").kendoGrid({
        dataSource: {
          type: "json",
          data: Jdata,
          pageSize: 3,
        },
        groupable: true,
        sortable: true,
        resizable: true,
        columnResizeHandleWidth: 6,
        pageable: {
          refresh: true,
          pageSizes: true,
          buttonCount: 5
        },
        columns: [{
          title: "ID",
          width: 200
        }, {
          title: "Client Name",
          width: 250
        }, {
          title: "Status"
        }],
        rowTemplate: RT,
        altRowTemplate: ART
      });
    };
    $('#compCB').change(function(){
      loadData('toggle');
    });
  });
</script>

Now, I am trying to do it in the MVVM structure, the first problem I face is how do I change the  rowTemplate and altRowTemplate dynamicly?


 





2 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 14 Apr 2014, 04:48 PM
Hello Wesley,

Please check this forum thread as it discusses how to change Grid's row templates after widget initialization.
Please note that you cannot change the template through MVVM, the approach requires manual change.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Wesley
Top achievements
Rank 1
answered on 22 Apr 2014, 01:27 AM
thx Alexander 
Tags
Grid
Asked by
Wesley
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Wesley
Top achievements
Rank 1
Share this question
or