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