Develop Reference

Kendo UI Grid adding new record not posting data to server side

I am working on Kendo UI jQuery grid CRUD. I can get data display in the grid, but not adding new records.
When I click the update button to add a record after filling up columns in the pop-up window, nothing is posted to the server side as every property has a null value.
The picture shows what I got when the button is pressed.
Controller:
[HttpPost]
public JsonResult AddLostProperty(LostPropertyViewModel lostProperty)
{
try
{
using (var dbContext = new DBEntities())
{
if (lostProperty != null)
{
var newLostProperty = new sz_LostProperty()
{
Name = lostProperty.PropertyName,
CategoryId = dbContext.sz_PropertyCategory.Where(x => x.Name == lostProperty.CategoryName).Select(c => c.Id).FirstOrDefault(),
Description = lostProperty.PropertyDescription,
FoundDate = lostProperty.FoundDate,
FoundLocation = lostProperty.FoundLocation,
CratedDate = DateTime.UtcNow.Date,
CratedBy = ""
};
dbContext.sz_LostProperty.Add(newLostProperty);
dbContext.SaveChanges();
return Json(new { Success = true, Message = "The Property has been added." });
}
else
{
return Json(new { Success = false, Message = "No lost property added." });
}
}
}
catch (Exception e)
{
return Json(new { Success = false, Message = "Error: " + e });
}
}
JavaScript:
<script>
$(document).ready(function () {
var serviceBaseUrl = "#Request.Url.ToString()",
lostPropertyDataSource = new kendo.data.DataSource({
transport: {
create: {
url: serviceBaseUrl + "/AddLostProperty",
type: "POST",
dataType: "json",
complete: function (e) {
$('#manageLostPropertiesGrid').data('kendoGrid').dataSource.read();
}
},
read: {
url: serviceBaseUrl + "/GetLostProperties",
type: "GET",
dataType: "json"
},
update: {
url: serviceBaseUrl + "/UpdateLostProperty",
type: "PUT",
dataType: "json"
},
destroy: {
url: serviceBaseUrl + "/DeleteLostProperty",
type: "DELETE",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "PropertyId",
fields: {
PropertyId: { editable: false, nullable: true, type: "number" },
PropertyName: { type: "string", editable: true, validation: { required: true } },
CategoryId: { type: "number", editable: true, validation: { required: true } },
PropertyDescription: { validation: { required: false } },
Image: { validation: { required: false } },
FoundDate: { type: "Date" },
FoundLocation: { editable: true, validation: { required: false } }
}
}
}
});
$("#manageLostPropertiesGrid").kendoGrid({
dataSource: lostPropertyDataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field: "PropertyName", title: "Property Name", width: "150px" },
{ field: "CategoryName", title: "Category", editor: propertyCategoryList,/* template: "#=CategoryName#", */width: "150px"},
{ field: "PropertyDescription", title: "Description", width: "200px" },
{ field: "FoundDate", title: "Found Date", template: "#= kendo.toString(kendo.parseDate(FoundDate, 'dd-MM-yyyy'), 'dd-MM-yyyy') #", width: "130px" },
{ field: "FoundLocation", title: "Found Location", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "popup"
}).data("kendoGrid");
});
From the browser, I can see the object sent to the server below:
What am I doing wrong?

