How to update the default "Loading..." message in kendo treeview inside razor cshtml. I am using Kendo api 2014.1.416
#(Html.Kendo().TreeView().Name("ProductTree")
.DataSource(d => d
.Model(m => m
.Id("ProductId")
.HasChildren("Categories"))
.Read(r => r.Action("_ProductTree", "Home")))
.DataTextField("ProductName"))
There is .Messages(...) configurator:
#(Html.Kendo().TreeView().Name("ProductTree")
.Messages(p => p.Loading("..."))
....
Related
I am binding Kendo Grid from ASP.NET MVC as follows:
#(Html.Kendo().Grid<My.Web.Models.Generated.CustomerSearch01.CityInfo>()
.Name("gridCities")
.Columns(columns =>
{
columns.Bound(c => c.Text).Width(140).Title("City");
})
.Scrollable()
.Selectable(selectable => selectable.Type(GridSelectionType.Row))
.BindTo(Model.CitiesList)
.DataSource(ds => ds.Server().Model(m => m.Id(p => p.Value)))
)
That works fine and the grid shows up on the page with data and I have no problems with above. However, using browser developer tools, if I try to get the data of the above grid using the following statement, it returns empty:
jQuery("#gridCities").data("kendoGrid").dataSource.data()
What am I missing?
Thanks in advance
Solution (based the answer):
replace the following:
.DataSource(ds => ds.Server().Model(m => m.Id(p => p.Value)))
with
.DataSource(ds => ds.Ajax().ServerOperation(false).Model(m => m.Id(p => p.Value)))
You Grid is configured to use ServerBinding which means the TR / TD elements are rendered from the server. If you want to have the JavaScript objects of your model on the client side and do not perform separate Ajax request configure your DataSource to be
ds.Ajax().ServerOperations(false)
This will not perform any Ajax requests, data will be serialized from the server int JSON.
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
I have a simple kendo grid that I am trying to associate an editor template with. The foreign key is the only property that is sent down to the client so I can't give the editor template a model type of the foreign key property.
Configuration for Kendo Grid
protected override void Configure(GridBuilder<AreaModel> grid)
{
grid.Columns(c =>
{
c.Bound(a => a.Description);
c.Bound(p => p.CompanyId).ClientTemplate("#= CompanyDescription#").EditorTemplateName("DropDown/CompanyId").Width(160);
c.Command(command => command.Edit()).Width(200);
c.Command(command => command.Destroy()).Width(110);
});
grid.ToolBar(toolbar => toolbar.Create().Text("New Area"));
grid.Editable(edit => edit.Mode(GridEditMode.InLine));
grid.DataSource(d => d
.Ajax()
.Model(m => m.Id(p => p.Id))
.Create("GridInsert", "Area")
.Update("GridUpdate", "Area")
.Destroy("GridDelete", "Area"));
}
}
The editor template is straight forward as well. Everything works except that the value is not posted to the server.
#using Kendo.Mvc.UI
#(Html.Kendo().DropDownList()
.Name("CompanyId")
.DataValueField("Id")
.DataTextField("Name")
.DataSource(d => d.Read("CompaniesData", "Company")))
Can anybody help me out on this one?
modelview propoerty name which should maintain dropdownlist's selected value must be the Name of dropdownlist in editorTemplate and the type of datavaluefield and property should be same.
Below is a sample of MVC Kendo UI Grid bound via Ajax to a WebAPI. The WebAPI uses OpenAccess ORM as data model.
The below code loads the grid with the auto generated columns as per the model and the WebAPI is called successfully and data returned in JSON as given below.
The issue seems to be in grid data binding. The data is not visible in the grid but the columns are loaded successfully. What is missing in the MVC code?
JSON Data:
[{"DC_ID":51234,"DATAACCESS_ID":79238,"MASTERDATA_FLG":"Y","INPUT_TYPE_CD":"QRY","FILE_PATH":"D:\","DESCR":"AAA DATA CAPTURE","STATUS":"A","CREATED_BY":"SYSTEM","CREATED_DTTM":"01-JAN-2013"},{"DC_ID":79238,"DATAACCESS_ID":79238,"MASTERDATA_FLG":"Y","INPUT_TYPE_CD":"QRY","FILE_PATH":"D:\","DESCR":"TEST DATA CAPTURE","STATUS":"A","CREATED_BY":"SYSTEM","CREATED_DTTM":"01-JAN-2013"}]
MVC code:
#(Html.Kendo().Grid<eConverge.DomainModel.Datacapture>()
.Name("Grid")
.Columns(columns =>
{
columns.AutoGenerate(true);
})
.ToolBar(tools =>
{
tools.Create();
})
//.Sortable()
//.Pageable()
//.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.DC_ID);
})
.Read(read => read.Url("http://localhost/econ/econ.webapi/api/datacaptures").Type(HttpVerbs.Get))
.Create(create => create.Url("http://localhost/econ/econ.webapi/api/datacaptures").Type(HttpVerbs.Post))
.Update(update => update.Url("http://localhost/econ/econ.webapi/api/datacaptures").Type(HttpVerbs.Put))
.Destroy(destroy => destroy.Url("http://localhost/econ/econ.webapi/api/datacaptures").Type(HttpVerbs.Delete))
)
)
There is some more code required to bind the grid to Web API controller. I recommend checking the following resources:
http://www.kendoui.com/blogs/teamblog/posts/12-11-29/the_facts_on_using_kendo_ui_with_asp_net_webapi.aspx
http://www.kendoui.com/code-library/mvc/grid/binding-to-a-web-apicontroller.aspx
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.