select row

Posted by Abir ben salem on 09-May-2016 05:17

hello, 

Is it possible to  when I select one row , turn the othet rows to grey tint ?

All Replies

Posted by Karthikeyan Bhaskaran on 09-May-2016 07:04
Is this for the records on the List View page?
Posted by Abir ben salem on 09-May-2016 07:12

hello ,

 

Posted by Vimalkumar Selvaraj on 09-May-2016 13:04

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.

Posted by Abir ben salem on 10-May-2016 04:11

hi ,

Thank you for your time , but it does not work on my application !

my version 4.0

Posted by Vimalkumar Selvaraj on 10-May-2016 04:31

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

Posted by Abir ben salem on 10-May-2016 04:39

it is working now ,

Thanks,

Abir

This thread is closed