We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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.

1 Reply

CI Christopher Issac Sunder K Syncfusion Team January 14, 2019 09:41 AM UTC

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. 
  • 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 }]); 
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. 


Live Chat Icon For mobile
Up arrow icon