When I change dxGrid lookup dataSource the lookup stops expanding

Question

So my function seems to process my data alright but the lookup stops working thereafter. As in when I click on the column it stops working this is the code which breaks it: (The line between the console logs)

console.log("Gender Updating:", $("#EntitlementRules").dxDataGrid("instance").columnOption("GenderID", "lookup"));
$("#EntitlementRules").dxDataGrid("instance").columnOption("GenderID", "lookup.dataSource", distinctGenders);
console.log("Gender Updated:", $("#EntitlementRules").dxDataGrid("instance").columnOption("GenderID", "lookup"));

and this is where I define the actual column for my lookup:

                   {
                        dataField: "GenderID",
                        caption: "Gender",
                        allowEditing: true,
                        allowFixing: true,
                        lookup: {
                            dataSource(options) {
                                return {
                                    store: new DevExpress.data.ArrayStore({
                                        data: self.Cache.AllProducts,
                                        key: "ID"
                                    }),
                                }
                            },
                            valueExpr: "GenderTypeCode",
                            displayExpr: "Gender"

                        },
                    },

This is where I call my function:

onCellClick: function (e) {self.refreshProductsInRangeGenderandSize(e.data)},

Answer 1

I believe that the dataSource was being populated before the data was ready so I placed that function within a JQuery delay for 2500 ms to ensure that the data is ready

setTimeout(
function () {
$("#EntitlementRules").dxDataGrid("instance").columnOption("GenderID", "lookup.dataSource", distinctGenders);
$("#EntitlementRules").dxDataGrid("instance").columnOption("SizeID", "lookup.dataSource", distinctSizes);
$("#EntitlementRules").dxDataGrid("instance").columnOption("StyleID", "lookup.dataSource", distinctStyles);
$("#EntitlementRules").dxDataGrid("instance").columnOption("ColourID", "lookup.dataSource", distinctColours);
}, 2500);