Batch save Kendo Grid in Inline edit mode - asp.net-mvc-3

I have a MVC3 Razor View for a simple Contact entity - first and last name, job title etc - including a grid being used to save one or more phone numbers.
The grid appears setup in inline edit mode after the user clicks save to create a new item, and there is a new Id to save phone numbers against. This works okay but the client would prefer that the whole form is saved on that first click, including any edits to the phone number grid. The tricky bit is they want to keep the existing inline UX, which is where my question lies:
How can you keep all the UI/UX associated with the kendo grid inline editing mode, but save as a batch, as you would if it were set to in-cell editing?
I have read various articles and tutorials to do with saving grid changes on click, but most are specific to in-cell editing and are not specific to Razor.
Here is the code for the grid as it stands (no editor template or js functions), please let me know if I can provide any further detail and I will update my question.
#(Html.Kendo().Grid<ContactNumberListItem>()
.Name("PhoneNumbersGrid")
.Columns(columns =>
{
columns.Bound(model => model.Number).Title("Number").Format("{0:#,#}");
columns.Bound(model => model.Type).EditorTemplateName("_tmpl_contactPhoneNumberType_dd").Title("Type").ClientTemplate("#:Type.Name#");
columns.Command(commands =>
{
commands.Edit().Text(" ")
.UpdateText(" ")
.CancelText(" "); // The "edit" command will edit and update data items
commands.Custom("Delete").Text(" ").Click("DeleteContactPhoneNumber"); // The "destroy" command removes data items
}).Width(98);
})
.ToolBar(toolBar => toolBar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation(false))
.Selectable()
.Events(events => events
.DataBound("OnGridDataBound")
.Cancel("OnGridCancel")
.Edit("OnGridEdit")
.Save("OnGridSave"))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(false)
.PageSize(5)
.ServerOperation(false)
.Model(model =>
{
model.Id(x => x.Id);
model.Field(t => t.Type).DefaultValue(((List<PhoneNumberTypeListItem>)ViewBag.ContactPhoneNumberTypes).FirstOrDefault());
})
.Create(update => update.Action("CreateContactPhoneNumber", "ContactPhoneNumber").Data("GetContactId"))
.Update(update => update.Action("UpdateContactPhoneNumber", "ContactPhoneNumber"))
.Read(read => read.Action("SelectContactPhoneNumbers", "ContactPhoneNumber").Data("GetContactId"))
.Events(e => e.Error("error_handler"))))

The answer seems to be to use placeholder controller methods for create/update/delete - that is, methods that do not do anything - then follow use the code below to submit to the controller on whatever click or action:
http://www.telerik.com/support/code-library/save-all-changes-with-one-request

Related

Kendo UI Grid dropdown with Foreign key

