Related
I have trying to implement auto scheduling employee in each days. I have tried to drag on employee on other day.
But i have face the issue on employee dragging not working current day after one week days.
Any ideas about my code, which place i have wrong.
full_calender = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listWeek,listDay'
},
views: {
listDay: { buttonText: 'List View' },
listWeek: { buttonText: 'Week View' },
month: { buttonText: 'Month View' },
},
defaultDate: default_date,
editable: true,
selectable: true,
selectHelper: true,
eventLimit: true, // allow "more" link when too many events
eventResourceEditable: true,
/*select: function (start, end) {
addSelectedEvent(start, end);
},*/
eventConstraint: {
start: moment().format('YYYY-MM-DD HH:mm'),
end: '2100-01-01' // hard coded goodness unfortunately
},
dragRevertDuration: 1000,
eventDrop: function(event, delta,revertFunc) {
//if (!confirm('Are you sure '+ event.title + ' Moved On '+event.start.format())) {
//updateDroppableEvent(event.id,event.start.format());
var data = {
'action_update_droppable_event' : 'yes',
'event_id' : event.id,
'move_date' : event.start.format(),
};
$.ajax({
URL : '',
method : 'POST',
data : data,
dataType: 'json',
success : function(res){
if(res.status == 'success'){
$('#calendar').fullCalendar( 'renderEvent', event );
}else{
alert(res.msg);
revertFunc();
//window.location.reload();
}
},
error : function(res){
//console.log(res);
}
});
},
eventSources: [
{
url: base_url + 'admin_dashboard/render_current_events',
//url: base_url + 'admin_dashboard/get_holiday_list',
type: 'POST',
data: {
zone_id: '<?php echo $_REQUEST['zone_id'] ?>',
custom_param2: 'somethingelse'
},
error: function () {
alert('there was an error while fetching events!');
}
}
],
/* Delete Event */
eventClick: function (calEvent, jsEvent, view) {
deleteSelectedEvent(calEvent);
},
eventAfterAllRender: function (view) {
//$(".fc-event-container a").append("<span class='event_edit_popup'><i class='icon-eye-open'></i></span>");
// events: base_url + 'admin_dashboard/get_holiday_list',
}
});
I am using jsGrid for showing data from database. But I am stuck with a problem.
All text field or select field are rendering correctly. But I need to add a custom field with functionality to add image on edit (when no image added) a row and show image on the field while page load using jsGrid. I searched the web but not find any solution to solve my issue.
This is how it could be implemented:
var data = [
{ Name: "John", Img: "http://placehold.it/250x250" },
{ Name: "Jimmy", Img: "http://placehold.it/250x250" },
{ Name: "Tom", Img: "http://placehold.it/250x250" },
{ Name: "Frank", Img: "http://placehold.it/250x250" },
{ Name: "Peter", Img: "http://placehold.it/250x250" }
];
$("#dialog").dialog({
modal: true,
autoOpen: false,
position: {
my: "center",
at: "center",
of: $("#jsgrid")
}
});
$("#jsgrid").jsGrid({
autoload: true,
width: 350,
filtering: true,
inserting: true,
controller: {
loadData: function(filter) {
return !filter.Name
? data
: $.grep(data, function(item) { return item.Name.indexOf(filter.Name) > -1; });
// use ajax request to load data from the server
/*
return $.ajax({
method: "GET",
url: "/YourUrlToAddItemFilteringScript",
data: filter
});
*/
},
insertItem: function(insertingItem) {
var formData = new FormData();
formData.append("Name", insertingItem.Name);
formData.append("Img[]", insertingItem.Img, insertingItem.Img.name);
return $.ajax({
method: "post",
type: "POST",
url: "/YourUrlToAddItemAndSaveImage",
data: formData,
contentType: false,
processData: false
});
}
},
fields: [
{
name: "Img",
itemTemplate: function(val, item) {
return $("<img>").attr("src", val).css({ height: 50, width: 50 }).on("click", function() {
$("#imagePreview").attr("src", item.Img);
$("#dialog").dialog("open");
});
},
insertTemplate: function() {
var insertControl = this.insertControl = $("<input>").prop("type", "file");
return insertControl;
},
insertValue: function() {
return this.insertControl[0].files[0];
},
align: "center",
width: 120
},
{ type: "text", name: "Name" },
{ type: "control", editButton: false }
]
});
Checkout the working fiddle http://jsfiddle.net/tabalinas/ccy9u7pa/16/
According issue on GitHub: https://github.com/tabalinas/jsgrid/issues/107
So far, I'm just trying to instantiate my kendogrid and passing through values from my view model. I got the following piece of code from Telerik's documentation for vb.net. The thing is, an exception is thrown from .Grid ->
"Type parameter for public overridable overloads function grid(of T as a class) as a gridbuilder(of t) cannot be inferred"
Html.Kendo().Grid().Name("kendogrid")
I'm not sure what this error means and I don't know how to go about fixing it.
View
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "TestAjax",
dataType: "json",
type: "GET",
},
update: {
url: "update",
dataType: "json",
type: "POST"
},
create: {
url: "CreateInvoiceRecord",
dataType: "json",
type: "GET",
},
parameterMap: function (options, operation) {
console.log(operation);
console.log(options);
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "itemID",
fields: {
ItemName: { type: "string" },
Amount: { type: "number", editable: false, validation: { required: true } },
ProductLine: { type: "string" },
Status: { type: "string" },
}
}
},
aggregate: [{ field: "Amount", aggregate: "sum" }
]
});
$("#kendogrid").kendoGrid({
DataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create", "save"],
columns: [
{ field: "ItemName", title: "Item", width: "150px" },
{ field: "Amount", title: "Amount", format: "{0:c}", width: "100px", aggregates: ["sum"], footerTemplate: "Total Amount: #=sum#" },
{ field: "ProductLine", title: "Product Line", width: "150px", editor: productLineDropDownEditor},
{ field: "Status", title: "Status", width: "150px", editor: statusDropDownEditor },
{ command: "Update", title: "Update" , width:"150px"}],
editable: true
});
});
Model
Public Class MyViewModel
Public Property id As String
Public Property id2 As String
End Class
The VB grid syntax from http://docs.telerik.com/kendo-ui/aspnet-mvc/vb#grid
is:
Html.Kendo().Grid(Of YourViewModelClassThatYouWantToBindTheGridTo)() _
.Name("grid") _
...additional configuration.
You are missing the part where you tell the grid what type of object you are binding to(the "Of NameOfYourClass" part.
You should post your whole grid definition.
Also...C# syntax is sooooo much cleaner(I know that's not helpful).
Edit
OK, so this question isn't about the correct VB.NET Razor syntax anymore....
This is how you get "extra" data passed to the controller methods from a dataSource: you use the dataSource.transport.read.data configuration (http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read.data)
Using an object:
transport: {
read: {
url: "TestAjax",
dataType: "json",
type: "GET",
data: {
parameterToPassToReadAction: valueYouWantToPassToReadAction
}
},
Using a function:
transport: {
read: {
url: "TestAjax",
dataType: "json",
type: "GET",
data: extraDataFunction
},
function extraDataFunction () {
return {
parameterToPassToReadAction: valueYouWantToPassToReadAction
};
}
Where parameterToPassToReadAction is the name of the parameter in your server method and valueYouWantToPassToReadAction is the value you want it to be...which is stored where ever you stored it when the page loaded. If it is in a ViewModel of your vbhtml file and your javascript is in the script block of that same file, the syntax will be something like:
function extraDataFunction () {
return {
parameterToPassToReadAction: #Model.FieldYouWantToSend
};
}
But it is not clear where you have this value stored.
Finally got what I wanted working using a hack for create and then ajax for read. Not totally sure why this works the way it does so I'll need to look into it some more. I needed to pass parameters to controllers that are connected to kendogrid - specifically the read and create operations. I created a view model to store the values that I obtained from my Index controller and then used the view model to pass the values from kendogrid to the read and create operation controllers. For some reason, I was only able to pass parameters to the read operation using ajax.
Note: Still not the best solution. It calls readData controller twice and I don't want that.
Javascript
<Script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "readData",
dataType: "json",
type: "GET",
},
create: {
url: "CreateInvoiceRecord?trxid=#Model.id2&bcid=#Model.id",
dataType: "json",
type: "GET",
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "itemID",
fields: {
ItemName: { type: "string" },
Amount: { type: "number", validation: { required: true } },
ProductLine: { type: "string" },
Status: { type: "string" }
}
}
},
aggregate: [{ field: "Amount", aggregate: "sum" }]
});
$("#kendogrid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 550,
toolbar: ["create", "save"],
columns: [
{ field: "ItemName", title: "Item", width: "150px" },
{ field: "Amount", title: "Amount", format: "{0:c}", width: "100px", aggregates: ["sum"], footerTemplate: "Total Amount: #=sum#" },
{ field: "ProductLine", title: "Product Line", width: "150px", editor: productLineDropDownEditor},
{ field: "Status", title: "Status", width: "150px", editor: statusDropDownEditor },
{ command: "Update", title: "Update" , width:"150px"}],
editable: true
});
});
function productLineDropDownEditor(container, options) {
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
valuePrimitive: true,
dataTextField: "name",
dataValueField: "name",
dataSource: {
transport: {
read: {
url: "/Customs/getProdLines",
dataType: "json"
}
},
schema: {
data: "Data",
model: {
fields: {}
}
},
}
});
}
function statusDropDownEditor(container, options) {
var data = [
{ text: "Active", value: "1" },
{ text: "Paid", value: "2" },
{ text: "Cancelled", value: "3" }
]
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
valuePrimitive: true,
dataTextField: "text",
dataValueField: "value",
autobind: false,
dataSource: data
});
}
//function testAjax() {
//}
//data: { 'name': ItemName, 'amount': Amount, 'prodline': ProductLine, 'status': Status },
$.ajax({
type: "Get",
data: { id: "#Model.id", id2:"#Model.id2" },
url: "readData/",
dataType: "json",
success: function (itemList) {
console.log(itemList);
}
});
</script>
Model
Public Class MyViewModel
Public Property id As String
Public Property id2 As String
End Class
I am very new to sencha-touch & started to build simple Login form.
My UI is ready but now I am stuck on how to write code for login request response.
As important, how can I point to specific url to make POST/GET request?
Also how to get & parse the json data.?
I read the sench-touch documentation but I didnt understood, how to use that model, store, proxy.
Suggestions upon how to create model, store, proxy to make simple login are very helpful.
Thanks in advance.
Edited to insert image:
var loginForm = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Username'
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}
]
}]
});
loginForm.add({
xtype: 'button',
text: 'Login',
ui: 'confirm',
badgeText: '1',
// handler: function(){
// // alert("handler invoked");
// },
listeners : {
tap : function() {
var form = Ext.getCmp('form-id');
var values = form.getValues();
Ext.Ajax.request({
url: 'https://102.XXX.X.XX:XXXX/QuizMasterServer/rest/login',
params: values,
success: function(response){
var text = response.responseText;
Ext.Msg.alert('Success', text);
},
failure : function(response) {
Ext.Msg.alert('Error','Error while submitting the form');
console.log(response.responseText);
}
});
}
}
});
loginForm.add({
xtype: 'toolbar',
// id:'loginPressed',
docked: 'bottom',
// layout: { pack: 'center' },
items: [
{
xtype: 'button',
text: 'Login',
ui: 'confirm',
// action: 'login',
handler: function() {
loginForm.setValues({
name: 'vs',
password: 'vs'
})
}
},
{
xtype: 'button',
text: 'Clear',
ui:'decline',
handler: function() {
loginForm.reset();
}
},
{
xtype: 'button',
centered: true,
text: 'Sign Up',
handler: function() {
alert('New User?');
}
},
{
xtype: 'container',
html: 'New User? ',
style: {
color: 'yellow',
}
},
]
});
Exemplo usando ajax request:
Example using ajax request:
Ext.Ajax.request({
url: domain.com/auth/signIn/',
method: 'post',
scope: this,
params: {
email: username,
password: password
},
success: function (response) {
var result = Ext.JSON.decode(response.responseText);
if (result.meta.code==200)
{
/**
* Salvando dados do usuário em localStorage
* Save user data on localStorage
*/
window.localStorage.setItem('myID', result.response.id);
window.localStorage.setItem('email', result.response.email);
window.localStorage.setItem('token', result.response.token);
window.localStorage.setItem('fName', result.response.fName);
window.localStorage.setItem('lName', result.response.lName);
window.localStorage.setItem('photo', result.response.photo);
window.localStorage.setItem('gender', result.response.gender);
window.localStorage.setItem('relationship', result.response.relationship);
window.localStorage.setItem('interest', result.response.interest);
this.signInSuccess();
this.verifyDeviceToken(result.response.id, 'signin');
}
else
{
this.signInFailure('Error', 'The data reported are invalid');
}
},
failure: function (response) {
}
});
You are almost there!
add your code to the success callback.
Note, success() callback if fired if ajax returns ok, otherwise failure(). Callback callback() fire in both cases.
Ext.Ajax.request({
url: 'https://102.XXX.X.XX:XXXX/QuizMasterServer/rest/login',
params: values,
success: function(response){
var text = response.responseText;
// for example
var result = Ext.decode(text); // json parsing
if (result.ok) {
//create new widget
var homeView = Ext.widget('homePage', {...});
Ext.Viewport.remove(formLogin);
Ext.Viewport.add(homeView);
///... etc
homeView.show()
}
Ext.Msg.alert('Success', text);
},
failure : function(response) {
Ext.Msg.alert('Error','Error while submitting the form');
console.log(response.responseText);
}
});
Disclaimer. Of course the code is not tested...
cheers, Oleg
i have a .js file where i show a list of pools. And when i select a row i store the poolid of the selected row in a variable(this works fine).
And after you have selected a row an other view opens where you can see the guests which belongs to the pool. BUT to show this i need to use the poolid variable from the other view in this view. But how?
//The view where i select a pool
Dashboard = new Ext.Application({
name:'Dashboard',
launch: function(){
var poolId;
var thePanel = "allPool"
//------------------------------------List with Pool info
var detailPanel = new Ext.Panel({
id:'detailPanel',
layout:'fit',
items: [{
fullscreen:true,
xtype: 'list',
store: new Ext.data.Store({
model: 'team',
getGroupString : function(record) {
return record.get('name')[0];
},
proxy: new Ext.data.AjaxProxy({
url: 'a.php/pool/listPools',
method:'post',
reader: {
type: 'json',
root: 'data',
totalCount: 'count'
}
})
,autoLoad:true
}),
sorters: [{
property: 'name',
direction: 'asc'
}],
itemTpl:'<font size="4" face="Helvetica, Arial" color="black">{name}</font>',
grouped: true,
onItemDisclosure : true,
listeners : {
itemtap : function(record,index,item,e){
if (e.getTarget('.x-list-disclosure')) {
thePanel = 'guestsofPool';
poolId = this.store.data.items[index];
Ext.Ajax.request({
url : 'a.php/guest/listGuests' ,
params : {
poolId: poolId
},
method: 'POST',
success: function (result, request) {
var redirect = "showpool.php";
window.location = redirect;
},
failure: function ( result, request) {
alert(result.responseText);
}
});
//TopPanel.dockedItems.items[0].setTitle('Guests');
//outer.setActiveItem(1, { type: 'slide', cover: false, direction: 'right'});
}
// else { Ext.Msg.alert("Item clicked!");}
}
}
}]
})
//The view where you should see all the guests of the selected POOLID
ListDemo = new Ext.Application({
name: "ListDemo",
launch: function() {
ListDemo.detailPanel = new Ext.Panel({
id: 'detailpanel',
dock: "top",
items: [{
fullscreen:true,
xtype: 'list',
store: new Ext.data.Store({
model: 'team',
getGroupString : function(record) {
return record.get('name')[0];
},
proxy: new Ext.data.AjaxProxy({
url: 'a.php/guest/listGuests',
extraParams: {
poolId: thepoolid which was selected in the other view
},
method:'post',
reader: {
type: 'json',
root: 'data',
totalCount: 'count'
}
}),autoLoad:true
}),
sorters: [{
property: 'name',
direction: 'asc'
}],
itemTpl:'<font size="4" face="Helvetica, Arial" color="black">{name}</font>',
grouped: true,
onItemDisclosure : true,
listeners : {
itemtap : function(record,index,item,e){
if (e.getTarget('.x-list-disclosure')) {
//Ext.Msg.alert(index);
var redirect = 'showpool.php';
window.location = redirect;
}
// else { Ext.Msg.alert("Item clicked!");}
}
}
}]
});
I din't had patience to go through the complete code you posted. But what I'd suggest is have a variable in index.js file say var selectedPool_id; and in the itemTap set this id. and fetch the value wherever you need it.
NOTE: mak sure that the file index.js is added to your html file prior to the files that are selecting and usent he selectedPool_id.
This was a workaround. I welcome suggestions and improvements.