I have stucked with this problem. The datepicker is working fine on static content.
But fails when content is loaded via Ajax.
I Have tried :-
jQuery.noConflict();
jQuery(function($) {
$(document).ready(function(){
$( ".datepickerRange" ).datepicker({
dateFormat: 'dd-mm-yy',
prevText:'',
nextText:'',
minDate: 0,
maxDate: "+1M",
showOn: "button",
buttonImage: divadatepicker.image_url+"/calendar.jpeg",
buttonImageOnly: true
});
$( ".datepicker" ).datepicker({
dateFormat: 'dd-mm-yy',
prevText:'',
nextText:'',
showOn: "button",
buttonImage: divadatepicker.image_url+"/calendar.jpeg",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
yearRange: "1960:2015"
});
});
$(document).live(function(){
$( ".datepickerRange" ).datepicker({
dateFormat: 'dd-mm-yy',
prevText:'',
nextText:'',
minDate: 0,
maxDate: "+1M",
showOn: "button",
buttonImage: divadatepicker.image_url+"/calendar.jpeg",
buttonImageOnly: true
});
$( ".datepicker" ).datepicker({
dateFormat: 'dd-mm-yy',
prevText:'',
nextText:'',
showOn: "button",
buttonImage: divadatepicker.image_url+"/calendar.jpeg",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
yearRange: "1960:2015"
});
});
});
It is not showing the even calender small image after content loaded via ajax.
Call .datepicker in your success callback function on your ajax call instead of using .live, which is deprecated. Example:
function initdatepicker(){
$( ".datepickerRange" ).datepicker({
dateFormat: 'dd-mm-yy',
prevText:'',
nextText:'',
minDate: 0,
maxDate: "+1M",
showOn: "button",
buttonImage: divadatepicker.image_url+"/calendar.jpeg",
buttonImageOnly: true
});
$( ".datepicker" ).datepicker({
dateFormat: 'dd-mm-yy',
prevText:'',
nextText:'',
showOn: "button",
buttonImage: divadatepicker.image_url+"/calendar.jpeg",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
yearRange: "1960:2015"
});
}
$(document).ready(function(){
initdatepicker();
});
And add this to your $.ajax success:
initdatepicker();
Use this
<script type="text/javascript">
$(function(){
$('input.calendarSelectDate').live('click', function() {
$(this).datepicker({showOn:'focus'}).focus();
});
});
</script>
Related
i'm trying show image in datatable, but i have a troubles with rendering image, how i may fixed it?
i'm using Django
$(document).ready(function() {
var datatable = $("#asins_list").DataTable({
"bServerSide": true,
"sAjaxSource": links.ajax_get_asins_list,
"bProcessing": true,
"bLengthChange": true,
"bFilter": false,
'sDom': 'Bfrtip',
"bSortable": false,
"bSearch": false,
"autoWidth": true,
"ordering": false,
"bInfo": false,
"lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
"iDisplayLength": 10,
responsive: true,
"aoColumnDefs": [{
"targets": 0,
"data": "remark",
"render": function ( data, type, row, meta ) {
// return 'Download';
return '<a href="test.png"><img src="test.png" ' +
'><b>Competed</b></a>';
}
}],
});
You did not indicate which version you are using, so I assume its the latest (1.10.18).
In that case please note that aoColumnDefs no longer exists, it is now just ColumnDefs.
When I click the search button in jqGrid, the search pop up is not displaying. I have given search=true, I have done this another project its working fine. I am not getting what's wrong. Is anything missing. Please can any one help this. Or Can any one help how to do manually search functionality in jquery for this.
plugins
<link href="#Url.Content("~/Content/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/grid.locale-en.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"</script>
view code:
#using (Html.BeginForm())
{
<table id="Channelslistgrid" cellpadding="0" cellspacing="0">
</table>
<div id="pager" name="pager" style="text-align: center;">
</div>
}
Code:
<script type="text/javascript">
$(function () {
$("#Channelslistgrid").jqGrid({
colNames: ['Title', 'Description', 'LogoFileName' ],
colModel: [
{ name: 'Title', index: 'ChannelName', sortable: true, align: 'left', width: '200',
editable: false, edittype: 'text',search:true,searchoptions:{sopt:['eq']}
},
{ name: 'Description', index: 'Description', sortable: false, align: 'left', width: '120',
editable: false, edittype: 'text',search:true,searchoptions:{sopt:['eq']}
},
{ name: 'Logo', index: 'Logo', align: 'left', formatter: unitsInStockFormatter, sortable: false, width: '100',
editable: false,search:false
}
],
pager: jQuery('#pager'),
sortname: 'Title',
rowNum: 15,
rowList: [15, 20, 25],
sortorder: "desc",
height: 345,
viewrecords: true,
rownumbers: true,
caption: 'ChannelsList',
width: 660,
url: "#Url.Content("Urlpathgiven")",
datatype: 'json',
mtype: 'GET'
})
jQuery("#Channelslistgrid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: true, refresh: true },
{ closeOnEscape: true, reloadAfterSubmit: true, closeAfterEdit: true, left: 400, top: 300 },
{ closeOnEscape: true, reloadAfterSubmit: true, closeAfterAdd: true, left: 450, top: 300, width: 520 },
{ closeOnEscape: true, reloadAfterSubmit: true, left: 450, top: 300 },
{closeAfterSearch:true,closeAfterReset:true,left: 450, top: 300}
);
});
</script>
Include all the Script url and style path in Bundle.Config.
bundles.Add(new ScriptBundle("~/bundles/bundleName").Include(
"~/js/jquery.jqGrid.src.js",
"~/js/jquery-ui-1.8.2.custom.min.js",
"~/js/i18n/grid.locale-en.js"));
bundles.Add(new StyleBundle("~/css").Include("~/css/ui.jqgrid.css");
Add in Layout.cshtml end of file
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/bundleName")
Thanks,
BPL
I am currently running the following code:
<script type="text/javascript">
$(document).ready(function() {
var updateDialog = {
url: '<%= Url.Action("ABM", "Periodo") %>'
, closeAfterAdd: true
, closeAfterEdit: true
, modal: true
, afterShowForm: function(formId) {
$("#fecha_inicio").datepicker({ autoSize: true, showOn: 'both', dateFormat: 'dd/mm/yy' });
$("#fecha_fin").datepicker({ autoSize: true, showOn: 'both', dateFormat: 'dd/mm/yy' });
}
, onclickSubmit: function(params) {
var ajaxData = {};
var list = $("#list");
var selectedRow = list.getGridParam("selrow");
rowData = list.getRowData(selectedRow);
ajaxData = { periodoNum: rowData.periodoId };
return ajaxData;
}
, width: "400"
};
$.jgrid.nav.addtext = "Agregar";
$.jgrid.nav.edittext = "Editar";
$.jgrid.nav.deltext = "Borrar";
$.jgrid.edit.addCaption = "Agregar Periodo";
$.jgrid.edit.editCaption = "Editar Periodo";
$.jgrid.del.caption = "Borrar Periodo";
$.jgrid.del.msg = "Borrar el periodo seleccionado?";
$("#list").jqGrid({
url: '<%= Url.Action("List", "Periodo") %>',
datatype: 'json',
mtype: 'GET',
colNames: ['Número', 'Desde Fecha', 'Hasta Fecha', 'Activo'],
colModel: [
{ name: 'periodoId', index: 'periodoId', width: 40, align: 'left', editable: false, editrules: { edithidden: false }, hidedlg: true, hidden: true },
{ name: 'fecha_inicio', index: 'fecha_inicio', formatter: 'date', datefmt: 'd/m/Y', width: 100, align: 'left', editable: true, edittype: 'text', editoptions: { size: 10, maxlength: 10 }, editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'fecha_fin', index: 'fecha_fin', formatter: 'date', datefmt: 'd/m/Y', width: 100, align: 'left', editable: true, edittype: 'text', editoptions: { size: 10, maxlength: 10 }, editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'activo', index: 'activo', width: 100, align: 'left', editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, editrules: { required: false} },
],
pager: $('#listPager'),
rowNum: 20,
rowList: [5, 10, 20],
sortname: 'id',
sortorder: "desc",
viewrecords: true,
imgpath: '/Content/ui-lightness/Images',
width: "900",
height: "400",
ondblClickRow: function(rowid, iRow, iCol, e) {
$("#list").editGridRow(rowid, prmGridDialog);
}
}).navGrid('#listPager',
{
edit: true, add: true, del: true, search: false, refresh: true
},
updateDialog,
updateDialog,
updateDialog
);
});
</script>
But when data entry is only possible using only the datepicker of fecha_inicio.
I have read several examples web, but could not find the solution, What am I doing wrong?
apparently the point of failure occurred with
showOn: 'both'
when it was changed to
showOn: 'button'
worked correctly
I am trying to set a time range (e.g. from 9am to 3pm only). So far, I have only been able to set the default time.
$('#time').trigger('datebox', {"method":"set", "value":"06:00 PM"});
Indeed, it is not supported in DateBox1 - it is however supported in DateBox2: http://dev.jtsage.com/jQM-DateBox2/demos/opt/limit.html (jquery 1.7.1+ is required for this version at this time) (and it is still pretty beta, but it's reasonably solid).
Sorry, it isn't supported. It looks like days and years are the only thing that support a min and max. This probably wouldn't be difficult to add to the code if you fork his repo.
You can view all options, documented and undocumented, by looking at the source on github https://github.com/jtsage/jquery-mobile-datebox/blob/master/js/jquery.mobile.datebox.js
options: {
// All widget options, including some internal runtime details
version: '1.0.1-2012022700', // jQMMajor.jQMMinor.DBoxMinor-YrMoDaySerial
theme: false,
defaultTheme: 'c',
pickPageTheme: 'b',
pickPageInputTheme: 'e',
pickPageButtonTheme: 'a',
pickPageHighButtonTheme: 'e',
pickPageOHighButtonTheme: 'e',
pickPageOAHighButtonTheme: 'e',
pickPageODHighButtonTheme: 'e',
pickPageTodayButtonTheme: 'e',
pickPageSlideButtonTheme: 'd',
pickPageFlipButtonTheme: 'b',
forceInheritTheme: false,
centerWindow: false,
calHighToday: true,
calHighPicked: true,
transition: 'pop',
noAnimation: false,
disableManualInput: false,
disabled: false,
wheelExists: false,
swipeEnabled: true,
zindex: '500',
debug: false,
clickEvent: 'vclick',
numberInputEnhance: true,
internalInputType: 'text',
resizeListener: true,
titleDialogLabel: false,
meridiemLetters: ['AM', 'PM'],
timeOutputOverride: false,
timeFormats: { '12': '%l:%M %p', '24': '%k:%M' },
durationFormat: 'DD ddd, hh:ii:ss',
timeOutput: false,
rolloverMode: { 'm': true, 'd': true, 'h': true, 'i': true, 's': true },
mode: 'datebox',
calShowDays: true,
calShowOnlyMonth: false,
useDialogForceTrue: false,
useDialogForceFalse: true,
fullScreen: false,
fullScreenAlways: false,
useDialog: false,
useModal: false,
useInline: false,
useInlineBlind: false,
useClearButton: false,
collapseButtons: false,
noButtonFocusMode: false,
focusMode: false,
noButton: false,
noSetButton: false,
openCallback: false,
openCallbackArgs: [],
closeCallback: false,
closeCallbackArgs: [],
open: false,
nestedBox: false,
lastDuration: false,
fieldsOrder: false,
fieldsOrderOverride: false,
durationOrder: ['d', 'h', 'i', 's'],
defaultDateFormat: '%Y-%m-%d',
dateFormat: false,
timeFormatOverride: false,
headerFormat: false,
dateOutput: false,
minuteStep: 1,
calTodayButton: false,
calWeekMode: false,
calWeekModeFirstDay: 1,
calWeekModeHighlight: true,
calStartDay: false,
defaultPickerValue: false,
defaultDate : false, //this is deprecated and will be removed in the future versions (ok, may be not)
minYear: false,
maxYear: false,
afterToday: false,
beforeToday: false,
maxDays: false,
minDays: false,
highDays: false,
highDates: false,
highDatesAlt: false,
blackDays: false,
blackDates: false,
enableDates: false,
fixDateArrays: false,
durationSteppers: {'d': 1, 'h': 1, 'i': 1, 's': 1},
useLang: 'en',
lang: {
'en' : {
setDateButtonLabel: 'Set Date',
setTimeButtonLabel: 'Set Time',
setDurationButtonLabel: 'Set Duration',
calTodayButtonLabel: 'Jump to Today',
titleDateDialogLabel: 'Set Date',
titleTimeDialogLabel: 'Set Time',
daysOfWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
daysOfWeekShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
monthsOfYear: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
monthsOfYearShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
durationLabel: ['Days', 'Hours', 'Minutes', 'Seconds'],
durationDays: ['Day', 'Days'],
timeFormat: 24,
headerFormat: '%A, %B %-d, %Y',
tooltip: 'Open Date Picker',
nextMonth: 'Next Month',
prevMonth: 'Previous Month',
dateFieldOrder: ['m', 'd', 'y'],
timeFieldOrder: ['h', 'i', 'a'],
slideFieldOrder: ['y', 'm', 'd'],
dateFormat: '%Y-%m-%d',
useArabicIndic: false,
isRTL: false,
calStartDay: 0,
clearButton: 'Clear'
}
}
}
i m using jqgrid with mvc 3, I want to add Edit and Delete button with every row of JqGrid , i have achieved this thing by the help of this link. But it is for inline editing, i want to open a popup widows when click on edit button.
How can i achieve this thing.
Thanks
You should just use new editformbutton: true option which exists starting with version 4.1.0 of jqGrid:
formatter:'actions',
formatoptions: {
keys: true,
editformbutton: true
}
Please find the colmodel below for editing:
{
name: 'EditAction',
width: 60,
fixed: true,
search: false,
sortable: false,
resize: false,
formatter: 'actions',
formatoptions: {
keys: false,
editbutton: true,
delbutton: false,
editformbutton: false,
onSuccess: function(response) {
if (response.status == 200) {
}
},
extraparam: { oper: 'edit' },
url: '#Url.Action("ActionName", "Controller")'
}
},
jQuery("#grid").jqGrid({
datatype: "local",
data: second,
#url: '#Url.Action("orders", "Home")',
datatype: "json",#
colNames: ['name', 'description', 'url'],
colModel: [
{name: 'name',
index: 'name',
editable: true,
editrules: {required: true},
editoptions: {placeholder: 'Enter a Name'}
},
{name: 'description',
index: 'description',
editable: true,
editrules: {required: true},
editoptions: {placeholder: 'Enter description'}
},
{
name: 'url',
index: 'url',
editable: true,
editrules: {required: true},
editoptions: {placeholder: 'Enter url'}
}
],
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'model',
pager: '#pager',
editrow:true,
editurl: '#Url.Action("orders", "Home")',
viewrecords: true,
sortorder: "desc",
jsonReader: {
repeatitems: false,
id: "0"
},
searching: {
loadFilterDefaults: false,
closeOnEscape: true,
searchOperators: true,
searchOnEnter: true
},
caption: "Cars Grid",
height: '80%',
gridComplete: initGrid
});