I have a Hierarchy style Kendo grid and the inner grid doesn't seem to accept client templates. (I stripped the code irrelevant grid configuration columns out )
I really would like the client template to be something like
<a title="#=AlarmStatusDescription#">#=AlarmStatus#</a> but anytime I put anything other than a simple string in the ClientTemplate, the whole grid fails to load.
I've tried
.ClientTemplate("#:AlarmStatus#")
.ClientTemplate("#=AlarmStatus#")
.ClientTemplate("<div class="myclass"></div>") with a separate <script type="text/html" id="myclass">#=AlarmStatus#</script>
#(Html.Kendo().Grid<AccountModel>()
.Name("Accounts_#=Id#")
.Columns(columns =>
{
columns.Command(command => command.Custom("Details").Click("showDetails")).Width(75);
columns.Bound(o => o.AccountName).Width(150);
columns.Bound(o => o.AlarmStatus).Width(100).ClientTemplate("#:AlarmStatus#");`
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>{model.Id(p => p.AccountId);})
.Read(read => read.Action("DetailRead", "Csr", new { personId = #=Id#" }))
)
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.ToClientTemplate()
)
You need to escape the sharp symbols - other way the Outer Grid will try to evaluate this "#:AlarmStatus#" expression. And since most probably there is no such field as AlarmStatus for the Outer Grid (it is property of the Inner one) there will be an exception. If you escape it like this the client template should be skipped by the Outer Grid, and evaluated properly by the Inner Grid.
.ClientTemplate("\\#= AlarmStatus \\#")
I hope you got the idea
You should use: .ClientTemplate("#= AlarmStatus #"). I think that you were missing the quotes ".
Related
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.
I have a grid which has default grouping by one of the columns e.g "Important". I allow grouping by other columns, but I want to lock my default grouping. So no one can remove this grouping.
I didn't find any property to achieve this. I tried using the DataBound event change class and removed the remove button of this column in the group header but later the Kendo script reverted this back to its original state.
#(Html.Kendo().Grid<Model>()
.Name("Grid")
.DataSource(ds => ds
.Ajax()
.PageSize(20)
.ServerOperation(false)
.Model(m => m
.Id(z => z.Id))
.Read(r => r.Action("myAction", "myController"))
.Group(g=>g.AddDescending(c=>c.Important))
)
.Columns(c =>
{
c.Bound(d => d.Important)
.Title("This is important")
.Groupable(false)
.Visible(true)
.Hidden(true);
c.Bound(d => d.otherColumn)
.Title("otherColumn")
.Groupable(true);
....
}
.Groupable()
.Events(e=>e
.Change("onChange")
.DataBound("dataBound")
)
)
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
My first problem is : I use kendo grid with Single Select mode and I need when view loaded for the first time, the first row is selected, in other words, i want to select the first kendo grid row programatically.
moreover other problem is i insert radiobutton column in that grid , and i want synchronize
radiobutton select with row select , in other words, i want that when user select row,it causes it's radiobutton Selected
Please help me
tnx
this is the code:
#(Html.Kendo().Grid<CommonData.Domain.LegalEntityPhone>()
.Name("SMSGrid")
.HtmlAttributes(new { style = "width:800px;" })
.Selectable(selectable =>
selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
.Columns(columns =>
{
columns.Bound(c => c.Id)
.Title(" ")
.ClientTemplate(" <input type='radio' id='Approve' name='chkApprove' />");
columns.Bound(c => c.Number)
.Title("Destination")
.HeaderHtmlAttributes(new { style = "text-align: center;" })
.HtmlAttributes(new { style = "text-align: center; });
columns.Bound(c => c.CityCode)
.Title("City Code")
.Width(30)
.HeaderHtmlAttributes(new { style = "text-align: center" })
.HtmlAttributes(new { style = "text-align:center;width:30px" });
columns.Command(command => { command.Edit(); }).Width(150);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Events(events => events.Change("OnChange"))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id).Editable(false);
})
.Read(read => read.Action("LegalEntityPhoneInfo_Read", "Message"))
.Update(update => update.Action("LegalEntityPhoneInfo_Update", "Message"))
)
)
There is no such thing as making the row selected in the controller because the Grid is all created on the client. You can use the dataBound event to make the first row selected.
e.g.
$(function(){
$('#GridName').data().kendoGrid.bind('dataBound',function(e){
this.select(this.tbody.find('>tr:first'));
})
})
Or use one instead of bind to make the row selected only when the page is loaded, not each time when the Grid is rebound - sort,filter, etc. Check documentation for more info.
If you are unfamiliar with jQuery, I highly recommend you take an online free tutorial from http://jqueryair.com/.
Assuming your project is referencing the jQuery script in your _Layout page, all you should have to do is add an Event handler for Databound to the grid:
.Events(events => events.DataBound("Grid_Databound"))
Then just paste this script onto the page:
<script>
function Grid_Databound() {
var grid = $("#MyGridName").data("kendoGrid");
row = grid.tbody.find(">tr:not(.k-grouping-row)").eq(0);
grid.select(row);
}
</script>
I'm sure the same script that zeinad added would work as well, always more than one way to skin a cat. As far as making the radio button show selected if the row is selected, I think if you watched the tutorial I mentioned, you should be able to figure it out. Post back if you need more help.
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.