Cell properties set read only is not working while search options

Tags: #<Tag:0x00007efc64939448>
#1

I am a non commercial user. I have tried read only for particular column with conditions while doing search options , The readonly options is not working and not applicable all times this conditions …

can you help me out how to resolve this issues.

Code :
var table_settings = {
data: dataobject,
columns: cols,
stretchH: ‘all’,
search: {
queryMethod: onlyExactMatch1,
searchResultClass: ‘searchClass’
},
autoWrapRow: true,
rowHeaders: true,
formulas: true,
observeChanges: false,
colHeaders: [

       ],
       cells: function (row, col, prop) {
 			var cellProperties = {
 					
 					readOnly: false
 			};
 			var hot = this.instance;
 			var refId = hot.getDataAtCell(row, hot.colToProp(0))
 			var date = null;
 			date = hot.getDataAtCell(row, hot.colToProp(4));
 			var fullDate = new Date()
       
        var twoDigitMonth = ((fullDate.getMonth().length+1) === 1)? (fullDate.getMonth()+1) : '0' + (fullDate.getMonth()+1);

var currentDate = twoDigitMonth + “-” + fullDate.getDate() + “-” + fullDate.getFullYear();
var date1 = new Date(date);

           var date2 = new Date(currentDate); 

           // To calculate the time difference of two dates 
           var Difference_In_Time = date2.getTime() - date1.getTime(); 

           // To calculate the no. of days between two dates 
           var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24); 
           
            if(Difference_In_Days >= 30) { 
 				 console.log(Difference_In_Days,date,row,"read only",col,hot.getDataAtCell(row, hot.colToProp(0)));
 			
 			
 				cellProperties.readOnly = true;
 			
 			} else {
 				
 				console.log(Difference_In_Days,date,row,"Else",col,hot.getDataAtCell(row, hot.colToProp(0)));
 			}     			
 				  } }
 			
 			return cellProperties;
 		   },
#2

Hi @packiarajbs

Can you show your implementation?

I prepared a simple demo - https://jsfiddle.net/n1zke86b/.
As you can see inside the queryResult array, I call setCellMeta for each cell. You then have to loop to check each cell if it is in queryResult, and if not, change the property readOnly to false by setCellMeta.

#3

I have mentioned my implementations;
Steps to reproduce : Search ->any column (select multiple records) -> OK …

cells: function (row, col, prop) {
var cellProperties = {
readOnly: false
};
var hot = this.instance;
var refId = hot.getDataAtCell(row, hot.colToProp(0))
var date = null;
date = hot.getDataAtCell(row, hot.colToProp(4));
if(col ==5 ){
if(date)
{
var fullDate = new Date()
//convert month to 2 digits
var twoDigitMonth = ((fullDate.getMonth().length+1) === 1)? (fullDate.getMonth()+1) : ‘0’ + (fullDate.getMonth()+1);
var currentDate = twoDigitMonth + “-” + fullDate.getDate() + “-” + fullDate.getFullYear();
var date1 = new Date(date);
var date2 = new Date(currentDate);
// To calculate the time difference of two dates
var Difference_In_Time = date2.getTime() - date1.getTime();
// To calculate the no. of days between two dates
var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24);
if(Difference_In_Days >= 30) {
cellProperties.readOnly = true;
}
} }
return cellProperties;
},

This conditions not working some records while rendering

if(Difference_In_Days >= 30) {
cellProperties.readOnly = true;
}

#4

Without a working demo, can be hard to find a solution.

Maybe based on the demo attached above, you extend it to better reflect your issue.

#5

Hi @packiarajbs

even when I load all the mentioned settings the demo is incomplete https://jsfiddle.net/wz1eg8xr/
Please fill the example and fork it for me.

#6

Hi aleKsandra,

While doing search … I have implemented cell properties some condition .But this condition is not working huge data s. less data is working fine me . For Example : set read only with condition while doing search.
Could you please send me any example demo for this.

#7

@packiarajbs if you use the search functionality like this https://jsfiddle.net/faL1gt6u/ it should mark the cells in all the rows, even those that are not rendered with the first load. In this example I load 1000 rows. How big is your dataset?

#8

more than 10000. Intial load is working fine which I have applied cell properties condition, the same condtition is not working while doing for search filter.

condition is:
if(col == 4 && Difference_In_Days(Exp Value:400) >= 30) {
cellProperties.readOnly = true;
}

#9

Could you share a video recording of this action? I believe that the search combined with row removal may cause some issues due to the viewport ranges limitataions.

#10

Can you guide how to resolve search combined with row removal cause issues when the viewreport limitataions.

#11

Sure. I’ll do my best to propose some solutions. I’d need to know the placement of the search functionality, example

  • search bar above the table
  • search in column header input
  • search as an option in dropdown menu
  • search as an option in context menu

Also, by writing

search combined with row removal

do you mean that you want to hide the rows that did not meet the search query or you want to remove them permanently?

#12

Yes, I want set readonly the column that did not meet the search query.

#13

OK, so no rows are removed, you just want to block the editor (add readOnly).

What I would do is to create custom logic for your input.

  1. Use keydown (native JS event) on the input to trigger cellmeta change on the Handsontable
  2. Run getDataAtRow and call includes method https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Array/includes like
    getDataAtRow.includes(INPUT.value); // if false set that row to readOnly cia setCellMeta(row, column, readOnly true)
#14