Customize Kendo DataSource's OData URL? - asp.net

I'm using a Kendo Grid pointed to an ASP.NET Web API OData controller. I'm wondering if it's possible to customize/overwrite the generated OData URL that Kendo's DataSource generates? My issue is my date fields are DateTimeOffset and I'm trying to sort by those fields, however Kendo's model fields only support string/bool/number/date, nothing for DateTimeOffset. The URL it generates for date fields is:
http://localhost/api/odata/customers?%24inlinecount=allpages&%24top=10&%24filter=(CreatedDate+ge+datetime%272015-01-01T00%3A00%3A00%27) which fails.
It should be:
http://localhost:900/api/odata/customers?%24inlinecount=allpages&%24top=10&%24filter=(CreatedDate+ge+datetimeoffset%272015-01-01T00%3A00%3A00%27)
Is it possible to force it to use datetimeoffset instead?

You are probably not using the right "odata" transport. Try with "odata-v4". More info is available here.

For my ASP.NET Web API 2's OData V4 controllers, I actually need this URL format:
http://localhost:XX/odata/Things?$filter=DteTmOfsField eq 2012-12-03T07:16:23Z
And this javascript is working pretty good for me:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata-v4",
transport: {
read: {
url: "/odata/Things/",
dataType: "json"
},
parameterMap: function (options,type) {
var paramMap = kendo.data.transports.odata.parameterMap(options, type);
if (paramMap.$filter) {
paramMap.$filter = paramMap.$filter.replace(/datetime'([-0-9T:]{19})'/gi, "$1Z");
}
paramMap.$count = true;
delete paramMap.$inlinecount; // <-- remove inlinecount parameter
delete paramMap.$format; // <-- remove format parameter
return paramMap;
}
},

Related

cakephp and full calendar integration

i am new developer and i want to make an app in cakephp 3.7 thas uses jquery full calendar plugin for reservations.In my database is stored a specific date range (starting date and ending date fields).I want to use this date range in my calendar so that if a user clicks on a specific day on the callendar that is out of this date range, the app will display a messange informing the user that he cannot make a reservation for that day!
Any useful suggestions on who i will handle on this ??
Thank you!!
I have done it using the cakephp 3.6.
Generic steps that you would follow:
You will include your full calendar js and jquery in the 'full
calendar' template
Then initialise your fullcalendar. Now you should see the calendar.
Once done, from the fullcalendar make an ajax call to your controller to get the events. eg.
var fcSources = {
loadEvents: {
url: //your controller action,
type: "GET",
cache: true,
timezone: "Europe/London",
className: "events",
dataType: "json",
success: function (data) {
return data.events;
}
},
}
Later part can be done by simply checking the date value against current date.

How to use server-side pagination with ajax in bootstrap-table?

I am looking for a way to implement the server-side (paginationdata-side-pagination="server") for bootstrap-table with spring mvc. I want to retrieve data from the controller partially based on the pagination page id clicked by the user. I searched a lot but couldn't find any good resource on this through the internet.
Hope this helps:
$(document).ready(function(){
ajaxGet();
});
function ajaxGet(){
var table_params = $('#docs_table').bootstrapTable({
url: 'ajax/test_1/data?',
queryParams: function (p) {
return {
limit: p.limit,
offset: p.offset,
sort: p.sort,
order: p.order,
search: p.search,
'data[]': [other data],//for multi-select filter
};
}
});
$('#docs_table').bootstrapTable('refresh');
}
You will receive parameters on server side as following:
Parameters for paging
Limit -- $_GET['offset']
Offset -- $_GET['offset']
Parameters for data manipulation
Search -- $_Get['search']
Sort -- $_Get['sort']
Order -- $_Get['order']
Reference:: Python example

Get dates during fullcalendar initializing

