I had a jqGrid and I had put a datepicker on the search column. When I click the datepicker, it come out and allow me to choose any date I want. However, after date selection it wont help me to filter my result. But if I type the same date on the column jqGrid will do the filtering for me.
Here is my code.
{name:columnArr4[3], index:columnArr4[3], width:106, sortable: true, fixed:true, resizable:false, // expiry date
formatter: function (cellvalue, options, rowObject)
{
celVal = '-';
if (cellvalue && cellvalue.replace(/\s/g, '').length>0){
celVal = cellvalue;
}
return celVal;
},
search:true, stype:'text', searchoptions: { dataInit: function(el) {
$(el).datepicker({
dateFormat: 'yy-mm-dd'
});
}
}
},
dataInit: function (elem) {
$(elem).datepicker({
changeYear: true,
changeMonth: true,
showButtonPanel: true,
onSelect: function() {
if (this.id.substr(0, 3) === "gs_") {
// in case of searching toolbar
setTimeout(function(){
myGrid[0].triggerToolbar();
}, 50);
} else {
// refresh the filter in case of
// searching dialog
$(this).trigger('change');
}
}
});
}
Related
I've been having trouble with Full Calendar. I already tried different approaches but to no avail. The json response doesn't shows up in the calendar.
View:
<div class="col-lg-12 col-md-12">
<div id="calendar">
</div>
</div>
Controller:
public function calendar(Request $request){
if($request->ajax()){
$data= Table::where('id',Auth::user()->id)
->where('DateFrom','>',$request->start)
->where('DateTo','<',$request->end)
->get();
return response()->json($data);
}
}
Route:
Route::get('/calendar', [CalendarController::class, 'calendar'])->name('calendar');
Script (mix):
$('#calendar').fullCalendar({
events: 'calendar',
eventColor: '#378006',
displayEventTime: true,
eventRender: function (event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
})
There are no errors, the data is also being fetched but the problem is the calendar can't render it. May I ask is there any problem with this? Do I need to actually create a partial view for this and then include it to another blade file?
The problem was that I was fetching a different type of date which doesn't match up with the dates from the Fullcalendar. So to show/highlight those dates I did this.
Controller:
public function calendar(Request $request){
if($request->ajax()){
$event= Table::where('id',Auth::user()->id)
->where('DateFrom','>',date('Y-m-d',$request->start)) //converts date
->where('DateTo','<',date('Y-m-d',$request->end)) //converts date
->get();
$data = [];
foreach($event as $row){
$data[] = [
'title' => $row->title,
'start' => date(DATE_ISO8601,strtotime($row->DateFrom)),
'end' => date(DATE_ISO8601,strtotime($row->DateTo))
];
}
return response()->json(collect($data));
}
return view('partials._calendar-details',compact('data'));
}
and then for my script:
$('#calendar').fullCalendar({
// events: 'calendar',
eventColor: '#378006',
displayEventTime: false,
eventSources: [
{
events: function(start, end, timezone, callback ){
$.ajax({
url: '/calendar',
type: 'GET',
data: {
// our hypothetical feed requires UNIX timestamps
start: start.unix(),
end: end.unix()
},
dataType: 'json',
success: function(res) {
var events = [];
for (var i = 0; i < res.length; i++){
console.log(res[0].title);
events.push({
title: res[0].title,
start: res[0].start,
end: res[0].end
});
}
callback(events);
},
});
},
color: 'darkblue', // an option!
textColor: 'white', // an option!
}
],
eventRender: function (event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
})
I need to set a column as type text in Excel export from DataTable. All columns are in 'General' mode, so if data from a cell is datelike (2020-11-01 e.g.), Excel trats it like a date and I need it to be a string. This is my code regarding the table.
<script>
$(document).ready( function () {
var groupColumn = 0;
var table = $('#Table1').DataTable( {
"paging": true,
"autoWidth": false,
"info": false,
language: {
search: "_INPUT_",
searchPlaceholder: "Filtra risultati",
},
dom: 'Bfrtip',
buttons: [
{
text: 'Esporta dati',
title: '',
header: true,
extend: 'excel',
orientation: 'landscape',
pageSize: 'LEGAL'
},
],
select: true,
} );
} );
</script>
There is a way to force DataTable to set my third column as TEXT?
You should try:
// (...)
buttons: [
{
extend: 'excelHtml5',
title: "Your Report Name",
exportOptions: {
columns: ':visible',
},
customize: function (xlsx, data) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row c[r^="C"]', sheet).attr('s', '0');
}
},
But note that will set cell type to GENERAL, not TEXT.
This is searching for all cells (row c) in third column (r^="C") and setting the style (s attribute) to 0 (the datatables built-in style for GENERAL content).
If you are reading this answer trying to do the opposite, formating numbers as numbers and dates as dates, the following code did the trick for me:
// (...)
buttons: [
{
extend: 'excelHtml5',
title: "Your Report Name",
exportOptions: {
columns: ':visible',
format: {
body: function (data, row, column, node) {
if (column === 3) { // if you have a number in 4th column
return parseFloat(data);
} else if (column === 2) { // if you have a date in 3rd column
var dateVal = Date.parse(data); // yyyy-MM-dd
var ticks = Math.round(25569 + (dateVal / (86400 * 1000)));
return ticks;
} else {
return data;
}
}
}
},
customize: function (xlsx, data) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
var styles = xlsx.xl['styles.xml'];
var dateStyle = "<xf numFmtId='14' fontId='0' fillId='0' borderId='0' applyFont='1' applyFill='1' applyBorder='1' xfId='0' applyNumberFormat='1' />";
styles.childNodes[0].childNodes[5].innerHTML += dateStyle;
$('row c[r^="D"][s=65]', sheet).attr('s', '64');
$('row c[r^="C"][s=65]', sheet).attr('s', '67');
}
},
I have question regarding series name, How can i set static series name to the element based on the categories in the HighChart.
The expected output will be like this:
As of now I have result on my web app.
Is it possible to change that Series1,Series2,Series3 based on what I want to put on the Series name?
I have here my codes:
categories = [],
series = [];
$.getJSON('ajax/ams_sla_report_chart.php', function(data,name){
data.forEach(function(arr) {
arr.forEach(function(el, i) {
if (i === 0) {
categories.push(el);
} else if (series[i - 1]) {
series[i - 1].data.push(el);
} else {
series.push({
name:['MR','MR_HIT','MR_HIT_PERCENTAGE'],
data: [el]
});
}
});
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'containers',
type: 'column',
inverted: false
},
legend: {
layout: 'horizontal',
align: 'right',
verticalAlign: 'middle'
},
xAxis: {
categories: categories
},
title: {
text: 'Priority Based on SLA'
},
series:series
});
function showValues() {
$('#alpha-value').html(chart.options.chart.options3d.alpha);
$('#beta-value').html(chart.options.chart.options3d.beta);
$('#depth-value').html(chart.options.chart.options3d.depth);
}
// Activate the sliders
$('#sliders_eng input').on('input change', function () {
chart.options.chart.options3d[this.id] = parseFloat(this.value);
showValues();
chart.redraw(false);
});
showValues();
});
You need to define the series names array outside of the loop and use only one name in the loop:
var seriesNames = ['MR', 'MR_HIT', 'MR_HIT_PERCENTAGE'],
...
data.forEach(function(arr) {
arr.forEach(function(el, i) {
if (i === 0) {
categories.push(el);
} else if (series[i - 1]) {
series[i - 1].data.push(el)
} else {
series.push({
name: seriesNames[i - 1],
data: [el]
});
}
});
});
Live demo: http://jsfiddle.net/BlackLabel/ewauprqh/
I want to incorporate delete button in the actions column. It can come beside can cel button. This is how it looks as of now-
This is my code:
<script>
var task_link = "http://localhost/cssdeck/dashboard/dashboar.php?Emp_ID=";
$(document).ready(function () {
$("#emp_grid").jqGrid({
url: "getGridData.php?q=3",
datatype: "json",
colNames: ["Emp Id", "Emp Name", "Emp Start Date", "Emp End Date" , "Percent", "Status","ACTIONS"],
colModel: [
{ name: "emp_id",index:"emp_id",editable:true,formatter: formatEmpID},
{ name: "emp_name",index:"emp_name",align:"center",editable:true},
{ name: "emp_startDate",index:"emp_startDate",sorttype:'date',edittype:"text",formatter: 'date',formatoptions: { srcformat: 'Y/m/d', newformat: 'm/d/Y'},editable:true,
editoptions: {
// dataInit is the client-side event that fires upon initializing the toolbar search field for a column
// use it to place a third party control to customize the toolbar
dataInit: function (element) {
$(element).datepicker({
dateFormat: 'mm/dd/yy',
//minDate: new Date(2010, 0, 1),
maxDate: new Date(2020, 0, 1),
showOn: 'focus'
});
}
},
searchoptions: {
dataInit: function(elem) {
$(elem).datepicker({
dateFormat: 'mm/dd/yy',
//minDate: new Date(2010, 0, 1),
maxDate: new Date(2020, 0, 1),
showOn: 'focus'
});
}
}
},
{ name: "emp_endDate",index:"emp_endDate",sorttype:'date',edittype:"text",formatter: 'date',formatoptions: { srcformat: 'Y/m/d', newformat: 'm/d/Y'},editable:true,
editoptions: {
// dataInit is the client-side event that fires upon initializing the toolbar search field for a column
// use it to place a third party control to customize the toolbar
dataInit: function (element) {
$(element).datepicker({
dateFormat: 'mm/dd/yy',
//minDate: new Date(2010, 0, 1),
maxDate: new Date(2020, 0, 1),
showOn: 'focus'
});
}
},
searchoptions: {
dataInit: function(elem) {
$(elem).datepicker({
dateFormat: 'mm/dd/yy',
//minDate: new Date(2010, 0, 1),
maxDate: new Date(2020, 0, 1),
showOn: 'focus'
});
}
}
},
{ name: "percentComplete",index:"percentComplete",editable:true},
{ name: "emp_status",index:"emp_status",editable:true,edittype:"select",editoptions: {value:"Onboarding:Onboarding;Released:Released"}},
{name:'act',index:'act', width:130,sortable:false}
],
rowNum:10,
rowList:[10,20,30],
pager: '#pemp_grid',
loadonce:true,
ignoreCase: true,
viewrecords: true,
autowidth:true,
cmTemplate: { title: false },
height:'100%',
gridComplete: function(){
var ids = jQuery("#emp_grid").jqGrid('getDataIDs');
for(var i=0;i<ids.length;i++){
var cl = ids[i];
be = "<input style='height:22px;width:40px;' type='button' value='Edit' onclick=\"jQuery('#emp_grid').jqGrid('editRow','"+cl+"');\" />";
se = "<input style='height:22px;width:40px;' type='button' value='Save' onclick=\"jQuery('#emp_grid').jqGrid('saveRow','"+cl+"');\" />";
ce = "<input style='height:22px;width:50px;' type='button' value='Cancel' onclick=\"jQuery('#emp_grid').jqGrid('restoreRow','"+cl+"');\" />";
jQuery("#emp_grid").jqGrid('setRowData',ids[i],{act:be+se+ce});
}
},
editurl: "update.php",
caption: "Employee Details"
});
$("#emp_grid").jqGrid('navGrid',"#pemp_grid",{edit:false,del:false,refresh: false, search: false} );
$("#emp_grid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
});
function formatEmpID(cellvalue, options, rowObject) {
var link = task_link + cellvalue;
return "<a href='" + link + "' target='_blank'>" + cellvalue + "</a>";
}
</script>
I have been trying to achieve this from past 2 days but all effort in vain.
Would really appreciate any help.
I have working php script that stores the name and address of the company in variables. I then echo it out like this:
$(document).ready(function() {
$("#map").gmap3({
marker:{
address: "<?echo $coord;?>"
},
map:{
options:{
zoom:15,
mapTypeControl: true,
navigationControl: true,
scrollwheel: true,
streetViewControl: true
}
}
});
});
How would I add the name of the company to show below the marker? For example: this?
I tried to add:
marker:{
address: "<?echo $coord;?>"
title: "<?echo $com_name;?>"
}
But this doesn't work.
Thank you.
The title property must be inside option property.
var marker = {
latLng: [53.23564, 24.32654],
data: 'some data',
options: {
title: 'Title',
icon: '/Path/to/custom/icon/if/you/need.png'
}
}
Other information you can show with infowindow.
Example:
$(".gmap-widget .gmap3").gmap3({
action: "addMarkers",
markers: markers,
marker: {
events: {
click: function(marker, event, data){
var map = $(this).gmap3('get');
infowindow = $(this).gmap3({action:'get', name:'infowindow'});
if (infowindow){
infowindow.open(map, marker);
infowindow.setContent(data);
} else {
$(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data, maxWidth: 300}});
}
}
}
}
});