Selecting Items by Fields array not working checkItem(), selectItem(), selectMuiltipleItems()

[Michael Snuffer]

I have an array (loaded by DataManager, WebAPI). I bind to the DataManager/Array. Everything works great. But when I try to programatically select items in typeScript using any of the following functions: checkItem(), selectItem(), selectMuiltipleItems(), nothing.

Let say in our DataManager returns an array of 

Widgets = [{ keyId: 1, name: "Xinger"}, { keyId: 2, name: "Wranger"}, { keyId: 3, name: "Singer"}];

After the data is loaded (dataManager.ready.then()), I try to pre-select 2 items from the list:

this.listView.selectMultipleItems([{ id: 1}, {id: 3}]);

This does not work.

I don't have time to totally debug your code, but I think I have narrowed it down to the following:  I think the bolded "fields" should be probably be changed to "fieldData"?  My fix may or may not be correct or complete, but the code you have ends up resolving to fields["keyId"], which will never return anything since be definition the fields variable will only have the Fields structure { id: , text: }

    ListView.prototype.findItemFromDS = function (dataSource, fields, parent) {

        var _this = this;

        var resultJSON;

        if (dataSource && dataSource.length && fields) {

            dataSource.some(function (data) {

                var fieldData = getFieldValues(data, _this.listBaseOption.fields);

                //(!(fid) || id === fid) && (!(ftext) || text === ftext) && (!!fid || !!ftext)

                if ((fields[_this.fields.id] || fields[_this.fields.text]) &&

                    (!fields[_this.fields.id] || (!isNullOrUndefined(fieldData[_this.fields.id]) &&

                        fieldData[_this.fields.id].toString()) === fields[_this.fields.id].toString()) &&

                    (!fields[_this.fields.text] || fieldData[_this.fields.text] === fields[_this.fields.text])) {

                    resultJSON = (parent ? dataSource : data);

                }

                else if (typeof data !== 'object' && dataSource.indexOf(data) !== -1) {

                    resultJSON = (parent ? dataSource : data);

                }

                else if (!isNullOrUndefined(fields[_this.fields.id]) && isNullOrUndefined(fieldData[_this.fields.id])) {

                    var li = _this.element.querySelector('[data-uid="'

                        + fields[_this.fields.id] + '"]');

                    if (li && li.innerText.trim() === fieldData[_this.fields.text]) {

                        resultJSON = data;

                    }

                }

                else if (fieldData.hasOwnProperty(_this.fields.child) && fieldData[_this.fields.child].length) {

                    resultJSON = _this.findItemFromDS(fieldData[_this.fields.child], fields, parent);

                }

                return !!resultJSON;

            });

        }

        else {

            resultJSON = dataSource;

        }

        return resultJSON;

    };

Again, regardless of whether my fix is correct, the control is not working. I've spent hours trying to figure out why my code is incorrect. I may be wrong, but I do no longer believe the problem is on my end. 

Thanks for looking into this. Please let me know if I have done something wrong or when this is corrected.

FYI: I tried with a straight array (instead of a DataManager) with identical results. I am working with "@syncfusion/ej2-angular-lists": "^16.4.44". Thank you.

[Christopher Issac Sunder K]

Hi Michael Snuffer, 

Thanks for contacting Syncfusion support. 

In ListView component, we can programmatically select ListView item using methods like selectItem, selectMultipleItems, checkItem, checkAllItems with proper Id mapping. 

In your case, you are pre-selecting some of the list items. This can be done by two ways. 

• Using isChecked Property.

By setting isChecked property to your JSON data, you can pre-select list items. Refer the below snippet. 

public data = [ 

        { text: 'Hennessey Venom', id: 'list-01' }, 

        { text: 'Bugatti Chiron', id: 'list-02', isChecked: true }, 

        { text: 'Bugatti Veyron Super Sport', id: 'list-03' } 

] 

In the above snippet, Second list item will be pre-selected on rendering. 

Sample 

• Using Listview selection methods

If you don’t have isChecked property in your dataSource, you can utilize actionComplete event for programmatically pre-selecting items like the below snippet. 

private onActionComplete(): void { 

    this.listViewInstance.selectMultipleItems([{ ProductID: 2 }, { ProductID: 3 }]); 

  } 

Sample 

In your sample, we suspect that you may missed to map id field which is a mandatory one. 

If you are still facing the problem, Please revert us with a simple reproducible sample which helps us to provide you a prompt solution at the earliest. 

Thanks, 

Christo