I'm using eventSources method to initialize FullCalendar jQuery plugin.
eventSources: [
initEvents(visibleStartDate, visibleEndDate)
]
where initEvents is and ajax call to jsp page that returns json object representing events to be rendered. It works great but now I'd like to fetch the event only for the dates visible on calendar. I read in documentation that I could use visStart and visEnd on View object to get the start and end day of the calendar, however I don't know how to get that information at the time I initialize my eventSources. Is there a way? Thank you in advance for your responses.
Eric
It turns out that fullcalendar plugin will add start and end HTTP parameters when calendar sources are fetched externally. Full details are described in documentation here: http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/
My code (mix of javascript, JSP, JSF):
FullCalendal initialization:
page.view.calendar.fullCalendar(
{
....
eventSources: [
page.control.initEventSources(#{sessionBean.myCalendar.calendarConfgIdNbr},'Approved'),
page.control.initCalendarHolidays(#{sessionBean.myCalendar.calendarConfgIdNbr})],
....
});
2. My javascript function:
page.control.initEventSources:
var page = {
control : {
initEventSources : function(calConfId, status) {
return {
url: '/oceportal/tom/data/bookings.jsp',
type: 'POST',
data: { calConfId: calConfId, bookingStatus: status, loggedInId: "#{sessionBean.loggedInId}", },
success: function(data) { },
error: function() { alert('there was an error while fetching events!'); },
color: 'none',
textColor: page.colorConfig[status]
};
}
}
}
My JSP snippet (to retrieve first and last visible day):
String start = request.getParameter("start");
Date startDt = new Date(Long.parseLong(start)*1000);
String end = request.getParameter("end");
Date endDt = new Date(Long.parseLong(end)*1000);
Hope it helps someone.

ASP.NET MVC: Save multiple values on autocomplete

I have a mysql database with the tables "deliverables", "tags" and "deliverables_has_tags". I want to link tags to a deliverable.
This is what I do in my javascript file:
<script type="text/javascript" language="javascript">
$(function () {
var object = {};
$.ajax({
type: "GET",
url: "/Deliverable/Tags",
dataType: "json",
success: function (data) {
object.tags = data;
}
});
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#tags")
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function (event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data("ui-autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function (request, response) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(
object.tags, extractLast(request.term)));
},
focus: function () {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
});
</script>
I can add multiple tags in my textbox.
But now I want to save this in my repository.
In my Action method in controller:
repository.AddDeliverable(model.Title, model.Description, model.UsernameID, data, datatwo, model.VideoUrl, model.AfstudeerrichtingID, model.ProjectID);
Tags action:
public JsonResult Tags()
{
var data = (repository.GetTags()).ToArray();
return Json(data, JsonRequestBehavior.AllowGet);
}
In my repository:
public IQueryable<string> GetTags()
{
return from tag in entities.tags
orderby tag.tag_name
select tag.tag_name;
}
I have no clue how to save this in my database.
Can anybody help me?
If I correctly understood your question, you have implemented your tag handling as follows:
There is MVC action method that returns the view with input placeholder containing no data
The placeholder itself is probably input type=text with id=tags
On 'dom ready' you fire ajax request to retrieve your tags from database, json-serialized as array; when it arrives you store it to tags variable (no error handling(!))
At the same time you decorate your input with jqueryui autocomplete that reacts on user input and returns items from the tags variable
Since input already contains tags (comma separated), your filter is first letters of the last tag
So, you have a situation when user has input a few comma separated tags (probably some of them can be new) and now wants to save it to the database. For each input, if that is a known tag you have to store it to "deliverables_has_tags". If there is a new tag, you have to store it both to "tags" and "deliverables_has_tags".
Most common scenario would be having a 'Save' button to start saving process.
Let's analyze what you have to do in the process.
1) Button click
On button click you use js to convert your comma separated tags string
using logic like split(term) to the array, and serialize it. You can
do serialization using serializeArray and manually create JSON
object, or serialize the whole form using
$('#yourForm').serialize(). I would choose the first option
because that way I get more control over JSON format and avoid
problems with MVC default model binder.
2) Ajax call
When the JSON object is ready to be sent, you fire an ajax POST
request to your MVC POST action method. When you save state always
avoid GET because new versions of browsers can scan thru your page and
actively preload urls using GET requests. You don't want this here. Of
course, use your data as a data-parameter in the ajax call.
3) Action method
When the request arrives, you have to process it in your controller
using a new action method. Typically in this case you will have
something like public JsonResult SaveTags(SaveTagsModel saveTags) {
... } which saves tags using your repository and returns result that
says something like 'OK' or 'ERROR' (sth like
response.isSaved=true/false). Tricky part can be designing view model
according to your JSON object - this could help. And regarding
collections this could be valuable info.
When saving, use transaction to ensure everything is saved at once.
First check if each tag exists in the database and insert those who
don't exist. After that, check for each tag if there is appropriate
n-n relation in deliverables_has_tags and insert it if there isn't.
I believe that you should use same repository encapsulation for both
operations.
In the post action, include FormCollection collection as argument and gather your tags from that. There is no automatic way. You could implement some custom model binding, but that is probably not worth the effort.

Get JSON array from Ext.data.Store outside?

How can I get JSON array from Ext.data.Store outside the function?
The code:
var store = new Ext.data.Store({
model: 'nested' + type,
proxy: {
type: 'ajax',
url: '/Grid/GetDetailed?InvoiceId=' + $(row).attr('id'),
reader: {
type: 'json',
root: 'items',
totalProperty: 'totalCount'
}
}
});
store.load();
And I want to use something like this:
store.getAt(0);
but it's undefined.
someone said it beacaouse of the ajax which is asynchronic.
If you use store.getAt(0) immediately after the store.load() is called then yes, the problem is that the load is asynchronic so you should use the callback method of the load to fix this.
store.load({
scope : this,
callback: function(records, operation, success) {
//here the store has been loaded so you can use what functions you like
store.getAt(0);
}
});
Use Ext.create instead of new keyword when creating the store, and define a storeId for the store. Then you can use Ext.getStore() method to retrieve the store.
You can also make it work by doing the following:
//This function will be called only after the store has been loaded successfully.
store.on('load',function(this, records, successful, eOpts){
store.getAt(0);
}, this);

Resources