Datatable on change:: how to mark selected row with a value and all other rows with other value

Forms SharePoint 2019
1

Hi,
I can not find any good way to mark only uniquely selected row in DataTable with a value and all other rows with other value.
For example let dt contains 3 rows and 2 columns (Option and Choice) - default for Choice is No:
image
Now user selects one row. Let it be first one:
image
then, user selects another row. Let it be second one:
image
My goal is to have unique selection among all rows, so when user selects first and then second, then first changes to No:
image

For the time being I couldn't find the way to know which row users clicked with on change event.

Have you got any smart idea?

Regards
Marcin

2

Dear @Marcin,
I don't quite get what you mean by selected - there are no selected rows in Data Table, unlike List or Library, where you can select a row. Do you mean which row is being edited at the moment?

3

There is an option to add this type of fields in column:
image
My example shows usage of Dropdown.
I have a problem to determine which row is being changed.

4

Dear @Marcin,
So do you need to detect which row is changed in JavaScript? Or do you specifically want to mark Boolean as true in this row?

5

Detect which row has changed.
And then change all others to default value - in this example it is 'No'.

I have prepared a solution for on change event:

window.helper = ''  
///rest of code here
fd.control('dt').$on('change', function (modelobj) {
    let tempHelper = helper
    if (tempHelper == ''){
        modelobj.forEach(element => {
            if (element.Choice == 'YES'){
                helpder = element.Option
            }
        })
    } else {
        modelobj.forEach(element =>{
            if (element.Option == tempHelper){
                element.Choice = 'NO'
            } else if (element.Choice == 'YES' && element.Option != tempHelper) {
                helper = element.Option
            }
        })
    }
    console.log(modelobj);
})

And I can see that values are correctly updated after each user action, but control doesn't show changes in browser.
Can't find refresh() or equivalent function for datatable.

Regards

6

Dear @Marcin,
Please, try this:

fd.rendered(() => {
	let previousYesOption = null;

	fd.control('dt').$on('change', function(value) {
		let newYesOption = null;
		
		//find new yes option
		value.forEach(element => {
			if (element.Choice == 'YES' && (!previousYesOption || element.Option != previousYesOption)) {
				newYesOption = element.Option;
			}
		})

		let changeValue = false;
		// if YES changed
		if (previousYesOption && newYesOption) {
		    // set other YES choices to NO, and remember if we should change the value
			value.forEach(element => {
				if (element.Choice == 'YES' && element.Option != newYesOption) {
					element.Choice = 'NO';
					changeValue = true;
				}
			});
			
			if(changeValue){
			    fd.control('dt').widget.dataSource.data(value);
			}
		}
		
		previousYesOption = newYesOption;
	});
});
1 Like
7

Thank you. With your changes it works great!

1 Like