hello,
Is it possible to when I select one row , turn the othet rows to grey tint ?
Is this for the records on the List View page?
hello ,
Hi,
We don't have any direct client side API available to do this how ever we fire custom event when record is selected from list view grid , you can listen for this event and use our client side API to get kendo grid instance from which you will be able to get grid row element and add your css class to grey out all rows which are not selected.
I have written a code to do this for you,
<style>
.greyOutStyle{
background-color:lightgray;
opacity:0.6;
}
</style>
<script>
//Listen for row record selection
$(document).bind(rb.newui.util.customEvents.rbs_recordsSelected,function(){
getKendoConfigAndGreyOut(false);
});
//Listen when all records selections cleared
$(document).bind(rb.newui.util.customEvents.rbs_recordSelectionCleared,function(){
getKendoConfigAndGreyOut(true);
});
function getKendoConfigAndGreyOut(isRemove){
var pageComp = rbf_getPageComponent('Nj31EBvnTwCe2boxg1d4Wg'); //List original Id, get from Page Designer list properties
if(pageComp){
var kendoConfig = pageComp.getKendoConfig(); // Get current Kendo Grid config
if(kendoConfig){
var records = kendoConfig.dataSource.view(); // Get current Kendo grid page records
greyOutRows(records,kendoConfig,isRemove); //Grey out
}
}
}
//isRemove will be passed true if all records selections removed
function greyOutRows(records,gridInstance,isRemove){
debugger;
if(isRemove === false && $(gridInstance.element).find('input[name^="sel_"]:checked').length === 0) return;
for(var i=0;i<records.length;i++){
var record = records[i]; //row record
var row = gridInstance.tbody.find("tr[data-uid='" + record.uid + "']"); //Get row element
if(isRemove === false && $(gridInstance.element).find('input[name="sel_'+record.recordId+'"]:checked').length == 0){ //If row is not selected add grey style
$(row).addClass('greyOutStyle'); //Add class
}else{
$(row).removeClass('greyOutStyle'); // remove class
}
}
}
</script>
Hope this helps,
Thanks,
Vimal.
hi ,
Thank you for your time , but it does not work on my application !
my version 4.0
Hi,
I made slight change to make this code work with 4.0 version but we recommend you to upgrade to latest version to have full fledged support for all client side APIs and some other nice features. You can try all our new features from Early Access Program. We have some very good new features added for 4.2 release.
Please change CellID from below highlighted code. CellID you can get from Page Designer List properties dropdown.
<style>
.greyOutStyle{
background-color:lightgray;
opacity:0.6;
}
</style>
<script>
$(document).bind(rb.newui.util.customEvents.rbs_recordsSelected,function(){
getKendoConfigAndGreyOut(false);
});
$(document).bind(rb.newui.util.customEvents.rbs_recordSelectionCleared,function(){
getKendoConfigAndGreyOut(true);
});
function getKendoConfigAndGreyOut(isRemove){
//Please update with you list Id.
var pageComp = rb.newui.page.PageContext.getPageComponent(231791); //List CellID, get from Page Designer
if(pageComp){
var kendoConfig = pageComp.getKendoConfig(); // Get current Kendo Grid config
if(kendoConfig){
var records = kendoConfig.dataSource.view(); // Get current Kendo grid page records
greyOutRows(records,kendoConfig,isRemove); //Grey out
}
}
}
//isRemove will be passed true if all records selections removed
function greyOutRows(records,gridInstance,isRemove){
if(isRemove === false && $(gridInstance.element).find('input[name^="sel_"]:checked').length === 0) return;
for(var i=0;i<records.length;i++){
var record = records[i]; //row record
var row = gridInstance.tbody.find("tr[data-uid='" + record.uid + "']"); //Get row
if(isRemove === false && $(gridInstance.element).find('input[name="sel_'+record.recordId+'"]:checked').length == 0){ //If row is deselected
$(row).addClass('greyOutStyle');
}else{
$(row).removeClass('greyOutStyle');
}
}
}
</script>
Hope this helps,
Thanks,
Vimal
it is working now ,
Thanks,
Abir