KendoGrid - MVC - Entity - Identity column - grid

I am building an MVC, Entities application with KendoGrids.
I have build this kendoGrid
#(Html.Kendo().Grid<ModelApp.Models.Tickets>()
.Name("ticketgrid")
.Columns(columns =>
{
columns.Bound(p => p.TicketID).Title("ID");
columns.ForeignKey(p => p.CustomerID, (System.Collections.IEnumerable)ViewData["customers"], "CustomerID", "CustomerName").Title("Customer");
columns.ForeignKey(p => p.AreaOfBusinessID, (System.Collections.IEnumerable)ViewData["areaofbusinesses"], "AreaOfBusinessID", "AreaOfBusiness1").Title("AreaOfBusiness");
columns.Bound(p => p.OccurredOn).Title("Occured").Format("{0:yyyy-MM-dd}");
columns.ForeignKey(p => p.SeverityID, (System.Collections.IEnumerable)ViewData["severities"], "SeverityID", "Severity1").Title("Severity");
columns.ForeignKey(p => p.AssigneeID, (System.Collections.IEnumerable)ViewData["assignees"], "AssigneeID", "AssigneeName").Title("Assignee");
columns.ForeignKey(p => p.TicketStatusID, (System.Collections.IEnumerable)ViewData["ticketstatuses"], "TicketStatusID", "TicketStatus1").Title("Status");
columns.Bound(p => p.UserID).Title("User");
columns.Bound(p => p.DateRegistered).Title("Registered").Format("{0:yyyy-MM-dd}");
})
.DataSource(dataSource =>
dataSource
.Ajax()
.Model(model => model.Id(p => p.TicketID))
.Read(read => read.Action("Index","Ticket"))
.Create(create => create.Action("Create", "Ticket"))
.Update(update => update.Action("Edit", "Ticket"))
//.Destroy(destroy => destroy.Action("Delete", "Ticket"))
)
.Pageable()
.Editable(editing => editing.Mode(GridEditMode.InCell))
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Navigatable()
.Selectable()
)
and I am facing 2 problems
1)The TicketID column is an identity column. When I select the Create button it fetches a zero. How can I make the Gid understand that it should not mess with this column and that the database will handle it?
Of course, no insert is being made anyway which takes me to the second question
2)The Edit does not post to database
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Edit([DataSourceRequest] DataSourceRequest request, IEnumerable<ModelApp.Models.Tickets> models)
{
if (models != null)
{
try
{
foreach (var updatedEntity in models)
{
var itemToUpdate = db.Tickets.Where(p => p.TicketID == updatedEntity.TicketID).FirstOrDefault();
if (itemToUpdate != null)
{
itemToUpdate.CustomerID = updatedEntity.CustomerID;
itemToUpdate.AreaOfBusinessID = updatedEntity.AreaOfBusinessID;
itemToUpdate.AssigneeID = updatedEntity.AssigneeID;
itemToUpdate.OccurredOn = updatedEntity.OccurredOn;
itemToUpdate.SeverityID = updatedEntity.SeverityID;
itemToUpdate.DateRegistered = updatedEntity.DateRegistered;
itemToUpdate.UserID = updatedEntity.UserID;
db.SaveChanges();
ModelState.Clear();
}
}
}
catch (Exception e)
{
db.add_exception_log(e.Message, "UPDATE RATES");
}
}
return Json(ModelState.ToDataSourceResult());
}
because models is null. Any clues why?
Thanx in advance

1) You should make the field non-editable inside of the Model configurator of the dataSource
model=>{
model.Fiedl(p=>p.TicketID).Editable(false);
}
2) You are not using batch editing to expect collection - change the signate to expect single record
public ActionResult Edit([DataSourceRequest] DataSourceRequest request, ModelApp.Models.Tickets model)

Related

Kendo Grid datetime filtering

