CODEWITHSUNDEEP
jqueryjqgridbootstrap-datetimepicker
user2833192
user2833192

Reputation: 19

bootstrap datetimepicker inside jqgrid - control not visible fully

I am using bootstrap datetimepicker control inside jqgrid. The datetimepicker control is not visible properly.

http://jsfiddle.net/cmpgtuwy/103/

 Please help

Upvotes: 0

Views: 1664

Answers (1)

Oleg
Oleg

Reputation: 221997

You demo used old jqGrid 4.6, which is not compatible with Bootstrap. I suggest you to use free jqGrid 4.13.6 instead. Moreover, bootstrap-datetimepicker have problem if the editing field is inside of block, which has no position: relative style. Thus, I suggest to place the grid inside of outer div:

<div id="outer" style="position: relative">
    <table id='grid'></table>
</div>

The next problem: your input data are in the format data: "01/01/2015 03:30". You should to add srcformat: 'd/m/Y H:i' to inform the formatter: "date" about that.

The finally code could be

var mydata = [
    { 
        data: "01/01/2015 03:30", 
        status: "OPEN"
    }, 
    { 
        data: "02/02/2015 03:45", 
        status: "ENTERED"
    }];

$("#grid").jqGrid({
    data: mydata,
    colModel: [
        { name: 'act', template: "actions" },
        { 
            name: 'data', 
            editrules: { required: true },
            formatter: 'date',
            formatoptions: {
                srcformat: 'd/m/Y H:i',
                newformat: 'd/m/Y H:i'
            },
            editable: true, 
            editoptions: {
                dataInit: function (el) {
                    $(el).datetimepicker({
                        locale: 'en-GB',
                        //debug: true,
                        widgetPositioning: {
                            horizontal: 'auto',
                            vertical: 'auto'
                        },
                        widgetParent: '#outer'
                    });
                    // fix the position of the datetimepicker
                    $(el).bind("dp.show", function () {
                        var $datepicker = $("#outer .bootstrap-datetimepicker-widget");
                        if ($datepicker.length > 0) {
                            $datepicker.css("top",
                                this.getBoundingClientRect().top +
                                window.pageYOffset +
                                $(this).outerHeight());
                        }
                    });
                }
            }
        },
        {
            name: 'status',
            width: 180
        }
    ],
    iconSet: "fontAwesome",
    guiStyle: "bootstrap",
    hoverrows: false,
    pager: true   
});

See the demo http://jsfiddle.net/OlegKi/duooa5oy/1/

Upvotes: 1

Related Questions