I believe that in this case is problem in your parameter type at server side.
You have enabled batch: true editing which is useful if you want make many changes in your grid but send only one request with changed models in the end. It is very useful for example in case of inCell edit mode, when you would see many many requests and so decrease them is something you want, but in case of popup edit, I personally do not see any reason to use batch editing, but yes, I know Telerik has this in their demo.
So, because batch editing is enabled, there is called parameterMap before request is executed. (note: parameterMap is called only if you have batch edit enabled, otherwise it's ignored). That parameterMap wraps all your models into json string array and send that array with request to the server. In your case, there is always one record edited, but it doesn't matter - it will be sent as an array (in json string format).
Because it is sent as serialized string, you can
1) Change parameter of your AddLostProperty method to string models and then deserialize into array which allows you to work with it as you are used to
public ActionResult AddLostProperty(string models)
{
...
var data = JsonConvert.DeserializeObject<IEnumerable<LostPropertyViewModel>>(models);
...
}
2) If we will follow Telerik demo, you can use such implementation
public ActionResult AddLostProperty()
{
var products = this.DeserializeObject<IEnumerable<LostPropertyViewModel>>("models");
if (products != null)
{
//logic
}
return this.Jsonp(products);
}
3) And this is solution I would prefer
Just remove batch: true and parameterMap (since without batch it's useless) - and it should start send single object to your server method.

How to load multiple grids faster

I have 4 grid tables. They use the same modal. I cannot use the same store as each grid has to send a parameter value to get the data from db. So, what's happening is I ended up making 4 different stores and then when I load my application, it lags because it waits to load all the 4 stores. this is my grid.. so I have 3 more grids like this
this.grid1 =Ext.create('Ext.grid.Panel',{
title:'GridView App', store: store, loadMask:true,
columns:[
{ header:'Q1', sortable:true, dataIndex:'Q1', flex:1,},
{ header:'Q2', sortable:true, dataIndex:'Q2', flex:1,},
{ header:'Q3', sortable:true, dataIndex:'Q3', flex:1,},
{ header:'Q4', sortable:true, dataIndex:'Q4', flex:1,}
and this is my store1... and similarly I have 3 more stores like this each with parameter Q2, Q3, Q4 respectively
var store1 =Ext.create('Ext.data.JsonStore',{
storeId:'myData', scope:this,
fields:[
{ name:'Q1', type:'int'},
{ name:'Q2', type:'int'},
{ name:'Q3', type:'int'},
{ name:'Q4', type:'int'}
],
sorters:[{ property:'Q1', direct:'ASC'}],
proxy:{
type:'ajax',
url:'GridView/writeRecord',
extraParams: { ID: Q1 },
reader: newExt.data.JsonReader({
root:'myTable',
totalProperty:'count'
})
}
});
Is there a faster/better way to implement it than the way that I have?
UPDATE -
SECOND UPDATE -
Here is my layout for the whole application... my rightcontainer is disabled at first and contains the actual grids and forms, and click on the item on tab enables the rightcontainer and loads all the grid.
Ext.define('ExtjsApp.app1.appPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mypanel',
layout: {
type: 'vbox',
align: 'stretch'
},
scope: this,
titleAlign: 'center',
minWidth: 900,
bodyPadding: 10,
requires: [],
items: [],
constructor: function () {
this.callParent(arguments);
this.regForm = Ext.create('ExtjsApp.app1.RegForm', {});
leftTreeStore = Ext.create('Ext.data.TreeStore', {
scope: this,
storeId: 'leftTreeStore',
fields: [
{ name: 'text', type: 'string' },
{ name: 'dataId', type: 'string' },
{ name: 'listName', type: 'string' },
{ name: 'leaf', type: 'bool' }
],
root: { expanded: true },
proxy: {
type: 'ajax',
url: 'app1/getRecords',
extraParams: { organization: 'GOOGLE' },
reader: { type: 'json' }
},
autoLoad: true,
expanded: true,
autoSync: true,
listeners: {
}
});
allRecordsStore = Ext.create('Ext.data.TreeStore', {
id: 'allRecordsStore',
autoLoad: false,
autoSync: false,
scope: this,
fields: [
{ name: 'text', type: 'string' },
{ name: 'dataId', type: 'string' },
{ name: 'listName', type: 'string' },
{ name: 'leaf', type: 'bool' }
],
root: { expanded: true },
proxy: {
type: 'ajax',
url: 'app1/getRecords',
extraParams: { organization: 'GOOGLE' },
reader: { type: 'json' }
}
});
this.currentMonthsTree = Ext.create('Ext.tree.TreePanel', {
scope: this,
title: 'Current 12 Months',
titleAlign: 'center',
tabIndex: 0,
height: 500,
flex: 1,
rootVisible: false,
store: leftTreeStore,
id: 'currentMonthsTree',
useArrows: true,
hideHeaders: true,
columns: [
{
xtype: 'treecolumn',
id: 'ID',
dataIndex: 'text',
flex: 1
}
],
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
enableDrop: false,
appendOnly: false,
enableDrag: false
},
listeners: {
itemclick: function (view, rec, item) {
if (rec.isLeaf()) {
alert('isLeaf');
}
else if (!rec.isLeaf()) {
alert('isNotLeaf');
}
}
},
allowCopy: true,
copy: true
}
});
this.currentMonthsTree.on('selectionchange', function (selected) {
FnDisplayRecord(selected.selected.items[0]);
});
this.allRecordsTree = Ext.create('Ext.tree.TreePanel', {
scope: this,
title: 'All Records',
titleAlign: 'center',
flex: 1,
tabIndex: 1,
rootVisible: false,
store: allRecordsStore,
id: 'allRecordsTree',
useArrows: true,
hideHeaders: true,
columns: [
{
xtype: 'treecolumn',
id: 'ID',
dataIndex: 'text',
flex: 1
}
],
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
enableDrop: false,
enableDrag: false,
appendOnly: false
},
listeners: {
itemclick: function (view, rec, item) {
if (rec.isLeaf()) {
alert('isLeaf');
}
else if (!rec.isLeaf()) {
alert('isNotLeaf');
}
}
},
allowCopy: true,
copy: true
}
});
this.allRecordsTree.on('selectionchange', function (selected) {
FnDisplayRecord(selected.selected.items[0]);
//alert('Hello');
});
function FnClearValues() {
//Clear All Values
alert('ClearALLValues');
}
function FnSetValues(myObj) {
//I set all my form values using Ext.getCmp
Ext.getCmp('Textl').setValue(myObj.Text1);
}
function FnDisplayRecord(row) {
if (row.get('leaf') == true) {
console.log(row.data.dataId);
var tempID = row.data.dataId;
Ext.getCmp('rightContainer').setLoading(true, true);
Ext.getCmp('requisitionPOGridPanel').store.loadData([], false);
Ext.Ajax.request({
method: 'GET',
url: 'app1/getRecord',
headers: { 'Content-Type': 'application/json' },
dataType: 'json',
params: {
ID: tempID
},
success: function (response) {
Ext.getCmp('rightContainer').setLoading(false, false);
myObj = Ext.JSON.decode(response.responseText);
if (AsbestosObj.DateIssued != '') {
FnSetValues(AsbestosObj);
Ext.getCmp('GridPanel').store.load({ params: { ID: tempID} });
Ext.getCmp('Grid1').store.load({ params: { ID: tempID, qID: 'Q01'} });
Ext.getCmp('Grid2').store.load({ params: { ID: tempID, qID: 'Q02'} });
Ext.getCmp('Grid3').store.load({ params: { ID: tempID, qID: 'Q03'} });
Ext.getCmp('Grid4').store.load({ params: { ID: tempID, qID: 'Q04'} });
}
else { FnClearValues(); }
},
failure: function () {
Ext.Msg.alert('Message', 'Error');
}
});
}
else if (row.get('leaf') == false) {
FnClearValues();
}
}
this.rightContainer = Ext.create('Ext.form.Panel', {
scope: this,
id: 'rightContainer',
layout: {
type: 'vbox',
align: 'stretch',
pack: 'start'
},
autoScroll: true,
disabled: true,
border: 1,
flex: 1,
items: [
this.regForm
]
});
this.tabContainer = Ext.create('Ext.tab.Panel', {
scope: this,
activeTab: 0,
flex: 0.5,
id: 'tabContainer',
layout: { type: 'vbox', align: 'stretch' },
plain: true,
listeners: {
tabchange: function (panel, newTab, oldTab) {
Ext.getCmp('rightContainer').disable();
FnClearValues();
var getTabStat = this.getActiveTab();
if (getTabStat.tabIndex == 0) {
Ext.getCmp('currentMonthsTree').store.load();
}
else if (getTabStat.tabIndex == 1) {
Ext.getCmp('allRecordsTree').store.load();
}
}
},
items: [
this.currentMonthsTree, this.allRecordsTree
]
});
this.mainContainer = Ext.create('Ext.container.Container', {
scope: this,
bodyPadding: 10,
title: 'MAIN',
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 1,
items: [
this.tabContainer,
{ xtype: 'splitter', width: 5, animate: true },
this.rightContainer
]
});
this.add(this.mainContainer);
},
loadingOn: function () {
setTimeout(function () { Ext.getCmp('currentMonthsTree').setLoading(true, true); }, 100);
},
loadingOff: function () {
setTimeout(function () { Ext.getCmp('currentMonthsTree').setLoading(false, false); }, 100);
}
});

