I have a fullCalendar where event data comes from a JSON feed.
The field names do not match fullCalendar field names so I use the eventDataTransform function like this:
eventDataTransform: function (eventData){
var ro = new Object();
ro.start = eventData.myStartField;
ro.end = eventData.myEndField;
ro.title = eventData.myTitleField;
ro.sourceObject = eventData;
console.log("converted event", ro);
return ro;
}
I keep the original JSON object in a custom field 'sourceObject'.
This works perfect. No issues.
Until I add a constraint to fullCalendar:
eventConstraint: {start: "08:00:00", end: "16:00:00"}
From that moment on, every time I move an event or alter it's duration, the eventDataTransform function is triggered and all my events get a start and end value of undefined.
This is weird because a drag shouldn't trigger the eventDataTransform function at all.
Is this a bug or am I doing something wrong?
Thanks
Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel='stylesheet' href='css/fullcalendar.min.css' />
<link href='css/scheduler.min.css' rel='stylesheet' />
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src='js/moment.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script src='js/scheduler.min.js'></script>
<script>
$(document).ready(function() {
console.log("init");
$('#calendar').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
defaultView: 'agendaWeek',
weekends: false,
weekNumbers: true,
allDaySlot: false,
slotLabelFormat: 'H:mm',
nowIndicator: true,
selectable: true,
defaultDate: '2017-09-12',
editable: true,
eventConstraint: {start: "08:00:00", end: "16:00:00"},
eventDataTransform: function (eventData){
var ro = new Object();
ro.start = eventData.myStartField;
ro.end = eventData.myEndField;
ro.title = eventData.myTitleField;
ro.sourceObject = eventData;
console.log("converted event", ro);
return ro;
},
events: [
{
myTitleField: 'Long Event',
myStartField: '2017-09-07',
myEndField: '2017-09-10'
},
{
myTitleField: 'Meeting',
myStartField: '2017-09-12T10:30:00',
myEndField: '2017-09-12T12:30:00'
},
{
myTitleField: 'Lunch',
myStartField: '2017-09-12T12:00:00'
},
{
myTitleField: 'Meeting',
myStartField: '2017-09-12T14:30:00'
},
{
myTitleField: 'Happy Hour',
myStartField: '2017-09-12T17:30:00'
}
]
});
});
</script>
</head>
<body>
<div id="calendar" class="container">
</div>
</body>
</html>
Related
I have the below code implemented, but the desired output is not rendered.
The list boxes are used to filter the grid view. I can filter the grid view but the filters (list boxes) are being rendered as it is. I need them to be inside the dropdown.
I have included the links to relevant resources in the head section, yet the control is rendered as a list box. I have seen this code work for many tutorials, why is it not working for me? Any help is appreciated
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
<script src = "/scripts/jquery.min.js"></script>
<script src = "/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("[id$=TextBox_From]").datepicker(
{
dateFormat: 'mm/dd/yy', autoclose: true
}
);
$("[id$=TextBox_To]").datepicker(
{
dateFormat: 'mm/dd/yy', autoclose: true
}
);
var FromDate = new Date(Session["start_date"]);
$("[id$=TextBox_From]").datepicker('setDate', FromDate);
var ToDate = new Date(Session["end_date"]);
$("[id$=TextBox_To]").datepicker('setDate', ToDate);
$("[id$=lstrpa_ticket_id]").multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
$("[id$=lstPortal_ID]").multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
$("[id$=lstRegion]").multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
$("[id$=lstMarket]").multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
$("[id$=lstClient]").multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
$('#lstAgency').multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
$("[id$=lstrequest_type]").multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
$("[id$=lstts_type]").multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
$("[id$=lstcompleted_success]").multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
$("[id$=lsttime_taken_validation]").multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
$("[id$=lsttime_taken_preQA]").multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
$('[id*=lst1]').multiselect({ includeSelectAllOption: true, enableCaseInsensitiveFiltering: true, enableFiltering: true });
});
</script>
In the above code for some places I tried different ways to identify list box control in different ways for checking, yet both failed:
$("[id$=lstPortal_ID]").multiselect
$('#lstAgency').multiselect
The control is rendered as :
The desired output is like this
Please check jQuery library is referenced multiple times,that may be the reason i guess.
I am using bootstrap table to display some data in my web application. https://bootstrap-table.com/ and I want to put an export feature in. The docs say to use https://github.com/hhurz/tableExport.jquery.plugin so I have added this to my imports and made the necessary code changes. Within the docs for this it says you can specify a format for the cells you are exporting by applying optional html data attributes while generating the table but how do I do this if my table is generated using bootstrap-table. I can't seem to work it out.. I basically need to the html data attribute data-tableexport-msonumberformat="0" to a set of td's generated by my bootstrap-table javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="/webjars/bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="/webjars/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script type="text/javascript" src="/webjars/bootstrap/4.5.3/js/bootstrap.min.js"></script>
<link href="/webjars/bootstrap-table/1.16.0/bootstrap-table.css" rel="stylesheet"></script>
</head>
<body class="bg-light">
<button id="exportExcelBtn" class="btn btn-sm btn-success" type="button">
Export
</button>
<table id="table"></table>
<script src="/webjars/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
<script src="/webjars/bootstrap-table/1.16.0/extensions/export/bootstrap-table-export.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('#exportExcelBtn').on('click', function () {
$('#table').tableExport({
type: 'excel',
fileName: "Order Summary"
});
});
$('#table').bootstrapTable({
url: '/getTableData',
columns: [
{
field: 'orderNo',
title: 'Order No',
sortable: true
},
{
field: 'itemNo',
title: 'Item No',
sortable: true,
**tableExport: {msoNumberFormat: '0'}**
}
})
});
</script>
</body>
</html>
https://github.com/himingby/tableExport.jquery.plugin/blob/master/test/index.html
could you try this below?
<script type="text/javascript">
function DoOnMsoNumberFormat(cell, row, col) {
var result = "";
if (row > 0 && col === 0)
result = "\\#";
else if (row > 0 && col === 2)
result = "0"; // #issue 327: Preserve long numbers
return result;
};
$( document ).ready(function() {
$('#exportExcelBtn').on('click', function () {
$('#table').tableExport({
type: 'excel',
fileName: "Order Summary"，
mso:{onMsoNumberFormat: DoOnMsoNumberFormat},
});
});
$('#table').bootstrapTable({
url: '/getTableData',
columns: [
{
field: 'orderNo',
title: 'Order No',
sortable: true
},
{
field: 'itemNo',
title: 'Item No',
sortable: true
}
})
});
After much frustration I finally got the search icon to appear in the navigator area but now when I click on it the screen turns "modal" but no search dialog appears!
Here's the head section of my code:
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<link href="../Styles/Examiners.css" rel="stylesheet" type="text/css" />
<link href="../Styles/jqgrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../Styles/jqgrid/searchFilter.css" rel="stylesheet" type="text/css" />
<link href="../Styles/jqgrid/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jqgrid/grid.locale-en.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/jquery.jqGrid.src.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/grid.addons.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/grid.postext.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/grid.setcolumns.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/jquery.contextmenu.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/jquery.tablednd.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/ui.multiselect.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/jquery.searchFilter.js" type="text/javascript"></script>
</asp:Content>
And here's my grid definition
$("#examinersGrid").jqGrid({
url: baseUrl() + selectQuery(),
mtype: "POST",
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
if (postData.searchField === undefined) postData.searchField = null;
if (postData.searchString === undefined) postData.searchString = null;
if (postData.searchOper === undefined) postData.searchOper = null;
//if (postData.filters === undefined) postData.filters = null;
return JSON.stringify(postData);
},
datatype: 'json',
colNames: ["Name", "Assignments"],
colModel: [
{ name: 'displayName', index: 'displayName', width: 200, },
{ name: 'assignments', index: 'assignments', width: 120,
formatter: 'integer', sorttype: 'int', align: 'right'
}
],
jsonReader: {
root: "d.rows",
page: "d.page",
total: "d.total",
records: "d.records",
id: "examinerID"
},
autowidth: true,
height: "auto",
rowNum: 10,
loadonce: false,
gridview: true,
pager: "#examinersPager",
search: {
caption: "Search...",
Find: "Find",
Reset: "Reset",
odata: ['equal', 'not equal', 'less', 'less or equal', 'greater', 'greater or equal', 'begins with', 'does not begin with', 'is in', 'is not in', 'ends with', 'does not end with', 'contains', 'does not contain'],
groupOps: [{ op: "AND", text: "all" }, { op: "OR", text: "any"}],
matchText: " match",
rulesText: " rules"
},
rowList: [10, 20, 30],
sortname: "displayName",
sortorder: "asc",
viewrecords: true,
autoencode: true,
}).navGrid('#examinersPager', { add:false, edit: false, del: false, refresh: false, search: true });
});
Any ideas? I'm tearing my hair out here!
It's quite simple, really... I'm not sure what triggered it.
The solution was to move my jquery.jqGrid.src.js reference below all
the plugin references above it.
Sigh. So it's that old javascript gotcha of making sure the script references come in the right order.
In IE9, every click in certain place in form increases form height.
I used Oleg jqGrid sample for create testcase.
Steps to reproduce:
Open page below in Internet Explorer 9
Click in first row in text 'clicking me increases form height' so that it becomes yellow
click in view record button in lower left corner
click in 'clicking me increases form height' text in form
Observed:
Every click increases form height in Internet Explorer 9.
How to fix this ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>how to center jqGrid popup modal window?</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/jquery.searchFilter.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.multiselect.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/ui.multiselect.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.base.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.common.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.formedit.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.inlinedit.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.custom.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.fmatter.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.searchFilter.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.jqueryui.js"></script>
<!--<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/js/jquery.jqGrid.min.js"></script>-->
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var mydata = [
{id:"2",invdate:"2007-10-02",name:"clicking me increases form height clicking me increases form height test2 sdfsdfsd dfksdfkj sdfjksdfjk sdsdl sdklfsdjklf dsflsdl sdlfsdfklj lsdlf sdlsdfklsdjlk sdfsdlfkjsd sflsdfkjsdfs sdfsjdfklsdklfj fsdjflsdfj",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}
];
var grid = $("#list");
grid.jqGrid({
data: mydata,
datatype: "local",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', key: true, width:70, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date", editable: true},
{name:'name',index:'name', width:100, editable: true, edittype: 'textarea',
wrap: 'on',
editoptions: { wrap : "on",
style : "width:30px"
}
},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", editable: true},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable: true},
{name:'total',index:'total', width:80,align:"right",sorttype:"float", editable: true},
{name:'note',index:'note', width:150, sortable:false}
],
pager:'#pager',
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
height: "100%",
caption: "Custom Navigation to Top Toolbar"
});
grid.jqGrid('navGrid','#pager',{add:false,del:false,search:false,refresh:false, edit: false, view: true},
{ beforeShowForm: function(form) {
// "editmodlist"
var dlgDiv = $("#editmod" + grid[0].id);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
}
});
});
//]]>
</script>
</head>
<body>
<table id="list"><tbody><tr><td/></tr></tbody></table>
<div id="pager"/>
</body>
</html>
Yes Andrus, it's exactly the same IE9 bug which reference I posted you today: this bug report. The bug was fixed in the main grid in jqGrid 4.0, but you found one more place where exactly the same problem exist.
To fix the problem I suggest the following. In the View form where the error take place we test whether the value of height of the form is 'auto' and the code run under IE9. In the case we will change the setting height: 'auto' to height: '100%':
grid.jqGrid('navGrid', '#pager', {view: true}, {}, {}, {}, {},
{
beforeShowForm: function ($form) {
if ($.browser.msie && $.browser.version.slice(0,3) === '9.0' &&
$form[0].style.height === 'auto') {
$form[0].style.height = '100%';
}
}});
See the demo demonstrate the bug fix (here one can test the bug in IE).
UPDATED: I looked in the source code of viewGridRow and found more easy workaround. One should just use (see the demo)
{ dataheight: '100%' }
setting instead of default dataheight: 'auto' setting. By the way I didn't found in the code of jqGrid any place where the height parameter will be used. It seems, that one should now use dataheight parameter instead.
If I would find enough time I would post the bug to Microsoft as the official support request. My previous expiration was always the same: MS confirmed the bug as confirmed that my request was for free: I don't have to pay for the request. On the other side to create the clear example and to describe the problem one need time. So I should invest my time and "for free". Moreover the bug will be typically not fixed in the current product (IE9) and will be probably fixed in the next version of IE (IE10). In such situation the writing of the bug reports is not really attractive. :-)
I'm trying to run the treegrid example but it only gives me the grid with no data in it!
this is my default.aspx:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My tree grid</title>
<!-- Ext -->
<link rel="stylesheet" type="text/css" href="ExtJs4/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtJs4/bootstrap.js"></script>
<script type="text/javascript" src="ExtJs4/ext-all.js"></script>
<!-- example code -->
<script type="text/javascript" src="Scripts/treepanel.js"></script>
</head>
<body>
<h1>My tree grid</h1>
<div id="tree-div"> </div>
this is my treepanel.js
Ext.Loader.setConfig({ enabled: true }); //
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.tip.QuickTipManager',
'Ext.container.Viewport',
'Ext.layout.*',
'Ext.form.Panel',
'Ext.form.Label',
'Ext.grid.*',
'Ext.data.*',
'Ext.tree.*',
'Ext.selection.*',
'Ext.tab.Panel'
]);
Ext.onReady(function ()
{
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'task', type: 'string'},
{name: 'user', type: 'string'},
{name: 'duration', type: 'string'}
]
});
var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'ajax',
url: 'treegrid.json'////
},
folderSort: true
});
//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: 'tree-div',
rootVisible:true,
store: store,
autoload:true,
columns: [{xtype: 'treecolumn', text: 'Task', dataIndex: 'task' },{text: 'Assigned To', dataIndex: 'user'}]
});
});
am I doing something wrong here?
I have no error msg from my firebug...so why isn't it working?
if I can't run an example how am I going to do more..I'm frustrated with this.
not sure, but the "autoLoad: true" is now on the panel, but shouldn't it be on the store?
Install PHP and do the following in IIS:
click on the new site
click on MIME types
right click in open space > Add > File name extension: "json" ... MIME Type: "application/x-javascript"
Adding more details:
http://www.sencha.com/forum/showthread.php?33266-Some-Problem-with-JSON&p=229858&viewfull=1#post229858