DataTable populate data from field

Good day,
@mnikitina
I would like to populate data table from an text field , which is selected in dataTable 'Save to'.



with the code in field - [{"StaffId":"26","StartWorkYearDate":"2005-12-24","EndWorkYearDate":"2006-12-24","PaidDays":"0","GratisDays":"15"}

It works, but only when i save the form. how to show data in table on change field?

Hello @ixxxl,

Why do you need to add records like this? Could you please describe a use case.

@mnikitina
An web service will update a field in user profile of which sharepoint user. After that i will populate that field in table in form of list item. Because it can be many rows, maybe one. I decided to use data Table.

Hello @ixxxl,

You can insert new records directly to DataTable using the code, for instance:

records = [{
    Column1: 'test1',
    Column2: 'test1',
    Column3: 'test1'
},
{
    Column1: 'test2',
    Column2: 'test2',
    Column3: 'test2'
}]

records.forEach(function(record,index) {
    fd.control('DataTable1').value.push(record)
})

@mnikitina thank you
I resolved like this:
fd.spRendered(function() {

    function filterD12T(){

var jsonArray = JSON.parse(fd.field("zileConcediu").value);
fd.control("DataTable1").widget.setOptions({dataSource:jsonArray});
}
fd.field('zileConcediu').$on('change', filterD12T)

}); 

and in field zileConcediu , populate from userProfile. with
[{"StartWorkYearDate":"2018-11-25","EndWorkYearDate":"2019-11-24","PaidDays":"18","GratisDays":"0"},{"StartWorkYearDate":"2019-11-25","EndWorkYearDate":"2020-11-24","PaidDays":"28","GratisDays":"0"}]

How to disable and hide 'delete element' in table and 'add new item' - to make only read only ?

@ixxxl,

To hide delete and ad new buttons you need to add this CSS to the form:

.fd-datatable table tr th:last-child,
.fd-datatable table tr td:last-child,
.k-header.k-grid-toolbar
{ display: none; }

And to disable control, you need to disable each column separately:

//disable first column
fd.control('DataTable1').columns[0].editable = function(){return false};
1 Like

@mnikitina,
But if i need not columns, but header menu?


I found css
.fd-form .fd-datatable-wrapper>.fd-datatable .fd-command-cell {
white-space: nowrap;
padding: 3px;
visibility: hidden;
}
.k-grid-toolbar {
padding: .375rem;
visibility: hidden;
}

1 Like