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 can i conditionally use an ajax call to retrieve Jquery Datatables data?

We are using jQuery Datatables in our page. The table data is loaded with ajax calls. However, I only want to load the data if a certain condition is met. When the condition is not met, an empty datatable will be shown.
Below is the table as it is now. It works fine and loads the data correctly, but I haven't added the condition yet. The condition will be if (#Model.SelectedOrganizationId != null, load the data'Else, display an empty table`.
I could have two table initializations--one with data population and one without, but that seems repetitive. Also I could possibly just return null to the ajax call, but that seems unnecessary.(As in, why make the call if I don't have to?)
****************Edit***************************************************
Basically, I'd like to initialize an empty table and load the data after, if the condition is met.
function GetUnassignedActiveRolesGrid(showOnlyDistrictRoles)
{
/* Unassigned Active Roles */
unassignedActiveRolesGrid = $("#gridUnassignedActiveRoles").DataTable({
fixedHeader: true,
createdRow: function ( table ) {
setTabIndex(table);
},
processing: true,
info: true,
stateSave: false,
ajax: {
url: '#Url.Action("GetUnassignedActiveRoles", "UserAccount")',
data: {accountId: #Model.UserNameDetails.AccountId, organizationId: '#Model.SelectedOrganizationId', showOnlyDistrictRoles: showOnlyDistrictRoles},
dataSrc: "",
type: "GET",
dataType: "JSON"
},
paging: false,
searching: true,
autoWidth: false, // Disable the auto width calculation,
language: {
emptyTable: "Sorry, no role data available"
},
columns: [
{data: "ModuleName", title: "Module"},
{data: "Label", title: "Role"},
{data: "Description", title: "Description" },
{title: "Navigation", className: "center"},
{data: "ModuleSortOrder", title: "ModuleSortOrder" },
{data: "RoleSortOrder", title: "RoleSortOrder" }
],
order: [[4, "asc"], [5, "asc"], [0, "asc"], [1, "asc"]],
columnDefs: [
{ width: "20%", targets: [0,1] },
{ width: "50%", targets: 2 },
{ width: "10%", targets: 3 },
{ orderable: false, targets: [2] },
{ orderable: false, targets: [3] },
{ targets: 3, data:
function(role) {
return role.OrganizationId == '#Model.SelectedOrganizationId' ? "<a class='link_UnassignedActive_Add' href='#anchorUnassignedActiveRoles'>Add</a>" : "";
}},
{ visible: false, searchable: false, targets: [4,5] }
]
});
}

How to use SignalR Datasource with Kendo Grid

In order to make a real-time .NET Web application, I am using SignalR for Kendo grid, which works with read, update, destroy method on the grid.
However, my situation is creating and updating records from other pages, the Kendo Grid just for reading data. I would like to implement SignalR to notify user whenever a new record is added to the database.
Here is my code.
SignalRHub class:
public class SignalRHub : Hub
{
private DbEntities db;
public SignalRHub()
{
db = new DbEntities();
}
public IEnumerable<ViewTicketModel> Read()
{
return db.Post_User.AsEnumerable()
.Select(ticket => new ViewTicketModel
{
Id = ticket.Id,
BuyerName = ticket.Name,
DateCreated = ticket.CreatedOn.ToString("dd/MM/yyyy"),
BuyerPhoneNumber = ticket.Mobile,
Details = ticket.Details,
Location = ticket.Location,
})
.OrderByDescending(x => DateTime.ParseExact(x.DateCreated, "dd/MM/yyyy", null))
.ToList();
}
}
Index.cshtml:
var connection = $.connection;
var hub = connection.signalRHub;
var hubStart = connection.hub.start();
console.log("here");
var signalRDataSource = new kendo.data.DataSource({
type: "signalr",
autoSync: true,
push: function(e) {
var notification = $("#notification").data("kendoNotification");
notification.success(e.type);
},
schema: {
model: {
id: "Id",
fields: {
"Id": { editable: false, type: "Number" },
"BuyerName": { type: "string" },
"DateCreated": { type: "string" },
"BuyerPhone": { type: "string" },
"Details": { type: "string" },
"Location": { type: "string" }
}
}
},
transport: {
signalr: {
promise: hubStart,
hub: hub,
server: {
read: "read",
},
client: {
read: "read",
}
}
},
pageSize: 10,
});
$("#grid").kendoGrid({
height: 700,
filterable: {
extra: false,
},
pageable: true,
sortable: {
mode: "multiple",
allowUnsort: true
},
columns: [
{ field: "Id", title: "Notification Id", width: 100, hidden: true },
{
field: "DateCreated",
title: "Date Created",
width: 150,
filterable: {
ui: "datetimepicker"
}
},
{ field: "Location", title: "Location", width: 150 },
{ field: "BuyerName", title: "Buyer Name", width: 120, hidden: true },
{ field: "BuyerPhoneNumber", title: "Buyer Phone", width: 120, hidden: true },
],
dataSource: signalRDataSource
});

by other pages, you meant different application? If that is the case, this will complicate the issue.
remember kendo grid only comes with 4 default signal actions (create, update, read, destroy). Any other will have to be implemented by you.
here's an example how you can make your "connected" clients do a refresh read.
in your hub:
IHubContext context = GlobalHost.ConnectionManager.GetHubContext<Dashboard>();
context.Clients.All.reload();
in your client html page:
<script type="text/javascript">
var hub = $.connection.dashboard;
hub.client.reload = function () {
updategrid();
};
var hubStart = $.connection.hub.start();
function updategrid()
{
$('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();
}</script>
This will force all your connected clients to do a refresh.
The perfect scenario would be to the appropriate changes pushed out to the client. This implementation can get tricky, because you don't know what filter/sort/grouping the user has on their side. However, it's achievable. You can have each connected client to send it's filter/grouping/sort back to the server and pull only the appropriate change.

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 });
}

ExtJS JsonStore not populating

My JsonStore does not seem to be populating. When I run the code, it fires off the request, which does return the json. When I inspect the data store, the data array is empty.
What I am missing? Thanks.
I have this JsonStore defined:
CCList.ListStore = new Ext.data.JsonStore({
root: 'rows',
idProperty: 'Id',
fields: ['Id', 'Description'],
autoLoad: true,
proxy: new Ext.data.HttpProxy({
method: 'GET',
url: '/costcenters/getjson'
}),
listeners: {
load: function (obj, records) {
Ext.each(records, function (rec) {
console.log(rec.get('Id'));
});
}
}
});
Trying to bind it to this Ext.List
CCList.listPanel = new Ext.List({
id: 'indexList',
store: CCList.ListStore,
itemTpl: '<div class="costcenter">{Id}-{Description}</div>'
}
});
My url returns this json:
{ "rows" : [
{ "Description" : "Jason",
"Id" : "100"
},
{ "Description" : "Andrew",
"Id" : "200"
}
] }

FYI you're not using ExtJS, you're using Sencha Touch, they are different so it's important that you clarify in future.
Ext.setup({
onReady: function(){
Ext.regModel('CostCenter', {
idProperty: 'Id',
fields: ['Id', 'Description']
});
var store = new Ext.data.Store({
model: 'CostCenter',
autoLoad: true,
proxy: {
type: 'ajax',
method: 'GET',
url: 'data.json',
reader: {
type: 'json',
root: 'rows'
}
},
listeners: {
load: function(obj, records){
Ext.each(records, function(rec){
console.log(rec.get('Id'));
});
}
}
});
new Ext.List({
fullscreen: true,
store: store,
itemTpl: '<div class="costcenter">{Id}-{Description}</div>'
});
}
});