I am using Kendo Grid. The problem I am facing is that I am not able to filter the datetime by selecting any option from filter.
Here is my code:
#(Html.Kendo()
.Grid<IssueViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.IssuePostedAt).Format("{0:dd.MM.yyyy hh:mm:ss}").Filterable(filterable => filterable.UI("orderDateFilter")).Title("Posted")
.ClientTemplate("#:kendo.toString(data.IssuePostedAt, \"dd.MM.yyyy hh:mm:ss\")#");
})
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.ButtonCount(5))
.Events(events => events.DataBound("onGridDataBound"))
.Filterable(filterable => filterable
.Enabled(true)
.Extra(false)
.Operators(operators => operators.ForString(str => str.Clear().Contains("Содержит")))
)
.DataSource(dataSource => dataSource
.WebApi()
.Model(model => model.Id(i => i.Issue.Id))
.Sort(sort => sort.Add(i => i.IssuePostedAt).Descending())
.Read(read => read.Url("/issue/gridData"))
.PageSize(20)
)
JavaScript:
function orderDateFilter(element) {
element.kendoDateTimePicker({
format: "dd.MM.yyyy hh:mm:ss",
timeFormat: "hh:mm:ss"
});
}
This is code in the controller:
[HttpGet]
[Route("gridData")]
public async Task<ActionResult> GridData([ModelBinder(typeof(DataSourceRequestModelBinder))] DataSourceRequest request)
{
var filterByUser = HttpContext.GetReferrerParam("name");
var gridData = await IssuesRepository.Instance.Get(filterByUser); // get all data from DB
var results = gridData.ToDataSourceResult(request);
return Json(results);
}
DateTime filtering doesn't work at all. gridData.ToDataSourceResult(request); always return empty result.
I will be thankful if anybody could help me out in solving my issue. Thanks in advance.

Kendo grid auto-edit, auto-save works but field value reverts in UI

