jQWidgets Forums

Tagged: jquery grid datepicker, jquery grid editing

This topic contains 8 replies, has 3 voices, and was last updated by Peter Stoev 10 years, 5 months ago.

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

Author

jQuery Datepicker inside jqxGrid edit cell Posts
May 27, 2012 at 1:28 pm jQuery Datepicker inside jqxGrid edit cell #4400

jqWizard
Participant

Hi!

I have a problem integrating jQuery Datepicker inside jqxGrid. Datepicker works only when I first click on the cell for editing. Any ideas?

My code:

<script type=”text/javascript” src=’/jquery/1.7.2/jquery-1.7.2.min.js'</script>
<script type=”text/javascript” src=’/jqueryui/1.8./jquery-ui-1.8.7.custom.min.js'</script>
// other jqwidget js …

jQuery(‘#MyGrid’).jqxGrid({
width           : 350,
source           : source,
pageable       : true,
autoheight       : true,
editable       : true,
editmode       : ‘selectedcell’,
selectionmode   : ‘singlecell’,
pagesize       : 5,
pagesizeoptions   : [‘5′, ’10’],
columns: [{
text       : ‘Date from’,
datafield   : ‘dateFrom’,
width       : 110,
cellsalign   : ‘right’,
createeditor: function (row, cellvalue, editor) {
editor.datepicker(); // initializing jQuery datepicker
}
}]
});

May 27, 2012 at 3:59 pm jQuery Datepicker inside jqxGrid edit cell #4409

Peter Stoev
Keymaster

The supported editors which you can use with jqxGrid are demonstrated in the Editing sample. Other custom editors are not supported and will not work with our widget.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 27, 2012 at 4:10 pm jQuery Datepicker inside jqxGrid edit cell #4410

jqWizard
Participant

I’ve just managed to fix the problem.

jQuery(document).ready(function() {
// we must destroy current datepicker, otherwise we will create datepicker on datepicker on datepicker etc.
jQuery(“#MyGrid”).bind(‘cellendedit’, function (event) {
if (args.datafield === ‘dateFrom’) {
jQuery(‘#textboxeditorMyGriddateFrom’).datepicker(‘destroy’);
}
});

jQuery(‘#MyGrid’).jqxGrid({
width : 350,
source : source,
pageable : true,
autoheight : true,
editable : true,
editmode : ‘selectedcell’,
selectionmode : ‘singlecell’,
pagesize : 5,
pagesizeoptions : [‘5′, ’10’],
columns: [{
text : ‘Date from’,
datafield : ‘dateFrom’,
width : 110,
cellsalign : ‘right’,
initeditor: function (row, cellvalue, editor) { // editor is array !!
jQuery(editor[0]).datepicker(); // initializing jQuery datepicker
}
}]
});
}

Peter, now you can add jQuery datepicker to the list of available editors for inline cell editing

May 27, 2012 at 4:38 pm jQuery Datepicker inside jqxGrid edit cell #4411

Peter Stoev
Keymaster

The solution is good as a work around. However, this will create a new DatePicker widget on each click, but will not dispose it. I also do not understand why this is necessary as the jqxDateTimeInput is integrated with the jqxGrid and supports some additional features like inline editing, keyboard navigation and also the same theme as the jqxGrid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 27, 2012 at 5:18 pm jQuery Datepicker inside jqxGrid edit cell #4413

jqWizard
Participant

Yes, you’re right but jqxDateTimeInput (based on <div>) as a separate input field is not working with knockout. That’s why I use jQuery datepicker (based on <input>).

May 27, 2012 at 7:45 pm jQuery Datepicker inside jqxGrid edit cell #4415
Peter Stoev
Keymaster
Hi jqWizard,

Here’s a simple implementation of our jqxDateTimeInput with Knockout.
```
<!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.7.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/knockout-2.0.0.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.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="../../jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = '';
            $("#jqxdatetimeinput").jqxDateTimeInput({ width: '250px', height: '25px', theme: theme });
            $("#button").jqxButton({ width: 100, height: 25, theme: theme });
            var Model = function (date) {
                this.date = ko.observable(date);
            };
            var date = new Date();
            date.setFullYear(2012, 5, 5);
            var model = new Model(date);
            // Register a binding for datetimeinput
            ko.bindingHandlers.change = {
                init: function (element, valueAccessor) {
                    var value = valueAccessor();
                    $("#jqxdatetimeinput").jqxDateTimeInput('setDate', value());
                    $(element).bind('valuechanged', function (event) {
                        value(event.args.date);
                    });
                }
            };
            ko.applyBindings(model);
            $("#button").click(function () {
                alert("Date: " + model.date());
            });
        });
    </script>
</head>
<body class='default'>
    <div data-bind="change: date"  id="jqxdatetimeinput">
    </div>
    <div style="margin-top: 5px; clear: both;">
        <input id="button" type="button" value="Get Value" />
   </div>
</body>
</html>
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
May 28, 2012 at 8:09 am jQuery Datepicker inside jqxGrid edit cell #4424

jqWizard
Participant

Thank you for the solution

December 10, 2014 at 8:17 am jQuery Datepicker inside jqxGrid edit cell #64003

netset
Participant

hello jqWizard and Peter Stoev

I am also trying to add jquery datetimepicker in jqxgrid column. I follow jqWizard REPLY #4410. But for me it show error “uncaught exception: Missing instance data for this datepicker”.
Please help me to get it working .

December 10, 2014 at 11:33 am jQuery Datepicker inside jqxGrid edit cell #64029

Peter Stoev
Keymaster

Duplicate: http://www.jqwidgets.com/community/topic/jquery-datepicker-inside-jqxgrid-edit-cell-2/
Author

Posts

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

You must be logged in to reply to this topic.