How to add custom resource dropdown for custom column?

This topic shows how to add a custom dropdown for given column.

Here is the code:

//Column definition.

var columns = [

{

field: "CustomColumn",

title: "Custom Column",

width: 80,

template: '<div> ${ data.Activity_M().DataSource.CustomColumn || "" } </div>',

editor: "<input data-bind='MultiPicker:data.DataSource' />",

}];

// Binder function for multiselect items

Binder.MultiPicker = function ($elem, role, value, actview) {

var selectedItems = actview.Activity.DataSource.CustomColumn || [];

var items = ["A", "B", "C", "D"];

// Using the in-built 'ResourcePicker' widget and customizing it.

$elem.ResourcePicker({

"source": items,

SelectedResources: selectedItems,

open: function () {

actview.GC.PreventDefaultFns = true;

close: function () {

actview.GC.PreventDefaultFns = false;

destroy: function () {

var resourcePicker = $(this).data('ResourcePicker');

if (resourcePicker == undefined || resourcePicker == null)

return;

if (resourcePicker.IsChanged() == true)

actview.Activity.DataSource.CustomColumn = resourcePicker.selectedItems;

}

});

}