In a Kendo grid (v2013.3) I want to auto-save a row when the user moves to a different row. So I code the change event, which fires when the row selection is changed, to call grid.saveChanges(). Then I re-select the row that we changed to (because the saveChanges seems to have canceled the row selection.) Finally, I call grid.editRow(row) so that the new row will be in edit mode.
This almost works fine. When the user changes a value in a row A, then clicks away to row B, the save action properly occurs and the web app sees the changed value. However, the UI itself reverts to the old value. This occurs because of the call to grid.editRow().
I suspect that Kendo is doing a cancel behind the scenes, even though the changed data is already saved.
Suggestions on how to address this problem? Here's the change handler:
ViLinking.gridItemSelected = function (e) {
var row = ViLinking.getSingleSelectedRow(this);
if (row == null) {
return;
}
var dataItem = this.dataItem(row);
if (dataItem == ViLinking.currentDataItem) {
return;
}
// apparently the row reference does not survive saveChanges() so prepare to re-get it.
ViLinking.currentDataItem = dataItem;
var dataUid = row.attributes["data-uid"];
var table = $(row).closest("table");
ViLinking.setKendoUpdateContentType(this);
this.saveChanges();
row = table.find('tr[data-uid="' + dataUid.value + '"]');
this.select(row);
this.editRow(row);
};
Here's the part of the view that generates the table (it's a child table)
<script id="ViDetailsTemplate" type="text/kendo-tmpl">
#(Html.Kendo().Grid<VendItemProxyForUi>()
.Name("details_#=ItemOid#")
.Columns(cs =>
{
cs.Bound(c => c.ItemOid).Hidden();
cs.Bound(c => c.VendorItemID);
cs.Bound(c => c.IsSplit);
cs.Bound(c => c.VendorItemName);
cs.Bound(c => c.VendorItemPackSize);
cs.Bound(c => c.IsCatchweight);
cs.Bound(c => c.IsApproved);
cs.Bound(c => c.UofMOidForUi).EditorTemplateName("UofmDdTemplate");//.ClientTemplate("#=UofMName#");
cs.Bound(c => c.UofMName);
cs.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(200);
}
)
.Selectable()
.Editable(edit => edit.Mode(GridEditMode.InLine))
.DataSource(ds => ds
.Ajax()
.Model(mdl =>
{
mdl.Id(vi => vi.VendorItemID);
mdl.Field(f => f.VendorItemID).Editable(false);
mdl.Field(f => f.VendorItemName).Editable(false);
mdl.Field(f => f.IsSplit).Editable(false);
mdl.Field(f => f.IsCatchweight).Editable(false);
mdl.Field(f => f.DiscontinueDate).Editable(false);
mdl.Field(f => f.IsRestricted).Editable(false);
mdl.Field(f => f.VendorItemPackSize).Editable(false);
mdl.Field(f => f.IsApproved).Editable(true);
mdl.Field(f => f.UofMName).Editable(true);
}
)
.Read(read => read.Action("GetVisForGi", "ViLinkingWorksheet", new { _msk = Model.MultiSessionKey, itemOid="#=ItemOid#"}))
.Update(update => update.Action("SyncModelFromUi", "ViLinkingWorksheet", new { _msk = Model.MultiSessionKey, itemOid="#=ItemOid#", delete=false}))
.Destroy(update => update.Action("SyncModelFromUi", "ViLinkingWorksheet", new { _msk = Model.MultiSessionKey, itemOid="#=ItemOid#",delete=true}))
)
//.HtmlAttributes(new { style = "height:100px;" })
.Events(ev =>
{
ev.Change("ViLinking.gridItemSelected");
ev.Cancel("ViLinking.saveOnCancel");
})
//.Navigatable()
.ToClientTemplate())
</script>
1- View
#(Html.Kendo().Grid<User>()
.Name("GridName")
.Columns(columns =>
{
...
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable(p => p.PageSizes(new[] { 5, 10, 20, 50, 100 }))
.Groupable()
.Sortable()
.Selectable()
.Scrollable(s => s.Height("auto"))
.DataSource(ds => ds
.Ajax()
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.PageSize(20)
.Model(model =>
{
model.Id(a => a.Id);
})
.Read(read => read.Action("Read", "Users"))
.Update(update => update.Action("Update", "Users"))
)
.Events(events => events.Save("SaveChanges"))
)
<script>
function SaveChanges() {
setTimeout(function() {
$("#GridName").data("kendoGrid").dataSource.sync();
});
</script>
2- Controller
public ActionResult Update([DataSourceRequest] DataSourceRequest request, IEnumerable<User> models)
{
if (models != null && ModelState.IsValid)
{
if (models.Any())
{
foreach (var item in models)
{
Update(item); // Find item in database, modify the properties of the object & save change in database
}
}
}
return Json(models.ToDataSourceResult(request, ModelState));
}

Kendo UI grid Create action passes null reference from WCF service

I am struggling calling a create action through a WCF service from a kendo ui grid.When the odataservice calls the business logic controller to write the record it passes a null reference....the customer object is populated up until the call to the business logic CreateEntity method. I originally thought this was because of the content type but I am having my doubts now. Accessing the WCF service directly with fiddler successfully creates the record...
Kendo Grid:
Here is the application level Customer_Create action being called by the kendo grid
#(Html.Kendo().Grid<Application.ServiceProxy.CustomerDTO>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.salesOrganizationID).Width(15).Title("sales org");
columns.Bound(c => c.customerID).Width(20).Groupable(false);
columns.Bound(c => c.name1).Width(25).Title("name");
columns.Bound(c => c.city).Width(15).Title("city");
columns.Bound(c => c.stateCode).Width(10).Title("state");
columns.Bound(c => c.countryCode).Width(15).Title("country");
columns.Bound(c => c.matchcode).Width(25).Title("matchcode");
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(35);
//Add program type here CMI, VMI etc..
//columns.Width(25).Title("program");
})
.ToolBar(toolbar => toolbar.Create())
.Editable(ed => ed.Mode(GridEditMode.PopUp).Window(w => w.Title("Edit Customer Details").Name("editWindow").HtmlAttributes(new { #style = "width:700px;" })))
.Pageable()
.Sortable()
.Groupable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:420px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(true)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(c => c.customerID))
.Create(update => update.Action("Customer_Create", "Customer"))
.Read(read => read.Action("Customer_Read", "Customer"))
.Update(update => update.Action("Customer_Update", "Customer"))
.Destroy(update => update.Action("Customer_Delete", "Customer"))
)
)
Here is the application level Customer_Create action being called by the kendo grid
[System.Web.Http.HttpPost]
public ActionResult Customer_Create([DataSourceRequest] DataSourceRequest request, Application.ServiceProxy.CustomerDTO customer)
{
if (customer != null && ModelState.IsValid)
{
var odataService = new Container(new Uri("http://localhost:8089/odata/"));
//odataService.r
odataService.AddToCustomer(customer);
odataService.SaveChanges();
return Json(ModelState.ToDataSourceResult());
}
return View("Index");
}
Here is the CreateEntity method being called through the generated WCF data service.
protected override CustomerDTO CreateEntity(CustomerDTO customerDTO)
{
var customer = new customer()
{
matchcode = customerDTO.matchcode,
salesOrganizationID = customerDTO.salesOrganizationID,
statusID = customerDTO.statusID,
serviceLevelStatusID = customerDTO.serviceLevelStatusID,
mediaIDLogo = customerDTO.mediaIDLogo,
systemID = customerDTO.systemID,
customerExternalSystemID = customerDTO.customerExternalSystemID,
internationalGroup = customerDTO.internationalGroup,
division = customerDTO.division,
corporateID = customerDTO.corporateID,
inventoryManagerID = customerDTO.inventoryManagerID,
dunsNumber = customerDTO.dunsNumber
};
entity.customer.Add(customer);
entity.SaveChanges();
return GetEntityByKey(customer.customerID);
}

Kendo UI Grid inline-edit posted data is null

I'm following the demo grid inline-edit in MVC4, but I find the posted gird data in Insert/Edit Controller is null.
code of cshtml as follows:
#(Html.Kendo().Grid<CRM.Models.M_ProductGroup>()
.Name("Group")
.Columns(columns =>
{
//columns.Bound(g => g.CompanyNo).Hidden();
columns.Bound(g => g.CompanyNo).Width(60);
columns.Bound(g => g.ProductGroupNo).Width(60);
columns.Bound(g => g.ProductGroupName).Width(120);
columns.Command(command =>
{
command.Custom("SelectProducts");
command.Edit();
command.Destroy();
}).Width(200);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.ClientDetailTemplateId("groupSetTemplate")
.Pageable()
.Sortable()
.Scrollable()
//.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(g => g.CompanyNo);
model.Id(g => g.ProductGroupNo);
//model.Field(g => g.ProductGroupName);
})
.Create(create => create.Action("InsertGroup", "MProductGroup"))
.Read(read => read.Action("ShowGroup", "MProductGroup"))
.Update(update => update.Action("ChangeGroup", "MProductGroup"))
.Destroy(destroy => destroy.Action("DeleteGroup", "MProductGroup"))
//.PageSize(20)
)
//.Events(events => events.DataBound("dataBound"))
code of controller as follows:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult InsertGroup([DataSourceRequest] DataSourceRequest request, M_ProductGroup group)
{
if (group != null && ModelState.IsValid)
{
return Json(new[] { group }.ToDataSourceResult(request, ModelState));
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ChangeGroup([DataSourceRequest] DataSourceRequest request, M_ProductGroup group)
{
if (group != null && ModelState.IsValid)
{
}
return Json(ModelState.ToDataSourceResult());
}
posted data ("group") is null, I can't get it.
Check if you have kendo.aspnetmvc.min.js included in your project.
I have the same problem, And I found an interesting thing.
Instead of
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ChangeGroup([DataSourceRequest] DataSourceRequest request, M_ProductGroup group)
I did:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ChangeGroup([DataSourceRequest] DataSourceRequest request, int ProductGroupNo, string ProductGroupName)
And i recived the Id and the name that i changed in the inline grid.
I know that is an inelegant solution, and a curios thing, but maybe it will serve you to get the solution.

grid operation in mvc telerik grid

how to perform the edit and delete operations in grid
i have the following grid
<%=Html.Telerik().Grid(Model).Name("Grid").Columns(columns =>
{
columns.Bound(m => m.Keywords);
columns.Bound(m => m.Country).Title("Location");
columns.Bound(m => m.AreaID);
columns.Bound(m => m.JobSearchAgentID).Hidden(false);
}).DataBinding(databinding =>
{
databinding.Server().Select("Agentlist", "Grid", new
{
ajax = ViewData["ajax"]
});
databinding.Ajax().Select("Agentlist",
"Grid").Enabled((bool)ViewData["ajax"]);
})
.DataKeys(keys =>
{
keys.Add(m => m.JobSearchAgentID);
}
)
.Scrollable(scrolling => scrolling.Enabled((bool)ViewData["scrolling"]))
.Sortable(sorting => sorting.Enabled((bool)ViewData["sorting"]))
.Pageable(paging => paging.Enabled((bool)ViewData["paging"]))
.Filterable(filtering => filtering.Enabled((bool)ViewData["filtering"]))
.Groupable(grouping => grouping.Enabled((bool)ViewData["grouping"]))
.Footer((bool)ViewData["showFooter"])
%>
<%}%>
Everything you need about Telerik MVC Grid Control
http://demos.telerik.com/aspnet-mvc/grid/editingajax dead link
http://demos.telerik.com/aspnet-mvc/grid
Here's an example of a grid that allows add and edit within the grid:
<% Html.Telerik().Grid<ReportingPeriodGroupDto>()
.Name("ReportingPeriodGroupAdminGrid")
.DataKeys(keys => keys.Add(o => o.Id))
.Editable(editing => editing.Mode(GridEditMode.InLine))
.ToolBar(commands =>
{
commands.Insert();
})
.DataBinding(dataBinding => dataBinding.Ajax()
.Select("SelectReportingPeriodGroup", "Admin")
.Insert("InsertReportingPeriodGroup", "Admin")
.Update("UpdateReportingPeriodGroup", "Admin")
)
.Columns(columns =>
{
columns.Bound(o => o.ShortDescription).Width("10em").Width("8em");
columns.Bound(o => o.LongDescription).Width("20em");
columns.Command(commands => commands.Edit()).Title("Actions");
})
.Footer(false)
.Render();
%>
NOTE: You must add these Insert and Update methods to your controller
[AcceptVerbs(HttpVerbs.Post)]
[GridAction(GridName = "ReportingPeriodGroupAdminGrid")]
public ActionResult InsertReportingPeriodGroup()
{
ReportingPeriodGroupDto reportingPeriodGroupDto = new ReportingPeriodGroupDto();
TryUpdateModel(reportingPeriodGroupDto);
if (ModelState.IsValid)
{
reportingPeriodGroupDto.CreatedBy = UserId;
reportingPeriodGroupDto.CreatedDate = DateTime.Now.ToString();
ITransformer transformer = ServiceFinder.Instance.ServiceFactory.RedPortalTransformerFactory.GetTransformer(reportingPeriodGroupDto.GetType());
ReportingPeriodGroup parent = (ReportingPeriodGroup)transformer.Transform(reportingPeriodGroupDto);
RedPortalDbContext.ReportingPeriodGroups.Add(parent);
RedPortalDbContext.SaveChanges();
}
return SelectReportingPeriodGroup();
}
[AcceptVerbs(HttpVerbs.Post)]
[GridAction(GridName = "ReportingPeriodGroupAdminGrid")]
public ActionResult UpdateReportingPeriodGroup()
{
ReportingPeriodGroupDto reportingPeriodGroupDto = new ReportingPeriodGroupDto();
if (TryUpdateModel(reportingPeriodGroupDto))
{
reportingPeriodGroupDto.UpdatedBy = UserId;
reportingPeriodGroupDto.UpdatedDate = DateTime.Now.ToString();
ITransformer transformer = ServiceFinder.Instance.ServiceFactory.RedPortalTransformerFactory.GetTransformer(reportingPeriodGroupDto.GetType());
ReportingPeriodGroup parent = (ReportingPeriodGroup)transformer.Transform(reportingPeriodGroupDto);
RedPortalDbContext.ReportingPeriodGroups.Add(parent);
RedPortalDbContext.Entry(parent).State = EntityState.Modified;
RedPortalDbContext.SaveChanges();
}
return SelectReportingPeriodGroup();
}

Resources