I have a Kendo Grid with some environments data. One of the fields of the grid is "isDefault" wich recieve 1 or 0 (for true or false). In the database I have a trigger that when some record is set to isDefault = 1 any other record is update to isDefault = 0, just to make sure there is only one default environment.
The Kendo grid is working fine, it binds the data and updates the records just fine but after the update, the grid is not refreshing all the records and if there was, lets say, record 1 with isDefault =1 and I update record 4 to isDefault = 1 the trigger is fired and updates all others records to isDefault = 0 but the grid still showing record 1 with isDefault = 1 and now record 4 with isDefault = 1
This is the code on my view:
Html.Kendo().Grid<Models.Environment>()
.Name("environmentGrid")
.Sortable()
.ToolBar(tb => tb.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Columns(cols =>
{
cols.Bound(c => c.Name).Width(150).Sortable(true);
cols.Bound(c => c.ConnectionString).Width(150).Sortable(true);
cols.Bound(c => c.Template).Width(150).Sortable(true);
cols.Bound(c => c.isDefault).Width(150).Sortable(true);
cols.Bound(c => c.StatusID).Width(150).Sortable(true);
cols.Command(command => { command.Edit();}).Width(60);
})
.DataSource(ds => ds
.Ajax()
.Model(model =>
{
model.Id(m => m.EnvironmentID);
})
.Read(r => r.Action("GetEnvironments", "Admin"))
.Update(update => update.Action("UpdateEnvironments", "Admin"))
.Create(update => update.Action("UpdateEnvironments", "Admin"))
)
and this is the code on my controller:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UpdateEnvironments([DataSourceRequest] DataSourceRequest dsRequest, Environment environment)
{
environment.ModifiedBy = userName;
if (environment != null && ModelState.IsValid)
{
if (environment.EnvironmentID != 0)
{
var toUpdate = xgr.EnviromentRepository.ListAll().FirstOrDefault(p => p.EnvironmentID == environment.EnvironmentID);
TryUpdateModel(toUpdate);
}
xgr.EnviromentRepository.Save(environment);
}
return Json(ModelState.ToDataSourceResult());
}
Thank you in advance for your answers.
I finally get it to work. Added an event handler:
Html.Kendo().Grid<Models.Environment>()
.Name("environmentGrid")
.Sortable()
.ToolBar(tb => tb.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Columns(cols =>
{
cols.Bound(c => c.Name).Width(150).Sortable(true);
cols.Bound(c => c.ConnectionString).Width(150).Sortable(true);
cols.Bound(c => c.Template).Width(150).Sortable(true);
cols.Bound(c => c.isDefault).Width(150).Sortable(true);
cols.Bound(c => c.StatusID).Width(150).Sortable(true);
cols.Command(command => { command.Edit();}).Width(60);
})
.DataSource(ds => ds
.Ajax()
.Model(model =>
{
model.Id(m => m.EnvironmentID);
})
.Events(events =>
{
events.RequestEnd("onRequestEnd"); //I've added this
})
.Read(r => r.Action("GetEnvironments", "Admin"))
.Update(update => update.Action("UpdateEnvironments", "Admin"))
.Create(update => update.Action("UpdateEnvironments", "Admin"))
)
And a Javascript Function:
function onRequestEnd(e) {
if (e.type == "update") {
$("#environmentGrid").data("kendoGrid").dataSource.read();
}
}
Also I needed to modify my ListAll() Method on the EnvironmentRepository to be like this:
public List<XML_Environment> ListAll()
{
_dataContext = new XMLGenEntitiesDataContext(); //I've to add this line. so the context is instantiated every time I call the ListAll Method.
return _dataContext.XML_Environments.OrderBy<XML_Environment, string>(c => c.EnvironmentName).ToList<XML_Environment>();
}
You are returning the wrong object. I don't really know how you get your data, because you did not posted the GET controller, so I'm going to try to guess it. After you updated your data, you need to send them back to the grid. The ModelState does not contain the data you want. Try this:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UpdateEnvironments([DataSourceRequest] DataSourceRequest dsRequest, Environment environment)
{
environment.ModifiedBy = userName;
var updatedRecords = null;//1
if (environment != null && ModelState.IsValid)
{
if (environment.EnvironmentID != 0)
{
var toUpdate = xgr.EnviromentRepository.ListAll().FirstOrDefault(p => p.EnvironmentID == environment.EnvironmentID);
TryUpdateModel(toUpdate);
updatedRecords = xgr.EnviromentRepository.ListAll();//2 -- you might need to add "ToList()", depending on your implementation
}
xgr.EnviromentRepository.Save(environment);
}
return Json(updatedRecords.ToDataSourceResult(request, ModelState));//3
}
Please see this link for a complete example.
Related
I'm new to using Telerik, and I am currently working on a ASP.Net Core Grid
So I have it working, but now I want to add the search bar toolbar, so I added it as:
#(Html.Kendo().Grid(Model)
.Name("grid")
.ToolBar(t => t.Search())
.Search(s =>
{
s.Field(o => o.PrimaryContact.FirstName, "contains");
})
The problem is that PrimaryContact.FirstName can be null, so when I try to search for something, it throws a console error:
Uncaught TypeError: Cannot read properties of null (reading
'FirstName')
This same thing happen on the columns and I solve it adding ClientTemplate as:
columns.Bound(x => x.PrimaryContact.FirstName)
.ClientTemplate("#= PrimaryContact ? PrimaryContact.FirstName : '' #")
But Search has no a client template to handle this
I tried to change the null value for the string empty with jQuery as:
function onDataBound(e) {
for (let i = 0; i < rows.length; i++)
{
const row = $(rows[i]);
const dt = e.sender.dataItem(row);
const firstName = dt.get("PrimaryContact.FirstName");
if (firstName === null)
{
row[0].cells[2].innerHTML = "";
}
}
}
But it does not work.
How can I avoid the null values from the search? Regards
FullCode:
#(Html.Kendo().Grid(Model)
.Name("grid")
.ToolBar(t =>
{
t.Excel();
t.Pdf();
t.Search();
})
.DataSource(dataSource => dataSource
.Custom()
.PageSize(20)
.Schema(schema =>
{
schema.Data(x => "function(d) { return validateData(d); }");
})
)
.Pageable(pager => pager
.Numeric(true)
.Info(true)
.PreviousNext(true)
.PageSizes(new [] { 10 ,25 ,50 })
.Position(GridPagerPosition.Bottom)
.Messages(m =>
{
m.ItemsPerPage("entries");
m.Display("Showing {0} - {1} of {2} entries");
})
)
.Sortable()
.Search(s =>
{
s.Field(o => o.Name, "contains");
s.Field(o => o.PrimaryContact.FirstName, "contains");
s.Field(o => o.PrimaryContact.PhoneNumber, "contains");
s.Field(o => o.PrimaryContact.EmailAddress, "contains");
s.Field(o => o.IsActive, "contains");
})
.Events(events => events.DataBound("onDataBound"))
.Columns(columns =>
{
columns.Bound(x => x.AdvertiserId)
.Hidden();
columns.Bound(x => x.Name)
.Title("Advertiser Name");
columns.Bound(x => x.PrimaryContact.FirstName)
.ClientTemplate("#= PrimaryContact ? PrimaryContact.FirstName : '' #")
.Title("Contact Name");
columns.Bound(x => x.PrimaryContact.PhoneNumber)
.ClientTemplate("#= PrimaryContact ? PrimaryContact.PhoneNumber : '' #")
.Title("Contact Phone");
columns.Bound(x => x.PrimaryContact.EmailAddress)
.ClientTemplate("#= PrimaryContact ? PrimaryContact.EmailAddress : '' #")
.Title("Contact Email");
columns.Bound(x => x.IsActive)
.Title("Status")
.ClientTemplate("<span class='badgeTemplate'></span>")
.Sortable(false);
columns.Template("<div class='btn-group'></div>")
.Title("").Width(100);
})
)
<script type="text/javascript">
function validateData(data)
{
for (const item of data) {
if (!item.hasOwnProperty("PrimaryContact")) {
item["PrimaryContact.FirstName"] = { "FirstName": ""};
}
}
return data;
}
</script>
I also tried using BeforeEdit event
.Events(events => events.DataBound("onDataBound").BeforeEdit("onBeforeEdit")
function onBeforeEdit(e) {
if(e.model.isNew()){
e.PrimaryContact.FirstName = "";
}
}
But it does not work as well
Probably avoid using nested properties whenever possible. You should have a custom ViewModel that flattens everything (whatever your Model class is). Second, the asp.net API is not as full featured as the native javascript library. It's just a passthrough to generate javascript on the page anyway, so don't be afraid to add javascript if you need to.
What you're trying to do isn't possible. You can build a proper flat ViewModel, or you can intercept data and mutate before loading it into the grid. You do that using the schema property on the datasource. You'll define a custom javascript method.
One more thing, I think your problem is not that FirstName is missing, it's that PrimaryContact is null. You can probably fix this server side without too much hassle. But here's how to fix it client side, if, for example, you're getting this from a 3rd party API.
.DataSource(ds =>
{
ds
.Custom()
.Transport(t =>
{
// ...
})
.Schema(x => .Data(x => "function(d) { return validateData(d); }"))
// ...
;
})
Or if you just use the javascript definition
dataSource: {
// ...
schema: { data: validateData }
}
Then here is the javascript method to cleanup your model with whatever properties you need to fix:
function validateData(data)
{
for (const item of data) {
if (!item.hasOwnProperty("PrimaryContact")) {
item["PrimaryContact"] = { "FirstName": ""};
}
}
return data;
}
Full dojo example here
I have the initial values for the grid in my ViewModel. But if the user wants to update values, I want to update my database, then send back the updated values for the grid from the backend. The problem is that the Ajax Read is always called. But it shouldn't because the (initial) values are there in the ViewModel and bound to Grid.
I tried setting the AutoBind to false, but it does not work, I get an error. (Cannot set AutoBind if widget is populated during initialization)
#(Html.Kendo().Grid<MyClass>()
.Name("MyClassGrid")
.BindTo(Model.MyClassList)
.Columns(column =>
{
column.Bound(c => c.SomeProp).Title("Some Property");
})
.Scrollable()
.DataSource(ds => ds
.Ajax()
.Read(read => read.Action("GetMyData", "CheckBar", new { param1 = Model.ParamFirst}))))
I want to display the already stored values for my grid, and only use the read operation if I want to update the values in my database too.
#(Html.Kendo().Grid<SQDCDashboard.Core.ViewModels.SafetyIncidentViewModel>()
.Name("safetyincident-grid")
.Columns(columns =>
{
columns.Bound(c => c.CreatedAt).HtmlAttributes(new { style = "width: 22%" }).Format("{0:MM/dd/yyyy}");
columns.Bound(c => c.Type).HtmlAttributes(new { style = "width: 22%" });
columns.Bound(c => c.Description).HtmlAttributes(new { style = "width: 22%" });
columns.ForeignKey(c => c.ProductionLineId, (System.Collections.IEnumerable)ViewData["ProductionLines"], "Id", "Name").HtmlAttributes(new { style = "width: 22%" });
columns.Command(command => { command.Edit(); }).HtmlAttributes(new { style = "width: 12%" });
})
.ToolBar(toolbar => toolbar.Create().Text("New Safety Incident"))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(ds =>
ds.Ajax()
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.ProductionLineId).DefaultValue(Model.DefaultProdLine);
})
.Read(read => read.Action("GetSafetyIncidentList", "Safety"))
.Update(update => update.Action("EditSafetyIncidentInLine", "Safety"))
.Create(create => create.Action("CreateNewSafetyIncident", "Safety"))
)
.HtmlAttributes(new { style = "height: 100%" })
.Sortable()
.Filterable()
.Pageable()
.Mobile()
)
Here is an example of my grid. The Update(update => update.Action("Action" , "Controller"))
is the method you are wondering about. For my code I did not have to pass a parameter in with my read, and I do not need to pass one in with my Update.
[HttpPost]
public ActionResult EditSafetyIncidentInLine([DataSourceRequest] DataSourceRequest request, SafetyIncidentViewModel sivm)
{
if (sivm != null && ModelState.IsValid)
{
SafetyIncident si = _safetyIncidentService.Find(sivm.Id);
si.Description = sivm.Description;
si.ProductionLineId = sivm.ProductionLineId;
si.ProdLine = _productionLineService.Find(sivm.ProductionLineId);
si.Type = sivm.Type;
_safetyIncidentService.Update(si);
sivm.Id = si.Id;
sivm.CreatedAt = si.CreatedAt;
}
return this.Json(new[] { sivm }.ToDataSourceResult(request, ModelState));
}
This method is the one that is called when the Update button is pressed. The update button is created with the columns.Command(command => { command.Edit(); }; and the Editable(editable => editable.Mode(GridEditMode.InLine)). If you want more clarification or if your question is different let me know. I never got an error with having my grid already initialized when I was updating values.
I have a sample like this popup editing mode
I want to store my model while first inserting, and set default values.
#(Html.Kendo().Grid<License>()
.Name("popupGrid")
.Columns(columns =>
{
columns.Bound(p => p.LicenseId).Width(20).Hidden().HeaderHtmlAttributes(new { #title = "License" });
columns.ForeignKey(p => p.CustomerId, (System.Collections.IEnumerable)ViewData["customers"], "CustomerID", "CustomerName")
.Title("Customer").Width(200);
columns.Bound(p => p.VendorId).Width(20).HeaderHtmlAttributes(new { #title = "Vendor" });
columns.Bound(p => p.ProductId).Width(20).HeaderHtmlAttributes(new { #title = "Product" });
columns.Command(p => p.Edit().Text("Edit").HtmlAttributes(new { #title = "Edit" })).Width(80);
})
.ToolBar(toolbar => toolbar.Create().HtmlAttributes(new {#id ="MyAddButton" ,#title = "Add" }))
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("PopupEditView"))
.Events(e => e.Edit("onGridEdit").Save("onGridSave"))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.LicenseId))
.Create(create => create.Action("Create", "Home").Type(HttpVerbs.Post))
.Read(read => read.Action("Read", "Home").Type(HttpVerbs.Post))
.Update(update => update.Action("Update", "Home").Type(HttpVerbs.Post))
)
)
<script>
var myModel;
function onGridSave(e) {
if (e.model.isNew()) {
myModel = e.model;
}
}
function onGridEdit(e) {
if (e.model.isNew()&&myModel!=null) {
e.model.set("CustomerId", myModel.CustomerId);
e.model.set("VendorId", myModel.VendorId);
e.model.set("ProductId", myModel.ProductId);
}
}
</script>
But it's not working.
following code is not working too :
$(e.container).find('input[name="CustomerId"]').data("kendoDropDownList").value(myModel.CustomerId);//it's not giving error. but CustomerId is null in model of create method
Actually I want to this. But I don't know how to update datasource while prevent closing window.
You might try configuring your dropdownlist with valuePrimitive: true
http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-valuePrimitive
I have a Kendo grid:
#(Html.Kendo().Grid<Grid>().Name("Grid")
.DataSource(ds => ds
.Ajax()
.Model(model => model.Id(m => m.ID))
.Read(read => read.Action("Grid_Read", "Sessions", new {sessionId = ViewBag.SessionID}))
.Update(update =>
update.Action("Grid_Update", "Sessions", new {
sessionId = ViewBag.SessionID, qcStateId = '????'}))
.PageSize(10)
.Batch(true)
)
.ToolBar(toolbar =>
{
toolbar.Template(
"| Set selected to: " + #Html.Partial("EditorTemplates/QCStatusHeader"));
}
)
QCStatusHeader:
#(Html.Kendo().DropDownList()
.Name("QCStatusHeader")
.DataValueField("Id")
.DataTextField("Name")
.BindTo((List<NomadBase.Web.ViewModels.Shared.QCStateViewModel>)ViewBag.PossibleQCStatesHeader)
)
How do I get the selected value from the QCStatusHeader dropdownlist into my update call to the controller?
Pretty simple solution, add the .Data option with a javascript method to return the currently selected value of the ddl.
.Update(update => update.Action("Grid_Update", "Sessions", new {sessionId = ViewBag.SessionID})
.Data("QCStatusHeaderValue"))
function QCStatusHeaderValue() {
var value = $('#QCStatusHeader').data("kendoDropDownList").value();
return { qcStateId: value };
}
I am using the following code. Can anybody tell me how will I use the page number instead of scroll bar?
My Index.cshtml page will be like
<div id="CustomerProfile">
<div id="GridCusotmerProfile">
#(Html.Kendo().Grid(Model)
.Name("grdCustomerProfile")
.Columns(coloumns =>
{
coloumns.Bound(p => p.CustomerID).Title("Customer ID");
coloumns.Bound(p => p.UserId).Title("User Id");
coloumns.Bound(p => p.ComapnyName).Title("Company Name");
coloumns.Bound(p => p.ContactPerson).Title("Contact Person");
coloumns.Bound(p => p.AccountNumber).Title("Account Number");
}
)
.Sortable()
.Scrollable(scrollable => scrollable.Virtual(true))
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("Virtualization_Read", "CustomerProfile"))
)
)
</div>
My Controller will be like the following
public List<CustomerProfileModel> CustomerDataSource(int page, int pagesize, int skip, int take)
{
List<CustomerProfileModel> ModelData = new List<CustomerProfileModel>();
take = skip + take + (page * 10);
var CustomerData = (from cp in context.CustomerProfile select cp).OrderBy(x => x.ComapnyName).Take(take).Skip(skip).ToList();
foreach (var items in CustomerData)
{
CustomerProfileModel Model = new CustomerProfileModel();
Model.CustomerID = items.CustomerID;
Model.AccountNumber = items.AccountNumber;
Model.ComapnyName = items.ComapnyName;
Model.ContactPerson = items.ContactPerson;
Model.UserId = items.UserId;
ModelData.Add(Model);
}
return ModelData;
}
public ActionResult Virtualization_Read([DataSourceRequest] DataSourceRequest request, string page,string pagesize,string skip,string take)
{
return Json(CustomerDataSource(Convert.ToInt32(page),Convert.ToInt32(pagesize),Convert.ToInt32(skip),Convert.ToInt32(take)).ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
}
public List<CustomerProfileModel> CustomerDataSource(int page, int pagesize, int skip, int take)
{
List<CustomerProfileModel> ModelData = new List<CustomerProfileModel>();
take = skip + take + (page * 10);
var CustomerData = (from cp in context.CustomerProfile select cp).OrderBy(x => x.ComapnyName).Take(take).Skip(skip).ToList();
foreach (var items in CustomerData)
{
CustomerProfileModel Model = new CustomerProfileModel();
Model.CustomerID = items.CustomerID;
Model.AccountNumber = items.AccountNumber;
Model.ComapnyName = items.ComapnyName;
Model.ContactPerson = items.ContactPerson;
Model.UserId = items.UserId;
ModelData.Add(Model);
}
return ModelData;
}
public ActionResult Virtualization_Read([DataSourceRequest] DataSourceRequest request, string page,string pagesize,string skip,string take)
{
return Json(CustomerDataSource(Convert.ToInt32(page),Convert.ToInt32(pagesize),Convert.ToInt32(skip),Convert.ToInt32(take)).ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
}
Please let me know if I need something else to get data as lazy loading.
Your on the right tracks, but it is actually a lot easier than you think. Your trying to hand roll functionality that Kendo handles with the `ToDataSourceResult() extension method.
The DataSourceRequest contains all the information needed for database operations, such as ordering, aggregates and paging. So you can simplfy your code down to pretty much the following (NOT TESTED)
public ActionResult Virtualization_Read([DataSourceRequest] DataSourceRequest request)
{
var CustomerData = (from cp in context.CustomerProfile select cp); // don't call toList() this exectues the SQL and pulls data into memory, leave it as a Queryable object so we can pass it to kendo to add its expressions this will the be a Database operation
DataSourceResult result = CustomerData.ToDataSourceResult(request, x => new CustomerProfileModel(){
CustomerID = x.CustomerID;
AccountNumber = x.AccountNumber;
ComapnyName = x.ComapnyName;
ContactPerson = x.ContactPerson;
UserId = x.UserId;
});
return Json(result);
}
For further reading take a look at this link:
http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding
From the Kendo Site:
How do I implement paging, sorting, filtering and grouping?
If your model supports the IQueryable interface or is DataTable the grid will do paging, sorting, filtering, grouping and aggregates automatically. For server binding scenarios no additional steps are required - just pass the IQueryable to the Grid constructor. Check the server binding help topic for additional info.
For ajax binding scenarios the ToDataSourceResult extension method must be used to perform the data processing. Check the ajax binding help topic for additional information. If your model does not implement IQueryable custom binding should be implemented. This means that the developer is responsible for paging, sorting, filtering and grouping the data. More info can be found in the custom binding help topic.
Important:
All data operations will be performed at database server level if the underlying IQueryable provider supports translation of expression trees to SQL. Kendo Grid for ASP.NET MVC has been tested with the following frameworks:
Entity Framework
Linq to SQL
Telerik OpenAccess
NHibernate
.Columns(columns =>
{
columns.Bound(p => p.ID).Title("ID").Width(100).Visible(false);
columns.Bound(p => p.Apply).Title("Apply").Width(100);
columns.Bound(p => p.TaxName).Title("Tax Name").Width(100);
columns.Bound(p => p.TaxPercent).Title("Percent").Width(130);
columns.Bound(p => p.OrderApplied).Title("Oreder Applied").Width(130);
columns.Bound(p => p.Compund).Title("Compund").Width(130);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable(scr=>scr.Height(430))
//.Scrollable(scrollable => scrollable.Virtual(true))
.HtmlAttributes(new { style = "height:430px;" })
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.ID))
.ServerOperation(false)
.Create(update => update.Action("EditingInline_Create", "Taxes"))
.Read(read => read.Action("EditingInline_Read", "Taxes"))
.Update(update => update.Action("EditingInline_Update", "Taxes"))
.Destroy(update => update.Action("EditingInline_Destroy", "Taxes"))
)
)