JAVASCRIPT

Plumsail - DataTable Cascading Dropdowns

fd.spRendered(function() {
    fd.control('DataTable1').$on('edit', function(e) {
        if (e.column.field === 'Category') {
            //pass widget + current Category value
            populateCategories(e.widget, e.model.Category);
        }

        if (e.column.field === 'Product') {
            //pass widget + current Category and Product value
            populateProducts(e.widget, e.model.Category, e.model.Product);
        }
    })

});

function populateCategories(widget, value) {
    //will show as loading
    widget._showBusy();

    sp.web.lists.getByTitle('Categories').items
        .select('ID', 'Title')
        .get()
        .then(function(items) {
            //set options
            widget.setDataSource({
                data: items.map(function(i) { return i.Title })
            });

            //set value if one was select
            widget.value(value);
            //hide loading state
            widget._hideBusy();
        });
}

function populateProducts(widget, parentValue, value) {
    //will show as loading
    widget._showBusy();

    sp.web.lists.getByTitle('Products').items
        .select('ID', 'Title', 'Category/Title')
        .expand('Category')
        .filter("Category/Title eq '" + parentValue + "'")
        .get()
        .then(function(items) {
            widget.setDataSource({
                data: items.map(function(i) { return i.Title })
            });

            //set value if one was select
            widget.value(value);
            //hide loading state
            widget._hideBusy();
        });
}