Please reference my SO question that is very similar: Combo box loads too slow
Basically, you will want to define all your models as you do normally.
Then you will want to define all the stores for your page as array stores without proxies, like this:
var myStore1 = Ext.create("Ext.data.ArrayStore", {
model: "MyModel1",
data: []
});
var myStore2 = Ext.create("Ext.data.ArrayStore", {
model: "MyModel1",
data: []
});
Then you will want to create a single call to wherever you are getting your data from, you will need to change the server to output all the arrays into an single JSON object, something like this, and for super optimization, make them array arrays, this would be the output I would expect from the server:
{
grid_data_1: [...],
grid_data_2: [...]
}
Then on your webpage after you create all the stores, make a single ajax call to get the data for all four grids:
Ext.Ajax.request({
url: 'url',
method: 'GET',
params: {
...whatever you want
},
success: function (response, opts) {
var result = Ext.decode(response.responseText);
myStore1.loadData(result.grid_data_1);
myStore2.loadData(result.grid_data_2);
...
},
});
This will make it much more efficient, you probably don't need to use array arrays in your case because there is only 5 rows per grid, but optimizing 4 ajax calls into one should have a large impact.

You cannot do much more here. I think you can do some micro tunes but I doubt they are worth time they took to identify. If your app do the following you've done it all the right way;
Time till your is loaded
Init only the required controller and the stores (check each request)
Show the main view
As soon as your grids get rendered they will fire the load operation, at least when they have a paging toolbar. You could begin the load operation earlier, meaning before you create the view that may give you some milliseconds but I doubt that you can save more time.
This is of course based on the available information's.