I should have asked this question on the Telerik forum but having browsed through many answers there, with due respect to Telerik, I feel it will be futile and I can expect better and quicker answers here. So here I go:
I am using Kendo UI Grid control and displaying the values in an editable dropdownlist cell.But that has taken away the in built filtering capability as it is not provided out of the box. Now I am stuck on the only way to achieve this which is using foreign keys; http://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn
There are some bits missing in the example like the PopulateCategories() function and what code to put in the MVC EditorTemplate.
Has anyone tried and successfully able to display the filters? I can provide my code but I think thats not part of the question as there is nothing wrong in the code. What I am asking is how I can achieve filtering with dropdownlist templates using the solution provided by Telerik.
Hope it may help someone.The following bits are missing from the example as provided in the link above (I have used my code to convey the missing bits):
First
Instead of:
columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName")
.Title("Category").Width(150)
Use EditorTemplateName property too:
columns.ForeignKey(p => p.Region.RegionId, (System.Collections.IEnumerable)ViewData["Regions"], "RegionId", "RegionName").Title("Region").EditorTemplateName("RegionsTemplate");
Second
Keep using the complex model otherwise the Add New Record functionality would not work:
So instead of
.Model(model =>
{
model.Id(p => p.ProductID);
model.Field(p => p.ProductID).Editable(false);
model.Field(p => p.CategoryID).DefaultValue(1);
})
Use both the Foreign key model and the complex model:
.Model(model => {
model.Id(p => p.FunctionLevelRegionMappingId);
model.Field(p => p.FunctionLevelRegionMappingId).Editable(false);
model.Field(p => p.Region.RegionId).DefaultValue(1);
model.Field(p => p.Region).DefaultValue(
ViewData["DefaultRegion"] as GlobalLossAnalysisTool.Web.Areas.Administration.Models.RegionDto);
})
Third
In the example ProductViewModel is missing. This can be referred from http://demos.telerik.com/aspnet-mvc/grid/editing-custom. There is no change to this model.
Fourth
Changes to template:
The templates are missing in the example but can in inferred from the link http://demos.telerik.com/aspnet-mvc/grid/editing-custom. Change the template from :
#model Kendo.Mvc.Examples.Models.CategoryViewModel
#(Html.Kendo().DropDownListFor(m => m)
.DataValueField("CategoryID")
.DataTextField("CategoryName")
.BindTo((System.Collections.IEnumerable)ViewData["categories"])
)
To:
#using Kendo.Mvc.UI
#(Html.Kendo().DropDownListFor(m => m)
.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"]))

Kendo grid virtual scrolling (endless scrolling) does not work

I want to turn on the endless scrolling on a kendo grid, called in this framework as virtual scrolling.
Abstract:
1) I load the page => the Action Virtualization_Read is called (OK)
2) I scroll down the Grid till bottom => the Action Virtualization_Read is called anothter time in order to get more data (KO)
The result is that when I reach the bottom of the grid, with scrollbar, the Action method that retrives the data is not hit anymore.
This is my grid, it shows the traces generated in my application:
#(Html.Kendo().Grid<Credit.Entity.ServiceObjects.MsgBlock>(Model.ListadoTrazas)
.Name("grdTrazas")
.Columns(columns =>
{
columns.Bound(c => c.LogID).Filterable(true);
columns.Bound(c => c.Timestamp).Filterable(false);
columns.Bound(c => c.FormattedMessage).Filterable(false).Width("80%");
})
.Scrollable(s => s.Virtual(true))
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.ServerOperation(true)
.Read(read => read.Action("Virtualization_Read", "Logging"))
)
)
And this is the MVC3 Action that fetches the data. This Action is called only the first time, when the page is loaded:
public ActionResult Virtualization_Read([DataSourceRequest] DataSourceRequest request)
{
return Json(GetData(request.Page, request.PageSize).ToDataSourceResult(request));
}
[NonAction]
private List<MsgBlock> GetData(int page, int getCount)
{
MVCLogging model = new MVCLogging();
// Fetches the data
return model.ListadoTrazas;
}
The Model MsgBlock has the same properties defined in the Grid Columns method:
LogId
TimeStamp
FormattedMessage
Do I forget anything?
The only potential issue I see here is that you are leveraging server operations on the grid, but initializing the grid with a collection of data instead of letting it fetch the initial data. In the Kendo demo for virtualization using the MVC extensions, the grid definition looks like:
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(60);
columns.Bound(o => o.CustomerID).Width(90);
columns.Bound(o => o.ShipName).Width(220);
columns.Bound(o => o.ShipAddress).Width(280);
columns.Bound(o => o.ShipCity).Width(110);
columns.Bound(o => o.ShipCountry).Width(110);
})
.Sortable()
.Scrollable(scrollable => scrollable.Virtual(true))
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Read(read => read.Action("Virtualization_Read", "Grid"))
)
)
Notice that after the type is supplied (Kendo.Mvc.Examples.Models.OrderViewModel) there is no initial set of data supplied, whereas your initialization attempts to give the grid the data it needs to render (Model.ListadoTrazas). Perhaps this is confusing the grid into thinking it has all the data is needs? I would try taking out Model.ListadoTrazas and letting the grid reach out for the data from the get go.

