DataTable - Default Date

Forms
#1

Hello

DataTable Date column seems to have a default date of Today. I have a field i.e. "Start" that is set by the user, if this is set i would like this date to be the default date in the DataTable is it possible?

#2

Hello @Chris_Grist,

Please paste the following code in JavaScript Editor to set the Date in DataTable with the value from 'Start' field.

Please replace 'DataTable0' and 'Start" with the internal names of control and field. Column0 - is the column title.

fd.control('DataTable0').$on('change',
    function(e) {
        var startDate = fd.field('Start').value;
        fd.control('DataTable0').value[0].Column0 = startDate;
    });

You also may have a look at the DataTable documentation for more information.

#3

Hey,

Thank you i have this working, but it does not seem to override the default date, just sets the first rows date, is there a simple way to set subsequent rows as i cannot guess how many rows they would have and do not want to overwrite rows after the user has made selections.

#4

@Chris_Grist,

The above code is for the DataTable which is set up to add new lines on top.

image

Please see below the code example for when the lines added in the bottom.

    fd.control('DataTable0').$on('change',
	
    function(e) {
    	var rec = parseInt(fd.control('DataTable0').value.length) - 1;
        var startDate = fd.field('Start').value;
        fd.control('DataTable0').value[rec].Column0 = startDate;
    });
#5

Hi! I've the same problem, but the suggest not work well.
On change event not allow to enter a new date in datatable.

how put a default date correctly ?

Thanks

#6

@ycervoni,

You can check if the column is blank or not, and populate field with the date only if it is blank:

    fd.control('DataTable1').$on('change',
	
    function(e) {
    	var rec = parseInt(e.value.length) - 1;
        var startDate = fd.field('Date').value;
        if(!e.value[rec].Column1){
            fd.control('DataTable1').value[rec].Column1 = startDate;
        }
    });
#7

Thanks, but in the first row fills the date of today and the other row fills blank rows

fd.control('DataTable1').$on('change', function() {
        fd.control('DataTable1').widget.bind("dataBound",function(){
            var data = fd.control('DataTable1').widget._data;
            var startDate = '';
            if(data){
                console.log(data[0]);
                for (var i = 0; i < data.length; i++){
                    console.log(i);
                    console.log(data[i]);
                    data[i].Dal = startDate;
                    data[i].Al = startDate;
                    console.log(data[i].Dal);   
                    console.log(data[i].Al);   
                }
            }
        });   
    });
#8

@ycervoni,

The startDate variable is blank, and it clears all records.

Why don't you use the code I've suggested in the previous post? Do you need to changes the date in all rows at once?

#9

the previous code don't work. I've an error: value undefined

#10

@ycervoni,

Please try out this code:

    var dt = fd.control('DataTable1');
    var isNew = false;

    dt.widget.wrapper.find('.k-grid-add').on('click', e => {
        isNew = true;
    });

    dt.widget.bind('edit', function(e) {
        if (isNew) {
            isNew = false;
            //set values for Column1 and Column2
            e.model.set('Column1', fd.field('Date').value);
        }
    });

Make sure you are using valid internal control and field names.

#12

Great! it works! Thanks!

1 Like