How to edit event which was saved ealier from full calender in MVC 4?

I am using Full Calender in my application and want to edit the events which was saved earlier.
How can I edit the events? My code is as shown below.
I am using SQL as a database. Just want to edit the event which are displyed in the full calender.
#{
ViewBag.Title = "schedule";
}
#Html.Partial("_Calendar")
<script type="text/javascript">
$(function () {
var date = new Date();
var d = date.getDate();
var y = date.getFullYear();
var m = date.getMonth();
var calendar = $('#calendar').fullCalendar({
header: { left: 'prev,next today', center: 'title' },
selectable: true,
theme: true,
minTime: '8:00',
defaultEventMinutes: 30,
maxTime: '17:00',
allDaySlot: false,
defaultView: 'agendaWeek',
weekends: false,
firstHour: 9,
selectHelper: true,
select: function (start, end, allDay) {
//var date1 = dateFormat(new Date(start).toGMTString(), 'mm/dd/yyyy HH:MM:ss');
//var date2 = dateFormat(new Date(end).toGMTString(), 'mm/dd/yyyy HH:MM:ss');
var title = prompt('Event Title:');
if (!!title) {
$.ajax({
type: "POST",
data: { Start: start.toJSON(), End: end.toJSON(), Note: title },
url: rootURL + "Contractor/schedule/SaveSchedule",
color:'yellow',
dataType: "json",
success: function (data) {
$('#eventToAdd').modal('hide');
calendar.fullCalendar('renderEvent', { title: title, start: start, end: end, allDay: allDay }, true);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#eventToAdd").dialog("close");
}
});
}
calendar.fullCalendar('unselect');
},
eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc, calEvent, jsEvent, ui, view) {
var date1 = dateFormat(new Date(event.start), 'mm/dd/yyyy HH:MM:ss');
var date2 = dateFormat(new Date(event.end), 'mm/dd/yyyy HH:MM:ss');
$.ajax({
type: "POST",
data: { 'id':event.id, 'Start': date1, 'End': date2},
url: "/Contractor/schedule/UpdateSchedule",
dataType: "json",
success: function (data) {
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
},
editable: true,
events: '#Url.Action("Getevent","Schedule")',
eventColor: '#028323'
});
});
</script>

you could implement following method:
eventRender: function(event, element, view) {}
This function is written in the same way as eventDrop.
The parameter element is the div that forms the event, you can add an onclick event to this or append some html to its contents with a button. That way you can show your popup or navigate to an edit page. You can use something like firebug to inspect and adjust the html and see what is possible.
For more detailed information, you can check http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/
There you can add an onclick handler or maybe an image with an onclick handler. In the onclick you can show a popup of some sort or navigate to an other page. In the popup or the other page you can make a form to edit your event. When the edit is complete reload the events or navigate back to your calendar and you will see the updated event.

Ext Form with fileuploadfield (response after submit)

Can`t really understand where is a mistake..
I have a form with fileuploadfield. Request is sended good, action on my controller gets all params, works with them, and sends response to browser. But in html page, after submiting the form, always fires FAILURE event, and never SUCCESS.
Client Side Code
Ext.create('Ext.form.Panel', {
renderTo: 'Container',
bodyPadding: '10 10 0',
items: [
{
xtype: 'form',
width: 300,
border: false,
fileUpload: true,
items: [
{
xtype: 'combobox',
id: 'PayTypes',
width: 215,
store: PayTypesStore,
valueField: 'id',
displayField: 'Name',
editable: false,
name: 'id'
}
,
{
xtype: 'filefield',
id: 'form-file',
name: 'file',
buttonText: '',
buttonConfig: {
iconCls: 'upload-icon'
}
}
],
buttons: [
{
text: 'Send',
handler: function () {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: 'UploadFile',
waitMsg: 'Uploading your photo...',
success: function (fp, o) {
console.log("success");
msg('Success', 'Processed file on the server');
},
failure: function (form, action) {
console.log(action);
Ext.Msg.alert('Failed', action.result ? action.result.message : 'No response');
}
});
}
}
}
]
}
]
});
Server Side Code:
public JsonResult UploadFile(HttpPostedFileWrapper file, int id)
{
var response = Json(new { success = true });
response.ContentType = "text/html";
return Json(response);
}
Response, recieved on the client side:
{"ContentEncoding":null,"ContentType":"text/html","Data":"success":true},"JsonRequestBehavior":1,"MaxJsonLength":null,"RecursionLimit":null}
What i need to fix in my code to get SUCCESS event after sumniting form?

You called Json method twice. The only thing you need is
public JsonResult UploadFile(HttpPostedFileWrapper file, int id)
{
return Json(new { success = true });
}

jQuery Multiple Autocomplete with c#

I'm implementing multiple autocomplete using jQuery UI. Also I'm using webservice to pass values. I check jQuery UI demo for multiple autocomplete and using exact same code and it's working until the first autocomplete and adds a "," at the end.
But here I'm stuck, It's not searching for the next autocomplete. Well I didn't add a part of the code from the demo, which I don't know where it suppose to go. If someone could help me please.
Heare isthe My code
<script type="text/javascript">
$(function () {
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$(".tb")
// 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("autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
source: function (request, response) {
$.ajax({
url: "EmployeeList.asmx/FetchEmailList",
data: "{ 'mail': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
//term: extractLast(request.term),
response($.map(data.d, function (item) {
return {
value: item.Email
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
search: function () {
// custom minLength
var term = extractLast(this.value);
alert(term);
if (term.length < 2) {
return false;
}
},
focus: function () {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
var terms = split(this.value);
alert(terms);
// 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;
} //,
//minLength: 2
});
});
</script>
Here is the code I'm missing from jQuery UI demo
.autocomplete({
source: function( request, response ) {
$.getJSON( "search.php", {
term: extractLast( request.term )
}, response );
},
I don't know where to add this code:
term: extractLast( request.term )
here is the link for entire code Demo Code link

replace
data: "{ 'mail': '" + request.term + "' }"
with
data: "{ 'mail': '" + extractLast(request.term) + "' }"
this should work but i didn't like much the way you encode JSON, may create problems with quotes etc.