Adding a Dropdown inside Kendo Grid

I'm trying to add a DropDown inside kendo grid but it displays a TextBox
#(Html.Kendo().Grid((IEnumerable<Doc.Web.Models.Vendor.DocumentsDetails>)Model.documents_lst)
.Name("grid").Scrollable()
.Columns(columns =>
{
columns.Bound(o => o.DocumentRevisionID).Visible(false);
columns.Bound(o => o.Documentnumber).Title("Document #").Width(150);
columns.Bound(o => o.Revision).Title("Revision").Width(80);
columns.Bound(o => o.RevisionDate).Format("{0:dd/MM/yyyy}").Title("Rev Date").Width(85);
columns.Bound(o => o.RevisionStatus).Title("Revision</br> Status").Width(100);
columns.Bound(s => s.DocNumberPurpose).ClientTemplate((#Html.Kendo().DropDownList()
.BindTo((System.Collections.IEnumerable)ViewData["Purpose"])
.Name("DocNumberPurpose")
.DataTextField("Text")
.DataValueField("Value")
.ToClientTemplate()).ToHtmlString());
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(o => o.DocumentRevisionID))
.Model(model=>model.Field(o=>o.DocNumberPurpose).Editable(false))
)
.Events(ev=>ev.DataBound("onGridDataBound"))
.Pageable()
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.DocumentRevisionID))
.Read(read => read.Action("EditingInline_Read", "DesignCoverSheet").Data("additionalInfo"))
)
)
<script>
function onGridDataBound(e) {
$('#grid script').appendTo(document.body);
}
</script>
You're very close actually:
columns.Bound(property => property.neatProperty).Width(38).EditorTemplateName("neatPropertyDropDownList").Title("NeatProperty")
And then in a separate view called "neatPropertyDropDownList.cshtml"
#using System.Collections;
#(Html.Kendo().DropDownList()
.Name("NeatProperty")
.DataTextField("Value")
.DataValueField("Text")
.BindTo("don't forget to bind!")
)
Check this article for a detailed example of exactly what you are trying to do, specifically in step 3
Step 3 – Embedding the Kendo Drop-down List
Basically you can do that in the following manner:
Inside the Kendo grid the property foreign key of your model must be linked to a EditorTemplateName that accepts a template name. As an example:
columns.Bound(e => e.CompanyId).EditorTemplateName("CompaniesList").Title("Company").ClientTemplate("#:CompanyName#");
The template name in the above example is "CompaniesList" which will be a cshtml view file inside EditorTemplates folder.
As per the above article:
The EditorTemplateName specifies to the grid that when either in Create or Edit modes, the template should be placed in the data file named "CompaniesList" that is found in the directory by name of EditorTemplates directory. The subsequent step therefore involves the creation of a folder by name of "EditorTemplates" and place an empty view in it by name of "CompaniesList". The code bit "ClientTemplate(“#:CompanyName#”)" means that when display is in the view mode, (that is, not creating or editing) CompanyName has to be displayed (in this case, it is "Microsoft"). Once this is complete, all what remains to be done is the creation of drop-down list which will be used in the view.
After you create the "CompaniesList" editor template file, you define the Kendo drop down list inside it as follows:
#using System.Collections
#model System.Int32
#(Html.Kendo().DropDownList()
.BindTo((IEnumerable)ViewBag.Companies)
.OptionLabel("- Select Company - ")
.DataValueField("Id")
.DataTextField("Name")
.Name("CompanyId")
)
Note that the drop down Name must be exactly as the column property in the grid which is "CompanyId"
You might look into Kendo Grid ForeignKey Column concept. It can be used as
columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName").Title("Category").Width(150);
Detail can be found here http://demos.telerik.com/kendo-ui/web/grid/foreignkeycolumn.html

Kendo UI Grid returns JSON to browser (using MVC)

