setcellvalue on cellvaluechanged event - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Cell, datetimeinput, dynamically, grid, jqxgrid, set, time

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 11 years ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

setcellvalue on cellvaluechanged event Posts
February 28, 2014 at 5:59 am setcellvalue on cellvaluechanged event #50268

selva
Participant

Hi,
Could please tell me.How to set Time dynamically to DateTimeInput type column in Jqxgrid. Here is my code.
var gridSource =
{
datatype: “array”,
datafields: [
{name: ‘breakRltvtyNam’, value: ‘breakRltvtyId’, values: {source: dataAdapter_break_relativity.records, value: ‘breakRltvtyId’, name: ‘breakRltvtyNam’}},
{name: ‘breakRltvtyId’, type: ‘string’},
{name: ‘breakFrmtName’, value: ‘breakFormtId’, values: {source: dataAdapter_break_format.records, value: ‘breakFormtId’, name: ‘breakFrmtName’}},
{name: ‘breakFormtId’, type: ‘string’},
{name: ‘startTime’, type: ‘string’},
{name: ‘duration’, type: ‘string’}
]
};
var gridAdapter = new $.jqx.dataAdapter(gridSource);
$(‘#break_pattern_footer_new’).jqxGrid(
{
width: ‘600’,
height: ‘250’,
theme: theme_name,
source: gridAdapter,
selectionmode: ‘singlecell’,
editable: true,
showtoolbar: true,
toolbarheight: 25,
rendertoolbar: function(toolbar) {
var me = this;
var container = $(“<div style=’margin: 5px;’></div>”);
var addButton = $(“<div style=’float: left; margin-left: 5px;margin-top:-4px;’ title=’Add Row’></div>”);
toolbar.append(container);
container.append(addButton);
addButton.jqxButton({width: 20, height: 15, theme: theme_name});
addButton.click(function(event) {
var datarow = generaterow();
var commit = $(“#break_pattern_footer_new”).jqxGrid(‘addrow’, null, datarow);
});
},
columns: [
{text: ‘Break Relativity’, columntype: ‘dropdownlist’, width: 200, datafield: ‘breakRltvtyId’, displayfield: “breakRltvtyNam”,
createeditor: function(row, column, editor) {
editor.jqxDropDownList({source: dataAdapter_break_relativity, displayMember: “breakRltvtyNam”, valueMember: ‘breakRltvtyId’});
}
},
{text: ‘Break Format’, columntype: ‘dropdownlist’, width: 200, datafield: ‘breakFormtId’, displayfield: “breakFrmtName”,
createeditor: function(row, column, editor) {
editor.jqxDropDownList({source: dataAdapter_break_format, displayMember: “breakFrmtName”, valueMember: ‘breakFormtId’});
}
},
{text: ‘Start Time’, columntype: ‘datetimeinput’, datafield: ‘startTime’, cellsformat: ‘HH:mm:ss’, width: 100,
createeditor: function(row, column, editor) {
editor.jqxDateTimeInput({showCalendarButton: false});
}
},
{text: ‘Duration’, columntype: ‘datetimeinput’, datafield: ‘duration’, cellsformat: ‘HH:mm:ss’, width: 100}
]
});
$(“#break_pattern_footer_new”).bind(‘cellvaluechanged’, function(event)
{
var row = args.rowindex;
var column = args.datafield;
var selectedValue = $(‘#break_pattern_footer_new’).jqxGrid(‘getcellvaluebyid’, row, column);
var duration = $.ajax({type: “GET”, url: “getDuration4BreakFormat”, data: “selectedValue=” + selectedValue, async: false}).responseText;
var duration_time=ConvertToDate(duration);
$(‘#break_pattern_footer_new’).jqxGrid(‘setcellvalue’,row,’duration’,duration_time);
});
});
function ConvertToDate(stringTime)
{
var date = new Date();
hours = stringTime.substr(0, 2);
minutes = stringTime.substr(3, 2);
seconds = stringTime.substr(6, 2);
date.setHours(parseInt(hours));
date.setMinutes(parseInt(minutes));
date.setSeconds(parseInt(seconds));
return date;
}

Here I got duration value from ajax. it is passed to “ConvertToDate” method and converted as date.The returned value is set to duration column.

February 28, 2014 at 8:24 am setcellvalue on cellvaluechanged event #50287
Dimitar
Participant
Hello selva,

Here is an example, showing how to set time to a cell dynamically:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source =
            {
                localdata: [
                    [0, "03/10/2014 12:09:00", "03/10/2014 13:15:00"],
                    [1, "07/15/2014 11:29:00", "07/15/2014 12:03:00"]
                ],
                datafields: [
                    { name: 'Record', type: 'number', map: '0' },
                    { name: 'StartDate', type: 'date', map: '1' },
                    { name: 'EndDate', type: 'date', map: '2' }
                ],
                datatype: "array"
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                width: 450,
                autoheight: true,
                source: dataAdapter,
                columnsresize: true,
                sortable: true,
                editable: true,
                columns: [
                  { text: 'Record', datafield: 'Record', width: 150 },
                  { text: 'Start Time', datafield: 'StartDate', width: 150, columntype: "datetimeinput", cellsformat: "t" },
                  { text: 'End Time', datafield: 'EndDate', columntype: "datetimeinput", cellsformat: "t" }
                ]
            });
            $("#setTime").click(function () {
                var date = $('#jqxgrid').jqxGrid('getcellvalue', 0, "StartDate");
                $("#jqxgrid").jqxGrid('setcellvalue', 0, "StartDate", new Date(date.getFullYear(), date.getMonth(), date.getDate(), 13, 9, 0));
            });
        });
    </script>
</head>
<body class='default'>
    <button id="setTime">
        Set start time to first record</button>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
February 28, 2014 at 9:19 am setcellvalue on cellvaluechanged event #50291

selva
Participant

Thanks Dimitar, but I want to set values based on onchanging dropdown values.

February 28, 2014 at 10:15 am setcellvalue on cellvaluechanged event #50298

Dimitar
Participant

Hi selva,

Please make sure that the argument passed to ConvertToDate and the extracted sub strings from it are correct. As you can see from our example, there are no issues with setting a date value to a cell in a “datetimeinput” column.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.