I need to empty the incorrect value

[Alex]

Hello, 

I have implemented a shift scheduler with combobox for my association. 

My combobox allow me to show people with custom roles (ruoli)(.

This is my example if I see Saturday 1 (Sab 1 in italian) on shift 14:00 - 20:00

I have selected for row with role A "Alex Corti" 

if I open row with role CE role combobox I see (it's correct) that my person is disabled because I have selected him for previous row. So I can't select him with mouse

Otherwise If I write his name the browser allow me to insert him, but this behaviour is not what I want

So I write this portion of code onChanged events

    // user-shift selection changed

    const onUserChanged = async (e) => {

        let copyData = calendarSel;

        let idxArray = e.element.id.replace('hk_', '').split("_");

        // B) Save data into my variable

        let forcedBefore = calendarSel.days[parseInt(idxArray[0])].shifts[parseInt(idxArray[1])].users[parseInt(idxArray[2])].forced;

        let dataToSave = {

            id: -1,

            shiftId: calendarSel.days[parseInt(idxArray[0])].shifts[parseInt(idxArray[1])].shiftId,

            anaCalendarId: calendarSel.anaCalendarId,

            year: calendarSel.year,

            month: calendarSel.month,

            day: calendarSel.days[parseInt(idxArray[0])].day,

            anaShiftId: calendarSel.days[parseInt(idxArray[0])].shifts[parseInt(idxArray[1])].anaShiftId,

            shiftUserId: calendarSel.days[parseInt(idxArray[0])].shifts[parseInt(idxArray[1])].users[parseInt(idxArray[2])].shiftUserId,

            anaUserId: (e.value == null ? 0 : e.value),

            anaUseRoleId: calendarSel.days[parseInt(idxArray[0])].shifts[parseInt(idxArray[1])].users[parseInt(idxArray[2])].anaUserRoleId,

            anaShiftStatusId: isPublished,

            forced: (e.value == null ? 0 : forcedBefore)

        }

        //C) Check: I prevent the insert on writing incorrect username

        const mDay = parseInt(idxArray[0]);

        const mShift = parseInt(idxArray[1]);

        const mUser = parseInt(idxArray[2]);

        //console.log("Save this user = ", forcedAnaUserId,",position=",mUser) ;

        for(let u = 0; u < calendarSel.days[mDay].shifts[mShift].users.length; u ++){

            let anaUserId = calendarSel.days[mDay].shifts[mShift].users[u].anaUserId;

            if (mUser != u)

            {

                if(anaUserId == (e.value == null ? 0 : e.value))

                {

                    console.log("STANDARD: find person, incorrect selection",e);

                    //e.item.innerText = null;

                    //e.value = null;

                    e.cancel = true;;

                    return;    

                }

            }

        }

   

        // SAVE ALL

        let { data: savedData } = await cicassService.saveOp(apiUrl + "/saveshift", dataToSave);

        let prevAnaUserId = copyData.days[parseInt(idxArray[0])].shifts[parseInt(idxArray[1])].users[parseInt(idxArray[2])].anaUserId;

        copyData.days[parseInt(idxArray[0])].shifts[parseInt(idxArray[1])].shiftId = savedData.updatedData.shiftId;

        copyData.days[parseInt(idxArray[0])].shifts[parseInt(idxArray[1])].users[parseInt(idxArray[2])].shiftUserId = savedData.updatedData.shiftUserId;

        copyData.days[parseInt(idxArray[0])].shifts[parseInt(idxArray[1])].users[parseInt(idxArray[2])].anaUserId = (e.value == null ? 0 : e.value);

        // remove forced data

        if (dataToSave.anaUserId == 0 && forcedBefore == 1){

            let availability = availabilitySel;

            let toRemove = availability.findIndex(q=> q.day == dataToSave.day &&  q.anaShiftId == dataToSave.anaShiftId && q.forced == 1 && q.anaUserRoleId == dataToSave.anaUseRoleId && q.anaUserId == prevAnaUserId);

            if (toRemove != -1) {

                //console.log(availability[toRemove]);

                availability.splice(toRemove,1);

            }

        }

        setMonthlycheckData(savedData.monthlyCheck);

        setCalendarSel(copyData);

        //console.log(calendarSel.days[parseInt(idxArray[0])].shifts[parseInt(idxArray[1])], calendarSel.days[parseInt(idxArray[0])].shifts[parseInt(idxArray[1])].users[parseInt(idxArray[2])]);

    }

This portion of code allow me to prevent the changed into my DB (I didn't call the API) but I can't 

empty the combobox.

Could you help me to prevent the change on the browser.

What i want is:

If the previous combobox value is blank I want blank

If the previus combobox value is "Paolo Rossi" I want "Paolo Rossi"

 

Thanks Alex  

[Sureshkumar P]

Alex, 

 

Query: What i want is: 

If the previous combobox value is blank I want blank 

If the previus combobox value is "Paolo Rossi" I want "Paolo Rossi" 

 

You can achieve your requirement by using state variables in the two combobox components as like below example. 

 

Find the code example here: 

export class Filtering extends SampleBase { 

    constructor() { 

        super(...arguments); 

        this.temp = 'countries'; 

        this.state = { value: 'AU' }; 

        //define the filtering data 

        this.searchData = data[this.temp]; 

        // maps the appropriate column to fields property 

        this.fields = { text: 'Name', value: 'Code' }; 

        // filtering event handler to filter a Country 

        this.onChange = (e) => { 

            this.setState({ 

                value: e.value, 

            }); 

        }; 

    } 

    render() { 

        return ( 

            <div className="control-pane"> 

                <div className="control-section"> 

                    <div id="filtering"> 

                        <ComboBoxComponent 

                            id="country" 

                            ref={(ComboBox) => { 

                                this.listObj = ComboBox; 

                            }} 

                            value={this.state.value} 

                            dataSource={this.searchData} 

                            fields={this.fields} 

                            change={this.onChange.bind(this)} 

                            placeholder="Select a country" 

                            popupHeight="270px" 

                        /> 

                        <label>second combobox</label> 

                        <ComboBoxComponent 

                            id="country1" 

                            ref={(ComboBox) => { 

                                this.listObj1 = ComboBox; 

                            }} 

                            value={this.state.value} 

                            dataSource={this.searchData} 

                            fields={this.fields} 

                            placeholder="Select a country" 

                            popupHeight="270px" 

                        /> 

                    </div> 

                </div> 

            </div> 

        ); 

    } 

} 

 

 

We have created the sample based on your requirement. Find the sample link here: https://stackblitz.com/edit/react-opdlfz?file=index.js  

 

Regards, 

Sureshkumar P 

[Alex]

Hi  Sureshkumar P ,

Your portion of code copy the value selected in combo 1 into combo 2. It's not my goal.

I think that you didn't undetstand my problem: I'm sorry I think I have not been clear.

I try to re-explain it again with simple case.

What I want is different.

As I written I have 

- combo A with some values

- combo B with some values

- combo A could have the same values of combo B (and viceversa)

When I selected a vaule X of combo A, combo B show me all the values but disable the selected value on combo B (or viceversa).

I copied the code from official documentation and It's work. But it's work only if I use the mouse , but not If I input data with keyboard.

What i want is:

- I select value (X) on combobox A

- The combobox B don't allow me to select the same value selected in A (I have copied the code from documentation and it works for mouse, but not If I input data from keyboard).

So I have to write additional portion of code because If I write the value with the keyboard the combobox B allow me to insert the value X even if it's disabled by code.

This is not correct.

I added code for change event: but it's not work because it's not correct (I set e.cancel = true)

I attached my code but it's not work.

What I want is very simple:

I selected Alex Corti from combobox A

If I select Alex Corti from combobox B (using mouse) the browser doesn't allow to select it (it's correct)

But If I input with keybord Alex Corti into combobox B (see my image) the browser allow to insert it (but it's not correct for me)

So what I want is:

If the previous combobox B value is blank I want blank

If the previus combobox B value is "Paolo Rossi" I want "Paolo Rossi"

I want to restore the previous value 

I hope my second explanation is much cleare than first one

Thanks Alex

[Sureshkumar P]

Alex, 

 

We have modified the sample based on your updated requirement. Please find the code example below. 

this.onOpen = (e) => { 

            setTimeout(function (e) { 

                // get the second combobox value  

                var otherValue = 

                    document.getElementById('country1').ej2_instances[0].value; 

                var ddlObj = document.getElementById('country').ej2_instances[0]; 

                // get the first combobox popup list element 

                let lis = ddlObj.popupObj.element.getElementsByTagName('li'); 

                for (let li of lis) { 

                    let value = li.getAttribute('data-value'); 

                    if (otherValue === value) { 

                        li.classList.add('e-disabled'); 

                        li.style.pointerEvents = 'none'; 

                        if (otherValue === ddlObj.value) { 

                            // if you enter the input value as same as disabled value then reset the value. 

                            ddlObj.value = null; 

                        } 

                    } 

                } 

            }, 50); 

        }; 

 

 

In the above code we have add the disabled class in the popup open event. So we have reset the component value if you have enter the same disabled value using keyboard. 

Find the modified sample link here: https://stackblitz.com/edit/react-opdlfz-qkwcsv?file=index.js  

 

Regards, 

Sureshkumar P 

[Alex]

Hi,

Your example has the same problem of my code.

You can enter the same value "Australia" for both combobox using keyboard. 

Your portion of code is the same of mine (it's on documentation: avoid only mouse selection)

You can avoid to select "Australia" by mouse but not avoid to select "Australia" by keyboard.

Maybe I'm not so good with english but I think my goal is clear:

AVOID TO SELECT THE SAME VALUE BY USING THE KEYBOARD.

I think that I have to write portion of code onChange Event but I don't know how. 

I can set to null the object and not save the value on db, but my final user see "Australia" and so for him the selection is "Australia", but it's not correct.

He told me:

Why you avoid the selection but I can bypass the control by editing by keyboard?

Thanks Alex

[Ponmani Murugaiyan]

Hi Wei, 

Currently we are checking your reported query. We will update further details in 2 business days (January 25, 2022). 

Regards, 

Ponmani M 

[Alex]

Hi  Ponmani Murugaiyan,

thanks 

Alex

[Sureshkumar P]

Alex, 

 

As per our previous update. We can only restrict the value selection when open the popup because of the datasource only loaded when popup is open state. So when typing the value is not possible to restrict the value but same time after typing the same value once open the popup will reset the typed value as per our previous code example.  

So, when typing the value is not possible to restrict in our combobox component. If you want to restrict the typing value, then we suggest you use our dropdownlist component.  Because the dropdownlist component is not editable component.  

 

To know more about our dropdownlist component. Please refer the below documentation and online demo links. 

 

Documentation link: https://ej2.syncfusion.com/react/documentation/drop-down-list/getting-started/  

 

Online demo link: https://ej2.syncfusion.com/react/demos/#/bootstrap5/drop-down-list/default  

 

Regards, 

Sureshkumar P