I am creating simple demo CRUD application using jtable jable.org
Jtable contains only two data columns
StartTime and EndTime
I can specify type field as date if I want to show Date-Picker in create modal window, but I don't have any idea how to show datetimepicker in the create modal dialog box.
Can I customize the create modal dialog box in jtable js.
$('#MaintenanceTime').jtable({
jqueryuiTheme: true,
paging: true,
pageSize: 10,
title: 'The Roles are as follows:-',
messages: {
loadingMessage: 'Fetching Data from Server',
addNewRecord: 'Add New MaintenanceTime',
},
actions: {
listAction: '#Url.Action("ListMaintenanceTime")',
updateAction: '#Url.Action("UpdateMaintenanceTime")',
deleteAction: '#Url.Action("DeleteMaintenanceTime")',
createAction: '#Url.Action("AddMaintenanceTime")'
},
fields: {
ATMaintenanceID: {
key: true,
title: 'Id',
create: false,
edit: false,
list: false
},
StartDate: {
title: 'Start Time'
//type: 'datetime',
//displayFormat: 'dd.mm.yy',
},
EndDate: {
title: 'End Time'
//type: 'date',
//displayFormat: 'dd.mm.yy',
},
}
});
Thanks for reviewing my question.
If you want to use a datetime picker (not only date) in the jQuery's jTable plugin for an input in your CRUD actions, there is not dedicated type in the parameters (jtable doc):
password / date / textarea / radiobutton / checkbox / hidden
Because the date format allows only jQuery Datepicker date formats.
A GitHub user has made the following commit to implement the dateTime type: https://github.com/gbisheimer/jtable/commit/e40d9c4bd9c65adb56b43a9c233f65c9bc7a5cb9
You can start from his work to implement your part. It uses the timePicker from Trent Richardson (can be found on GitHub also, here), but as far as I looked, the implementation of G. Bisheimer may not be up to date (timePicker not up to date, latest jTable compatibility?)
Related
I was trying to set startParam option dynamically.
But it seems working weird by updating the key rather update value.
calendarEvents.setOption('startParam', moment().format());
calendarEvents.refetchEvents();
If I run the methods and check the form data, then the startParam will be look like the following.
2021-02-15T19:09:13-07:00: 2021-01-01T00:00:00-07:00
end: 2030-01-01T00:00:00-07:00
I guess the setOption method updates the key not value for the start params.
Why does this happen and how to fix this?
UPDATE: My calendar code
calendarEvents = new FullCalendar.Calendar(calendarEventsEl, {
headerToolbar: false,
contentHeight: 300,
initialView: 'listAll',
views: {
listAll: {
type: 'listYear',
duration: { years: 9 },
},
},
navLinks: false,
eventDidMount: function (arg) {
...
},
eventTimeFormat: {
hour: 'numeric',
minute: '2-digit',
meridiem: 'short'
},
eventSources: [{
method: 'POST',
url: '/calendar/get_all_by_id/' + id,
}],
eventSourceSuccess: function(content, xhr) {
...
return events;
}
});
calendarEvents.render();
})
It's working properly.
The startParam option sets the name of the parameter which fullCalendar sends to the server for the start value, when fetching events. It doesn't set the value. The value which is sent is always the start date of the range which the user has just navigated to. You don't need to change that value yourself, and anyway it makes no sense to try and give it a fixed value - it is adjusted dynamically by fullCalendar every time events need fetching.
What are you actually trying to achieve with this code? Are you trying to change the current date on the calendar programmatically? If so then use https://fullcalendar.io/docs/Calendar-gotoDate
I want to hide the kendoGrid column on RoleBase. There are 6 users of my system for Manager,ProductManager & Supplier I do not want to show the column and for other three I want column to be visible.
My column defination:
{ command: { text: "Upload", hidden: '#if(ManagerRoleAccess== true || ProductManagerRoleAccess== true || SupplierRoleAccess== true)' }
I do not know what went wrong in this, the column hidden for all users.. Any help?
You were very close: the commands don't have a hidden field, but they do have visible:
{ command: [{ name: "edit", visible: function(dataItem) { return dataItem.isSuperUser }}] }
Dojo: http://dojo.telerik.com/ozONeSEG
However, your Dojo uses Kendo 2016.3.1028 and this param doesn't work in that version yet. If I'm not mistaken, it was introduced in version 2017.1.118.
I am trying to display FullCalendar withing a certain date range. To do so I added the following visibleRange option to my code but it is not working. The calendar is simply not displaying.
this.$calendar.fullCalendar({
//other settings
defaultView: 'basic',
visibleRange: {
start: moment('2017-05-22'),
end: moment('2017-05-29')
},
duration: { days: 7 },
//other settings
});
Any idea how I can achieve this?
Thanks
Using momentjs 2.18.1, jquery 3.2.1, fullcalendar 3.4.0 this shows the view from 5/22 through 5/28:
$('#calendar').fullCalendar({
defaultView: 'basic',
visibleRange: {
start: moment('2017-05-22'),
end: moment('2017-05-29')
} // Don't use duration in combination with visibleRange? Appears to override
/*,
duration: {
days: 7
}*/
});
Demo # https://jsfiddle.net/ez33y8gv/
Currently, I know there are ways to include two filter fields for Date filter in Kendo Grid UI? But the current method I have only allows one date filter to be displayed.
filterable: {
ui: function (element: any) {
element.kendoDatePicker({
format: "dd/MM/yyyy",
placeholder: "Enter Date"
});
},
operators: {
string: {
eq: 'Is equal to',
gt: 'Greater than',
lt: 'Less than'
}
}
}
How can I include two date filters, one to represent the start date and one to represent the end date using this method?
If you haven't set somewhere in your grid's definition:
filterable: {
extra: false
},
as explained here you should see a filter menu with two filter fields. With your defined operators name you could select "greater than" for the first dropdown and "less than" for the last one.
I wanted to check if someone has tried any option where in we can add custom properties to Dojo Datagrid Column tag in xpages. I want to show a drop-down of column entries when user tries to filter the column. i can do this if I am creating grid programatically i.e. define layout and grid options in Javascript client-side library. But I am clueless about how to add 'autoComplete' attribute to column definition when using extension library controls. This is my CSJS code to create datagrid if it helps you. I am calling paintGrid function on onclientLoad event of xpage.
function paintGrid(store){
var layout = [
{ field: "AccessRequestFor", datatype:"string",autoComplete:true},
{ field: "UserName", datatype:"string",autoComplete:true},
{ field: "UserEmail", datatype:"string",autoComplete:true},
{ field: "UserAccess", datatype:"string",autoComplete:true},
{ field: "UserExtraAccess", datatype:"string",autoComplete:true},
{ field: "AccessRequestDate", datatype:"string",autoComplete:true},
{ field: "AccessRequestor", datatype:"string",autoComplete:true},
{ field: "RemedyRef", datatype:"string",autoComplete:true},
{ field: "Status", datatype:"string",autoComplete:true}
];
var grid = new dojox.grid.EnhancedGrid({
id: 'grid',
store: store,
structure: layout,
plugins: {
filter: {
// Show the closeFilterbarButton at the filter bar
closeFilterbarButton: true,
// Set the maximum rule count to 5
ruleCount: 5,
// Set the name of the items
itemsName: "Access Requests"
}
}
});
grid.placeAt('view:_id1:_id2:panel1');
grid.startup();
}
You first need to set the dojoType for the Dojo Data Grid to dojox.grid.EnhancedGrid. You can then add the dojoAttributes for the filter plugin like so:
<xe:djxDataGrid id="djxDataGrid1"
storeComponentId="restService1" autoHeight="10" jsId="gridObj"
dojoType="dojox.grid.EnhancedGrid">
<xe:this.dojoAttributes>
<xp:dojoAttribute name="autoWidth" value="true"></xp:dojoAttribute>
<xp:dojoAttribute name="plugins"
value="{filter: {
closeFilterbarButton: true,
ruleCount: 5
}}">
</xp:dojoAttribute>
</xe:this.dojoAttributes>
For a description of how to create a Dojo Data Grid via the control, and how to enable the EnhancedGrid filter plugin see the recording of this webinar with Brad Balassaitis :
Dojo Data Grid with Brad Balassaitis - June 27, 2013