Data Table JS populate dropdown values

Forms Public Forms
1

I'm using a public form and am trying to use a dropdown column in a data table. I'd like to be able to populate the values using Javascript. Is this possible? Tried this but it didn't work...
fd.control('DataTable1').columns[1].data(["Option 1","Option 2"]);

2

Hello @IT.Joe,

You can use this code to populate dropdown column of DataTable with values dynamically:

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

});

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

            widget.setDataSource({
                data: ['test1', 'test2']
            });

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

Where 'Column1' is the internal name of the column.

3

@mnikitina may I know this is SP list or common data table? my requirement also need to show dropdown in SPDatatable

4

Hello @Derek_wong,

This is for the DataTable control. For a SharePoint forms you can use a List or Library control with a dropdown or a lookup field.

5

one more question @mnikitina , how can I setup a filter on dataTable control? and refresh the datatable

var dt = fd.control('DtAssetMasterList');

dt.ready().then(function() {
    filterDT();
});


function filterDT(){
    console.log("filterDT DtAssetMasterList START"); 
    var tmp = fd.control('Lookup1').value;
      
    var filter;
  
    if ((fd.field('SearchName').value == null || fd.field('SearchName').value == "")  && (tmp == null || tmp.length == 0))
    {
        filter = "<Eq><FieldRef Name='RequestedBy'/><Value Type='Text'>"+ fd.field('RequestedBy').value + "</Value></Eq>";
    }
    else{
 
        if (fd.field('SearchName').value.length > 0)
        {
            filter = "<Or><Contains><FieldRef Name='Description'/><Value Type='Text'>"+ fd.field('SearchName').value + "</Value></Contains>";
            filter += "<Contains><FieldRef Name='Description2'/><Value Type='Text'>"+ fd.field('SearchName').value + "</Value></Contains></Or>";
        }
        else if (tmp.length == 1)
        {
            filter = "<Eq><FieldRef Name='Custodian'/><Value Type='Text'>"+ tmp[0].Title + "</Value></Eq>";
        }else if (tmp.length > 1)
        {
           filter = "<Or>";
           for (var i = 0; i < tmp.length; i++) {
               filter += "<Eq><FieldRef Name='Custodian'/><Value Type='Text'>"+ tmp[i].Title + "</Value></Eq>";
           }
           filter += "</Or>";
        }
    }
    
    console.log("filter rule => " + filter); 
    fd.control('DtAssetMasterList').filter = filter;
  //  fd.control('DtAssetMasterList').refresh();
    console.log("filterDT DtAssetMasterList END"); 
}
6

Hello @Derek_wong,

Filter property is not available for the DataTable control. You can apply filtration only for the List or Library control that is connected to the SharePoint list, find the code examples here.

7

@mnikitina ,

May I know who can I hide these two buttons on datatable

image
image216×575 15.8 KB

8

Hello @Derek_wong,

You can hide the delete and new record buttons using the CSS:

.k-grid-toolbar, .k-grid-delete {
    display: none;
}
9

anyway I can check whether the data table has any invalid data

for entire form we can use fd.isvalid(), how about the specific to a datatable.? what I want is to ensure all the validation on the dataTable is valid before user can click the submit button.

10

Hello @Derek_wong,

You can add a custom validation for the Data Table control. For instance make sure that the columns contains information:

fd.control('DataTable1').addValidator({
    name: 'DataTable validator',
    error: "Fill out all required columns",
    validate: function(value){
  for(var i = 0; i < value.length; i++){
    if(!value[i].Column1 || !value[i].Column2){
      return false;
    }
  }
  return true;
}})