Datepicker in the same page with grid not working

[nitin7988Participant]

I have jsp page in that when i used datepicker it works fine but when i added an jqxgrid in the same page the datepicker dosenot works.
Can someone help me in this.

[NadezhdaParticipant]

Hello nitin7988,

This information is insufficient for us to determine the source of the issue. Please, provide a sample which illustrates your issue.

Best Regards,
Nadezhda

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

[nitin7988Participant]

The grid is saved in a seperate page
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.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/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/jqxdata.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.sort.js”></script>

<script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.js”></script>

<script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>

<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/globalization/globalize.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxpanel.js”></script>

<script type=”text/javascript”>
var data= ‘<%=com.controlcentre.masters.vehiclemaster.brand.ClsBrandAction.searchDetails() %>’;
$(document).ready(function () {

var num = 0;
var source =
{
datatype: “json”,
datafields: [
{name : ‘DOC_NO’ , type: ‘int’ },
{name : ‘BRAND_NAME’, type: ‘String’ },
{name : ‘DATE’, type: ‘String’ }

],
localdata: data,

pager: function (pagenum, pagesize, oldpagenum) {
// callback called when a page or page size is changed.
}
};

var dataAdapter = new $.jqx.dataAdapter(source,
{
loadError: function (xhr, status, error) {
alert(error);
}
}
);
$(“#jqxBrandSearch”).jqxGrid(
{
width: ‘75%’,
height: 315,
source: dataAdapter,
columnsresize: true,
pageable: true,
altRows: true,
sortable: true,
selectionmode: ‘singlerow’,
pagermode: ‘default’,

//Add row method
columns: [
{ text: ‘DOC_NO’, datafield: ‘DOC_NO’, width: ‘10%’ },
{ text: ‘BRAND_NAME’, datafield: ‘BRAND_NAME’, width: ‘50%’ },
{ text: ‘DATE’, datafield: ‘DATE’, width: ‘40%’ }
]
});
$(‘#jqxBrandSearch’).on(‘rowselect’, function (event) {
var rowindex1=event.args.rowindex;
document.getElementById(“docno”).value= $(‘#jqxBrandSearch’).jqxGrid(‘getcellvalue’, rowindex1, “DOC_NO”);
document.getElementById(“brand”).value = $(“#jqxBrandSearch”).jqxGrid(‘getcellvalue’, rowindex1, “BRAND_NAME”);
document.getElementById(“date_brand”).value = $(“#jqxBrandSearch”).jqxGrid(‘getcellvalue’, rowindex1, “DATE”);
document.close();
});
});
</script>
<div id=”jqxBrandSearch”></div>

and this grid page is included in a main page where date picker is also specified in this way

<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css”/>
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.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/jqxtooltip.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/globalization/globalize.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(“#jqxDateTimeInput”).jqxDateTimeInput({ min: new Date(2010, 0, 1), max: new Date(2014, 11, 31), width: ‘125px’, height: ’15px’});
});
</script>
<div id=’jqxDateTimeInput’></div>

the date picker works when its used without grid.
but when grid page is included the date picker dosenot works.

[nitin7988Participant]

solved the issue same js files where included 2 twice.
Once in the main page and next time in the grid page.

[Author]

Posts