I've recently purchased a Kendo subscription, I'm having trouble getting an AJAX bound grid to operate as expected, hoping someone here can help.
I have followed the Kendo docs tutorial # http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding
and could get the AJAX binding working nicely.
I've tried to now implement it into an existing MVC solution, and whenever I click the New or Edit command button, I get a string of JSON returned to the browser. Similiar to issue (JSON data to KENDO UI Grid ASP.NET MVC 4) But the answer in that problem didn't work for me.
Here is my Controller code...
public ActionResult Index()
{
// non-important code removed here //
var viewModel = newReferenceViewModel();
ViewBag.TradeReferences = TradeReferenceWorker.Get(applicationId);
return View(viewModel);
}
public ActionResult TradeReferences_Read([DataSourceRequest]DataSourceRequest request)
{
var applicationId = GetCurrentApplicationId();
DataSourceResult result = TradeReferenceWorker.Get(applicationId).ToDataSourceResult(request);
return Json(result, "text/x-json", JsonRequestBehavior.AllowGet);
}
And the View ....
#(Html.Kendo().Grid((IEnumerable<TradeReference>)ViewBag.TradeReferences)
.Name("gridTradeReference")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(tradeReference => tradeReference.TradeReferenceId);
model.Field(tradeReference => tradeReference.TradeReferenceId).Editable(false);
})
.Read(read => read.Action("TradeReferences_Read", "References"))
.Create(create => create.Action("TradeReference_Create", "References"))
.Update(update => update.Action("TradeReference_Update", "References"))
.Destroy(destroy => destroy.Action("TradeReference_Destroy", "References"))
)
.Columns(columns =>
{
columns.Bound(tref => tref.TradeReferenceId).Visible(false);
columns.Bound(tref => tref.Name);
columns.Bound(tref => tref.Phone);
columns.Command(commands =>
{
commands.Edit();
commands.Destroy();
}).Title("").Width(200);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable()
)
So to sum up... the Grid will load perfectly the first time. I haven't wired up anything on the Edit / Delete actions, just trying to get Create operational. Clicking Add New, or even Edit for that matter will make the browser simply display Json to the screen.
It is hopefully something simple - thanks in advance
Solved it - the problem was the kendo js files were not being referenced correctly.
In my particular case, the bundling wasn't done 100% correctly so the Kendo javascript files were never getting included in the page.
They must also appear in a certain order, as described in the troubleshooting guide http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/troubleshooting

Telerik grid shows an empty column after delete command

I am using Telerik MVC Extensions Grid control, with AJAX binding, and run a delete command. Deletion works as intended, and the grid updates so that it doesn't show the deleted row.
However, after deleting one of the grid columns (the first one) shows up empty. There is also difference in the second column - 'false' instead of the unchecked box.
Any ideas why, and how do I fix that?
I can refresh the screen, and that fixes the view. But it is a heavy page, and I'd rather not do the second refresh.
After deleting, the first column shows up empty:
My grid:
Html.Telerik()
.Grid(Model)
.Name("scenarioGrid")
.DataBinding(dataBinding => dataBinding.Ajax()
.Delete("Delete", "Scenario"))
.DataKeys(keys => keys.Add(c => c.Id))
.Columns(columns =>
{
columns.Template(o => Html.ActionLink(o.Name, "Index", new {id = o.Name})).Title("Scenario")
.FooterTemplate(#<text>Total #Model.Count() </text>);
columns.Bound(o => o.IsLocked);
columns.Bound(o => o.ContractMonth);
columns.Bound(o => o.CreateDate);
columns.Command(commands => commands.Delete().ButtonType(GridButtonType.Image)).Title("Delete");
}
)
.Sortable()
.Scrollable(scroll => scroll.Height(200))
.ClientEvents(events => events.OnDelete("onDelete").OnComplete("afterDelete"))
You shouldn't use columns.Template with Ajax binding. It's meant for server side bound grids. You should use
columns.Bound(o => 0.whatever).ClientTemplate("convert your link to a string here");
It looks like you are using server binding to load the grid, but ajax binding to update it. columns.Template is used for server binding. You should use ClientTemplate for ajax binding.

Resources