I'm using the gem fullcalendar-rails.
I'm using ajax for the data and a modal for the event input.
After the event modal has added the new record, I use the fullcalendar refectchevents to show the new event on the calendar. This works in every browser I've tested except IE 9.
Here is the code:
$('#calendar').fullCalendar
ignoreTimezone: true,
editable: true,
defaultView: 'month',
height: 500,
slotMinutes: 30,
selectable: true,
selectHelper: true,
editable: false,
select: (start, end, allDay) ->
title = $("#title")
description = $("#description")
hours = $("#hours")
workorder = $("#workorder_id")
actcode = $("#actcode_id")
$("#dialog-form").dialog
autoOpen: true
height: 500
width: 400
modal: true
buttons:
"Create Labor": ->
$.create "/events/",
event:
workorder_id: workorder.val(),
actcode_id: actcode.val(),
title: title.val(),
description: description.val(),
hours: hours.val(),
starts_at: "" + start,
ends_at: "" + end,
all_day: allDay,
maxsynch: "N",
employee_id: $('#calendar').data('employeeid'),
overtime: "TRUE" if $("#overtime").is(":checked")
$(this).dialog "close"
$('#calendar').fullCalendar('refetchEvents')
UPDATE1
I changed the following - but, it didn't fix it.
eventSources: [{
url: '/events',
cache: false,
}],
UPDATE2
This worked:
...
employee_id: $('#calendar').data('employeeid'),
overtime: "TRUE" if $("#overtime").is(":checked")
complete: ->
$('#calendar').fullCalendar('refetchEvents')
I faced similar problem but i haven't used fullcalendar with rails.
IE caches the data So each time you call refetch events it shows cached events.
I have used events_function to fetch events.
In that I set cache: false option in ajax request to get events.
It worked in my case.
Related
I use free-jqGrid v4.14.0. I have a table, when I click on a row in this table, I execute a stored procedure and in another table I enter the result.
The problem is that when you first click on a row in the table, the data does not load into the second table, and when the second button is clicked, the data appears, and this problem occurs only once, the following clicks immediately load the data into the second table.
When you first click in the browser console, you can see that the url stored procedure is loading: '# Url.Action ("GetAccident")',
$(document).ready(function () {
$("#jqg").jqGrid({
url: '#Url.Action("GetAccident")',
datatype: "json",
colNames: ['id_Accident', .......],
colModel: [
{ name: 'id_Accident', index: 'id_Accident', autowidth: true, sortable: false },
.....................
.....................
],
guiStyle: "bootstrap",
iconSet: "fontAwesome",
pager: "#pager",
rowList: [10, 20, 30],
rowNum: 10,
loadonce: false,
onSelectRow:
function (idRow) {
celValue = $('#jqg').jqGrid('getCell', idRow, 'id_Accident');
jQuery("#jqg1").jqGrid('setGridParam', { url: '#Url.Action("GetOrganizationCulpritByIdAccident")?celValue=' + celValue, page: 1 }).trigger('reloadGrid');
}
});
jQuery("#jqg1").jqGrid({
url: '#Url.Action("GetOrganizationCulpritByIdAccident")?celValue=' + 0,
datatype: "json",
colNames: ['id_Accident', 'Name Organization'],
colModel: [
{ name: 'id_Accident', index: 'id_Accident', autowidth: true, stype: 'text', sortable: true },
{ name: 'Name', index: 'Name', autowidth: true, sortable: true }
],
guiStyle: "bootstrap",
pager: "#pager1",
rowList: [10, 20, 30],
rowNum: 10,
});
I can't reproduce the problem. You can examine Network traffic of the demo https://jsfiddle.net/OlegKi/ed0yLkce/1/. I uses
datatype: "local"
in the second grid as initial option to prevent unneeded Ajax requests. I use additionally idPrefix with different values in both grids to be sure that one will have no conflicts with duplicates of ids. You will see in Network tab of Developer Tools that the request to for example https://fiddle.jshell.net/echo/json?celValue=test2 will be send it the second row is selected.
Using fullCalendar I am not able to get it to display in a different timezone. I am in pacific timezone, but I want to see the events as if I was on New York. I have also tried to pass the dates in with the offset (2014-11-20T13:33:00-0800). No matter what, they display as pacific time zone. What am I doing wrong?
$(document).ready(function () {
var dt = "2014-11-20";
var tz = "America/New_York";
//Call the fullCallendar method. You can replace the '#calendar' with the ID of the dom element where you want the calendar to go.
$('#calendar').fullCalendar({
header: {
//left: 'prev,next today',
left: '',
center: 'title',
right: ''
//right: 'month,agendaWeek,agendaDay'
},
editable: false,
defaultDate: dt,
timezone: tz,
defaultView: 'agendaDay',
allDaySlot: false,
events: [
//At run time, this APEX Repeat will reneder the array elements for the events array
{
title: "New Photo Shoot",
start: '2014-11-20T13:27:00',
end: '2014-11-20T14:27:00',
url: '',
allDay: false,
className: 'event-personal'
}, {
title: "GMB/Calendar Test 4 - Initial Photo Shoot",
start: '2014-11-20T11:00:00',
end: '2014-11-20T13:00:00',
url: '/00UJ00000081xpZMAQ',
allDay: false,
className: 'event-birthday'
}, {
title: "GMB/Calendar Test 4 - Initial Photo Shoot",
start: '2014-11-20T10:36:00',
end: '2014-11-20T12:36:00',
url: '/00UJ00000081xptMAA',
allDay: false,
className: 'event-birthday'
}, ]
});
});
I've been trawling across the web for answers, and maybe it's a case of it being more complicated than I expect (or I just don't understand the solutions), but I am looking for a way to simply delete a selected row from my jqgrid by clicking the trash icon.
Currently my grid is being populated with Linq to SQL data.
Here is my grid:
jQuery("#grid").jqGrid({
url: '<%= ResolveUrl("~/Home/GetData") %>',
datatype: "json",
mtype: 'GET',
postData: { DDLid: function () { return jQuery("#DDL option:selected").val(); } },
colNames: ['Col1', 'Col2'],
colModel: [
{ name: 'Col1', index: 'Col1', width: 200, editable: false },
{ name: 'Col2', index: 'Col2', width: 200, editable: false }
],
jsonReader: {
repeatitems: false
},
rowNum: 10,
pager: jQuery('#gridpager'),
sortname: 'Type',
viewrecords: true,
sortorder: "asc",
caption: "Table"
}).navGrid('#gridpager', { del: true, add: false, edit: false, search: false }, {}, {}, {url: "Delete"});
Now the 'id' in post data is NOT the primary key in this table - I just need it to help populate the grid.
What I would like to get is the selected row id and pass it to the Delete method, but I can't find any way to do that.
I have tried using jQuery("#grid").getGridParam('selrow') in the postData but it always returns null.
Any help would be greatly appreciated.
Here is my delete method, for reference:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Delete(int DDLid)
{
int row = Convert.ToInt32(/*I NEED THIS ID*/);
var query = from x in _ctx.DataTable
where ((x.id == row))
select x;
_ctx.DataTable.DeleteOnSubmit(query.Single());
_ctx.SubmitChanges();
return Json(true);
}
This method is called and is fine, but I am getting the wrong id. I need the selected row's id. This breaks because the DDLid returns more than one row (since it is used to populate the grid).
I hope that makes sense.
I discovered where I would pass the selected index (but then I realised I was looking for the primary key, rather than selected index, but it is the same result regardless)
I needed to add this to my navGrid:
{url: "Delete", mtype: "POST", reloadAfterSubmit: true,
serializeDelData: function (postdata) {
var selectedrowindex = jQuery("#grid").jqGrid('getGridParam', 'selrow');
var dataFromCellByColumnIndex = jQuery('#grid').jqGrid ('getCell', selectedrowindex , 1);
return {DDLid: postdata.id, name: dataFromCellByColumnIndex};
}
});
So this passes a column value to my delete method as well as the DDLid, but I could easily swap dataFromCellByColumnIndex with selectedrowindex.
You should just implement Delete action having id parameter:
public JsonResult Delete(string id) {
...
}
To reference the action in the JavaScript code I would use 'url: <%= Url.Action("Delete") %>' instead of url: "Delete" which you use currently.
You can download here demo project which I created for the answer. The project implement deleting of the row together with many other features which you currently not need.
You can make another post inside delete method with your own params. After defining grid, you can define each action in detail. It is posting actual delete with correctid and original one is posting fake id. JQgrid is using row count for delete not the primary key. They may change it with recent versions, but this was working Jqgrid 3.8
jQuery("#ClientGrid").jqGrid('navGrid', '#ClientGridPager',
{ view: true, edit: true, search: false }, //options
{height: 240, caption: 'Edit Client', beforeShowForm: hideIDColumn, reloadAfterSubmit: true, mtype: 'POST', url: "/Settings/EditClient", jqModal: false, closeOnEscape: true, bottominfo: "Fields marked with (*) are required" }, // edit options
{height: 340, caption: 'Add Client', beforeShowForm: hideIDColumn, reloadAfterSubmit: true, mtype: 'POST', url: "/Settings/CreateClient", jqModal: false, closeOnEscape: true, bottominfo: "Fields marked with (*) are required", closeAfterAdd: true }, // add options
//delete method
{reloadAfterSubmit: true, beforeSubmit: function (postdata, formid)
{
var lastselectedID = -1;
if (ClientGridrow != null || typeof (ClientGridrow) != "undefined")
{
lastselectedID = $("#ClientGrid").getCell(ClientGridrow, 'ID_PK');
}
//CUSTOME delete to send taskid instead of rowid
$.ajax({ type: "POST", url: "/Settings/DeleteClient/?objid=" + lastselectedID,
data: "", success: function (response)
{
$("#ClientGrid").trigger("reloadGrid"); //reloadAfterSubmit: true is not working in Chrome
}
});
return [true, "Delete failed message"];
}, caption: 'Delete Client', datatype: 'local', url: "/Settings/DeleteClient/?objid=-1", jqModal: false, closeOnEscape: true
}, // del options..we make two posts
{closeOnEscape: true }, // search options
{height: 230, width: 350, jqModal: false, closeOnEscape: true} // view options
);
In my rails application ,iam using jqgrid to enter data in rows.there is a description box which allows certain no of characters.The problem here is i can drag and drop images and urls which the description box accepts.How can i prevent it.
here is the short code i have taken out from the main after some edit..
$(document).ready(function() {
colNamesData = [ 'Description', 'Hours']
colModelHash = [
{name:'description',index:'description', width:130,sorttype:"text", editable:true, edittype:"textarea", editoptions: {rows:"5",cols:"25",maxlength:"255"}, stype:'text'},
{name:'hours',index:'hours', width:130, align:'center',editable:true, edittype:"select",editoptions:{value:"<%= hours_options %>"}, search:true, stype:'text'}
},
]
$("#data_table").jqGrid({
datatype: "local",
height: "auto",
autowidth: true,
ignoreCase: true,
colNames: colNamesData,
colModel: colModelHash,
pager: '#pager',
rowNum:10,
rowList:[10,25,50,100],
sortname: 'hours',
sortorder: 'desc',
viewrecords: true,
editurl:"/data_call.json",
caption: 'My info',
},
data:<%= raw #data_jqgrid_date.to_json %>
});
jQuery("#data_table").jqGrid('navGrid','#pager',{del:false,add:true,edit:false},{}, {}, {});
var details = <%= raw #details.to_json %>
You can bind 'drop' event handler to the 'description' column having edittype:"textarea". To do this you can include dataEvents which look like
editoptions: {
dataEvents: [
{
type: 'drop',
fn: function(e) {
console.log('drop');
if (e.originalEvent !== undefined &&
e.originalEvent.dataTransfer !== undefined &&
e.originalEvent.dataTransfer.getData) {
console.log("URL: "+e.originalEvent.dataTransfer.getData('URL'));
console.log("Text: "+e.originalEvent.dataTransfer.getData('Text'));
e.preventDefault();
}
}
}
]
}
in the code the URL and the Text dropped in the control will be displayed on the console and the dropping will be prevented. You can prevent the dropping depend on the data returned by dataTransfer.getData('URL') and dataTransfer.getData('Text').
In my view you can have a JavaScript method.
Just bind the change method of that text box with the method.
Check the value, if it contains any invalid character then reset it to balnk('') and return false.
So I've got basic example of jqgrid working in ASP.NET MVC, the javascript looks like this:
$(document).ready(function() {
$("#list").jqGrid({
url: '../../Home/Example',
datatype: 'json',
myType: 'GET',
colNames: ['Id', 'Action', 'Parameters'],
colModel: [
{ name: 'id', index: 'id', width: 55, resizable: true },
{ name: 'action', index: 'action', width: 90, resizable: true },
{ name: 'paramters', index: 'parameters', width: 120, resizable: true}],
pager: $('#pager'),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
multikey: "ctrlKey",
imgpath: '../../themes/basic/images',
caption: 'Messages'
});
Now I am trying to implement the search button that they have in the jqgrid examples (click on Manipulating/Grid Data). But I don't see how they implement it. I'm expecting e.g. a "search:true" and a method to implement it.
Has anyone implemented search on jqgrid or know of examples that show explicitly how to do it?
I recently implemented this myself (yesterday actually) for the first time. The biggest hurdle for me was figuring out how to write the controller function. The function signature is what took me the longest to figure out (notice the _search, searchField, searchOper, and searchString parameters as those are missing from most of asp.net mvc examples I've seen). The javascript posts to the controller for both the initial load and for the search call. You'll see in the code that I'm checking whether the _search parameter is true or not.
Below is the controller and the javascript code. My apologies for any formatting issues as this is my first time posting on here.
public ActionResult GetAppGroups(string sidx, string sord, int page, int rows, bool _search, string searchField, string searchOper, string searchString)
{
List<AppGroup> groups = service.GetAppGroups();
List<AppGroup> results;
if (_search)
results = groups.Where(x => x.Name.Contains(searchString)).ToList();
else
results = groups.Skip(page * rows).Take(rows).ToList();
int i = 1;
var jsonData = new
{
total = groups.Count / 20,
page = page,
records = groups.Count,
rows = (
from appgroup in results
select new
{
i = i++,
cell = new string[] {
appgroup.Name,
appgroup.Description
}
}).ToArray()
};
return Json(jsonData);
}
And here is my HTML/Javascript:
$(document).ready(function() {
$("#listGroups").jqGrid({
url: '<%= ResolveUrl("~/JSON/GetAppGroups/") %>',
datatype: 'json',
mtype: 'GET',
caption: 'App Groups',
colNames: ['Name', 'Description'],
colModel: [
{ name: 'Name', index: 'Name', width: 250, resizable: true, editable: false},
{ name: 'Description', index: 'Description', width: 650, resizable: true, editable: false},
],
loadtext: 'Loading Unix App Groups...',
multiselect: true,
pager: $("#pager"),
rowNum: 10,
rowList: [5,10,20,50],
sortname: 'ID',
sortorder: 'desc',
viewrecords: true,
imgpath: '../scripts/jqgrid/themes/basic/images'
//});
}).navGrid('#pager', {search:true, edit: false, add:false, del:false, searchtext:"Search"});
See my article on codeproject, which explains how we can do multiple search in jqgrid:
Using jqGrid’s search toolbar with multiple filters in ASP.NET MVC
I use IModelBinder for grid's settings binding, expression trees for sorting and filtering data.
In case you're still wondering about dealing with optional parameters, just declare them as nullables by adding a ? after the type name.
Now you'll be able to compare them with null to check if they are absent.
Note that you don't need to do this with strings, as they are already nullable.
#Alan - ok, I used your method and extended my webservice to expect those additional three parameters and check for "_search" is true/false. But, in order to make this work, I had to add this to my ajax call in the JavaScript:
if (!postdata._search) {
jQuery("#mygrid").appendPostData( {searchField:'', searchOper:'', searchString:''});
}
Just follow this link. It has all implementations explained...
You can create a button searchBtn and can invoke search form on click
$("#searchBtn").click(function(){
jQuery("#list4").searchGrid(
{options}
)});