I use Telerik grid in my asp.net core application.
I have a list of Orders, I need to bind some fields (like CreatedBy, by eg.) to be hidded, in order to get them when the user updates them.
I saw similar question without an answer.
my Code
#(Html.Kendo()
.Grid(Model)
.Name("Orders")
.Columns(columns =>
{
columns.Bound(c => c.Name).Width(190);
columns.Bound(c => c.CreatedById).Hidden();
columns.Bound(c => c.ModifiedById).Hidden();
columns.Command(command => { command.Destroy(); }).Width(100);
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model => {
model.Id(s => s.Id);
})
.Create(update => update.Action("BatchCreate", "Orders"))
.Read(read => read.Action("BatchRead", "Orders"))
.Update(update => update.Action("BatchUpdate", "Orders"))
.Destroy(update => update.Action("BatchDestroy", "Orders"))
)
)
Finally, solved it by adding the hidden fields to the datasource model:
.Columns(columns =>
{
columns.Bound(c => c.Name).Width(190); // visible
columns.Bound(c => c.HiddenId).Hidden();
columns.Bound(c => c.HiddenOtherFiled).Hidden();
})
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(s => s.Id);
model.Field(s => s.HiddenId);
model.Field(s => s.HiddenOtherFiled);
})
I have a mvc4 razor view consists of a Kendo mvc grid with detail templates which are also Kendo mvc grids within each tab of a Kendo Tabstrip.
Each detail grids are linked to the master grid via the unique ID of the master grid.
All the grids can render without problem when the columns are text.
However, once I starting to customize some columns, i.e. replacing text column by EditorTemplate, then the grids won't render anymore. I used ForeignKeyColumn in some of the columns and they worked but due to the record size of certain columns, I have to use EditorTemplate to customize the source and limit the number of records pass to the client each time.
Here's my code for the view.
#(Html.Kendo().Grid<EMD.DAL.Domain.Attribute.AssetSubType>()
.Name("subTypeGrid")
.Columns(columns =>
{
columns.Bound(c => c.AssetSubTypeID).Hidden();
columns.ForeignKey(c => c.AssetTypeID, (System.Collections.IEnumerable)ViewData["assetTypes"], "AssetTypeID", "Type").Width(200);
columns.Bound(c => c.SubType).Width(300);
columns.Bound(c => c.Description).Width(300);
columns.Bound(c => c.ProductTypeID).Width(100);
columns.Bound(c => c.PhysicalItem).Width(100);
columns.Bound(c => c.LastModified).Hidden();
columns.Bound(c => c.LastModifiedBy).Hidden();
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
})
.
.
.Editable(editable => editable.Mode(GridEditMode.InLine))
.ClientDetailTemplateId("SubTypeChildrenTemplate")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.AssetSubTypeID);
})
)
<script id="SubTypeChildrenTemplate" type="text/kendo-tmpl">
#(Html.Kendo().TabStrip()
.Name("tabStrip_#=AssetSubTypeID#")
.SelectedIndex(0)
.Items(tabStrip =>
{
tabStrip.Add().Text("Specs").Content(#<text>
#(Html.Kendo().Grid<EMD.DAL.Domain.Attribute.SubTypeSpec>()
.Name("specGrid_#=AssetSubTypeID#")
.Columns(columns =>
{
columns.ForeignKey(o => o.SubTypeSpecCategoryID, (System.Collections.IEnumerable)ViewData["subTypeSpecsCat"], "SubTypeSpecCategoryID", "SpecCategory").Title("SpecCategory").Width(100);
columns.Bound(o => o.Spec).Width(100);
columns.Bound(o => o.SpecValue).Title("SpecValue").Width(100);
columns.ForeignKey(o => o.UnitID, (System.Collections.IEnumerable)ViewData["specUnits"], "UnitID", "SpecUnit").Width(50).Title("Unit");
columns.Bound(o => o.Comment).Width(100);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.SubTypeSpecID);
})
.Read(read => read.Action("SubTypeSpecs_Read", "AssetAttribute", new { assetSubTypeID = "#=AssetSubTypeID#" }))
.Update(update => update.Action("SubTypeSpecs_Update", "AssetAttribute"))
.Create(update => update.Action("SubTypeSpecs_Create", "AssetAttribute").Data("onAddSubItem"))
.Destroy(update => update.Action("SubTypeSpecs_Destroy", "AssetAttribute"))
)
.
.
.Editable(editable => editable.Mode(GridEditMode.InLine))
.ToClientTemplate()
)
</text>);
tabStrip.Add().Text("Attributes").Content(#<text>
#(Html.Kendo().Grid<EMD.DAL.Domain.Attribute.SubTypeAttribute>()
.Name("attributeGrid_#=AssetSubTypeID#")
.Columns(columns =>
{
columns.ForeignKey(c => c.AttributeValueID, (System.Collections.IEnumerable)ViewData["attributes"], "AttributeValueID", "Attribute").Title("Attribute").Width(200);
columns.Bound(c => c.DefaultValue);
columns.Bound(c => c.Description);
columns.Bound(c => c.LastModified).Hidden();
columns.Bound(c => c.LastModifiedBy).Hidden();
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
})
.
.
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Model(model =>
{
model.Id(p => p.SubTypeAttributeID);
model.Field(p => p.SubTypeAttributeID).Editable(false);
model.Field(p => p.LastModified).Editable(false);
model.Field(p => p.LastModifiedBy).Editable(false);
})
.Read(read => read.Action("SubTypeAttributes_Read", "AssetAttribute", new { assetSubTypeID = "#=AssetSubTypeID#" }))
.Create(create => create.Action("SubTypeAttributes_Create", "AssetAttribute").Data("onAddSubItem"))
.Update(update => update.Action("SubTypeAttributes_Update", "AssetAttribute"))
.Destroy(destroy => destroy.Action("SubTypeAttributes_Destroy", "AssetAttribute"))
)
.ToClientTemplate()
)
</text>);
tabStrip.Add().Text("Parts").Content(#<text>
#(Html.Kendo().Grid<EMD.DAL.Domain.Attribute.SubTypePartList>()
.Name("partGrid_#=AssetSubTypeID#")
.Columns(columns =>
{
columns.Bound(c => c.ParentID).Hidden();
columns.Bound(c => c.AssetSubType).Title("SubType").ClientTemplate("\\#=AssetSubType.SubType\\#").EditorTemplateName("SubTypeEditor");
columns.Bound(c => c.SPartID);
columns.Bound(c => c.Qty);
columns.Bound(c => c.Description);
columns.Bound(c => c.InsideParent);
columns.Bound(c => c.LastModified).Hidden();
columns.Bound(c => c.LastModifiedBy).Hidden();
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
})
.
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.ID);
model.Field(p => p.AssetSubType);
})
.Read(read => read.Action("SubTypePartLists_Read", "AssetAttribute", new { assetSubTypeID = "#=AssetSubTypeID#" }))
.Create(create => create.Action("SubTypePartLists_Create", "AssetAttribute").Data("onAddSubItem"))
.Update(update => update.Action("SubTypePartLists_Update", "AssetAttribute"))
.Destroy(destroy => destroy.Action("SubTypePartLists_Destroy", "AssetAttribute"))
)
.ToClientTemplate()
)
</text>);
tabStrip.Add().Text("Asset Items").Content(#<text>
#(Html.Kendo().Grid<EMD.Manager.ViewModels.AssetItemVM>()
.Name("assetItemsGrid_#=AssetSubTypeID#")
.Columns(columns =>
{
columns.Bound(c => c.Asset);
columns.Bound(c => c.Description);
columns.Bound(c => c.Location).Title("Location").ClientTemplate("\\#=Location.Asset\\#").EditorTemplateName("LocationEditor");
columns.Bound(c => c.Owner);
columns.Bound(c => c.LastModified).Hidden();
columns.Bound(c => c.LastModifiedBy).Hidden();
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
})
.ToolBar(toolbar =>
{
toolbar.Create().HtmlAttributes((new { onclick = "setMasterSubTypeID(this, #=AssetSubTypeID#)" }));
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.AssetItemID);
model.Field(p => p.Location);
})
.Read(read => read.Action("AssetItems_Read", "AssetAttribute", new { assetSubTypeID = "#=AssetSubTypeID#" }))
.Create(create => create.Action("AssetItems_Create", "AssetAttribute").Data("onAddSubItem"))
.Update(update => update.Action("AssetItems_Update", "AssetAttribute"))
.Destroy(destroy => destroy.Action("AssetItems_Destroy", "AssetAttribute"))
)
.ToClientTemplate()
)
</text>);
tabStrip.Add().Text("SubType I/O").Content(#<text>
#(Html.Kendo().Grid<EMD.DAL.Domain.Attribute.SubTypeIO>()
.Name("IOGrid_#=AssetSubTypeID#")
.Columns(columns =>
{
columns.ForeignKey(c => c.IOTypeID, (System.Collections.IEnumerable)ViewData["ioTypes"], "IOTypeID", "IType").Title("I/OType").Width(50);
columns.ForeignKey(c => c.FieldDeviceTypeID, (System.Collections.IEnumerable)ViewData["fieldDevices"], "FieldDeviceTypeID", "FieldDevice").Title("Field Device Type").Width(150);
columns.ForeignKey(c => c.EngUnitID, (System.Collections.IEnumerable)ViewData["engUnits"], "EngUnitID", "EngineeringUnit").Title("Eng Unit").Width(100);
columns.Bound(c => c.IOTag);
columns.Bound(c => c.IODescription);
columns.Bound(c => c.IOModule);
columns.Bound(c => c.IOChannelNo);
columns.Bound(c => c.InputLow);
columns.Bound(c => c.InputHigh);
columns.Bound(c => c.MinEngValue);
columns.Bound(c => c.MaxEngValue);
columns.Bound(c => c.FATOnly);
columns.Bound(c => c.LastModified).Hidden();
columns.Bound(c => c.LastModifiedBy).Hidden();
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.SubTypeIOID);
})
.Read(read => read.Action("SubTypeIOs_Read", "AssetAttribute", new { assetSubTypeID = "#=AssetSubTypeID#" }))
.Create(create => create.Action("SubTypeIOs_Create", "AssetAttribute").Data("onAddSubItem"))
.Update(update => update.Action("SubTypeIOs_Update", "AssetAttribute"))
.Destroy(destroy => destroy.Action("SubTypeIOs_Destroy", "AssetAttribute"))
)
.ToolBar(toolbar =>
{
toolbar.Create().HtmlAttributes((new { onclick = "setMasterSubTypeID(this, #=AssetSubTypeID#)" }));
})
.ToClientTemplate()
)
</text>);
})
)
</script>
Here's my two EditorTemplate.
#model object
<script>
function valueMapper(options) {
$.ajax({
url: "#Url.Action("AssetItems_ValueMapper", "AssetAttribute")",
data: convertValues(options.value),
success: function (data) {
options.success(data);
}
});
}
function convertValues(value) {
var data = {};
value = $.isArray(value) ? value : [value];
for (var idx = 0; idx < value.length; idx++) {
data["values[" + idx + "]"] = value[idx];
}
return data;
}
</script>
#(Html.Kendo().DropDownListFor(m => m)
.HtmlAttributes(new { id = "LocationDDL#=AssetSubTypeID#" })
.Name("Location")
.DataTextField("Asset")
.DataValueField("AssetItemID")
//.AutoBind(false)
.Filter(FilterType.StartsWith)
.MinLength(3)
.DataSource(source =>
{
source.Custom()
.ServerFiltering(true)
.ServerPaging(true)
.ServerSorting(true)
.PageSize(5)
.Type("aspnetmvc-ajax")
.Transport(transport =>
{
transport.Read("AssetItemsDropDown_Read", "AssetAttribute");
})
.Schema(schema =>
{
schema.Data("Data").Total("Total");
});
})
//.Events(events => events.Change("selected"))
.Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
)
#model object
<script>
function valueMapper(options) {
$.ajax({
url: "#Url.Action("SubTypes_ValueMapper", "AssetAttribute")",
data: convertValues(options.value),
success: function (data) {
options.success(data);
}
});
}
function convertValues(value) {
var data = {};
value = $.isArray(value) ? value : [value];
for (var idx = 0; idx < value.length; idx++) {
data["values[" + idx + "]"] = value[idx];
}
return data;
}
</script>
#( Html.Kendo().DropDownListFor(m => m)
.HtmlAttributes(new { id = "SubTypeDDL#=AssetSubTypeID#" })
.Name("AssetSubType")
.DataTextField("SubType")
.DataValueField("AssetSubTypeID")
.HtmlAttributes(new { style = "width:300px" })
.Filter(FilterType.StartsWith)
.MinLength(3)
.DataSource(source =>
{
source.Custom()
.ServerFiltering(true)
.ServerPaging(true)
.ServerSorting(true)
.PageSize(5)
.Type("aspnetmvc-ajax")
.Transport(transport =>
{
transport.Read("AssetSubTypesDropDown_Read", "AssetAttribute");
})
.Schema(schema =>
{
schema.Data("Data").Total("Total");
});
})
.Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
//.Events(events => events.Change("selected"))
)
I found the lines causing the problem are both related to using EditorTemplate. The grids load again once I comment these two lines out.
columns.Bound(c => c.AssetSubType).Title("SubType").ClientTemplate("\#=AssetSubType.SubType\#").EditorTemplateName("SubTypeEditor");
columns.Bound(c => c.Location).Title("Location").ClientTemplate("\#=Location.Asset\#").EditorTemplateName("LocationEditor");
According to Kendo documentation, I have escaped the #hash by putting in two (2)\ backslashes (screen only shows one but I put two in the code) before each instance of # but the grids still don't render.
However, if I take out these detail grids and put them on a new view, they will work.
I tried to assign unique name to the DropDownList as well but it doesn't seem to help.
Any help will be greatly appreciated.
I am new to using Kendo UI. What I want to do is map a mvc action to the read action in my grid. I have a hard coded dropdownlist and I want to pass the selected index to my controller.
In my grid I set the read action to controller/handler..see grid below
#(Html.Kendo()
.Grid(Model.ControlResults)
.Name("ControlResultGrid")
.Columns(columns =>
{
columns.Bound(p => p.PeCode).Title("PE").Width(100);
columns.Bound(p => p.AppropName).Title("Approp").Width(100);
columns.Bound(p => p.LimitCode).Title("Limit").Width(100);
columns.Bound(p => p.FundingTypeAbbrev).Title("FundType").Width(100);
columns.Bound(p => p.AccountDetailType).Title("AccType").Width(100);
columns.Bound(p => p.Category).Title("Category").Width(100);
columns.Bound(p => p.SubCategory).Title("Sub Category").Width(100);
columns.Bound(p => p.SetAside).Title("Set Aside").Width(100);
columns.Bound(p => p.ProjectNumber).Title("Task").Width(100);
columns.Bound(p => p.EEIC).Title("EEIC").Width(100);
columns.Bound(p => p.ReimbOrg).Title("Reimb Org").Width(100);
columns.Bound(p => p.FY1Result).Title("2013 Results").Width(100);
columns.Bound(p => p.FY2Result).Title("2014 Results").Width(100);
columns.Bound(p => p.FY3Result)
.Title("2015 Results")
.Width(100)
.ClientFooterTemplate("Sum: #=sum#");
columns.Bound(p => p.FY4Result).Title("2016 Results").Width(100);
columns.Bound(p => p.FY5Result).Title("2017 Results").Width(100);
columns.Bound(p => p.FY6Result).Title("2018 Results").Width(100);
columns.Bound(p => p.FY7Result).Title("2019 Results").Width(100);
columns.Bound(p => p.FY8Result).Title("2020 Results").Width(100);
columns.Bound(p => p.FY9Result).Title("2021 Results").Width(100);
})
.ToolBar(toolbar =>
{
toolbar.Template(#<text>
<ul class="navbar-nav nav ">
<li>
#(Html.Kendo()
.DropDownList()
.Name("ddlTransControlResults")
.DataTextField("Text")
.DataValueField("Value")
.SelectedIndex(0)
.OptionLabel("Choose View")
.BindTo(new List<SelectListItem>()
{
new SelectListItem()
{
Text = "Control Results",
Value = "0"
},
new SelectListItem()
{
Text = "Program Results",
Value = "1"
},
new SelectListItem()
{
Text = "Authorization Results",
Value = "1"
}
})
**.Events(e => e.Select("grd_toolbar_OnSelect_ViewDD"))**
)
</li>
<li>
#(Html.Kendo()
.Button()
.Name("RefreshButton")
.Tag("a")
.HtmlAttributes(new { title = "Refresh" })
.Content("<i class='fa fa-refresh'></i> Refresh")
.Events(events => events.Click("onRefreshClick"))
)
</li>
<li>
#(Html.Kendo()
.Button()
.Name("CloseButton")
.Tag("a")
.HtmlAttributes(new { title = "Close" })
.Content("<i class='fa fa-times'></i> Close")
.Events(events => events.Click("onCloseClick"))
)
</li>
<li class="navBarExpandButton">
<label class="category-label k-button" for="ExpandAll">
<i class="fa fa-plus"></i> Expand All Rows
</label>
</li>
</ul>
</text>);
})
.DataSource(datasource => datasource
.Ajax()
**.Read(read => read.Action("PartialView", "GetAll"))**
.Aggregates(aggregates => { aggregates.Add(p => p.FY3Result).Sum(); })
.Model(model =>
{
model.Id(p => p.MgmtControlId);
}))
.Pageable()
.Scrollable()
.BindTo(Model.ControlResults)
)
**I then wire up the event in javascript...see javascript below**
function grd_toolbar_OnSelect_ViewDD(e) {
////////update main grid datasource
$("#ControlResultGrid")
.data("kendoGrid")
.dataSource
.read({
"ddlIndex": this.dataItem(e.item.index()).Value
});
;
}
***Here is my controller signature....***
public ActionResult GetAll([DataSourceRequest] DataSourceRequest request, int ddlIndex)
{
The easiest thing to do is change the signature of the grid's datasource read.
If you change it from:
.DataSource(datasource => datasource
.Ajax()
.Read(read => read.Action("PartialView", "GetAll"))
to
.DataSource(datasource => datasource
.Ajax()
.Read(read => read.Action("PartialView", "GetAll").Data("selectedDropDrown"))
Then create the appropriate javascript function
function selectedDropDown()
{
var selectedValue = $('#dropdownlist').data('kendoDropDownList').select();
if (selectedValue == 'undefined' || selectedValue == null)
{
selectedValue = -1;
}
return { ddlIndex : selectedValue}
}
Then if you can to call the read action from the dropdown change that to use the change event and then just call something like this:
function dropDownChange()
{
$("#ControlResultGrid").data("kendoGrid").dataSource.read();
}
This will then fire of the read event and update the grid for you.
Hopefully this is what you are after.
How i can prevent the user only check one record at a time when the tick checkbox. Currently the user can tick more than one record. Please advise, thank you
#(Html.Kendo().Grid<TRC.Models.ProductModel>()
.Name("Product")
.HtmlAttributes(new { #Style = "align:center; font-size:12px; width:470px; height:100%" })
.Columns(columns =>
{
columns.Template(p => p.Id).ClientTemplate("<input type='checkbox' class='chkbx'/> ").Width(25);
columns.Bound(p => p.ProductId).Width(220);
columns.Bound(p => p.ProductName).Width(220);
columns.Bound(p => p.ProductCreateDate).EditorTemplateName("Date").Format("{0:dd/MM/yyyy}").Width(120);
//columns.Command(commands => commands.Edit()).Width(100);
columns.Command(commands => commands.Destroy());
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable()
.Selectable()
.Scrollable(scrollable => scrollable.Virtual(true))
.ColumnMenu(c => c.Columns(false))
.DataSource(dataSource => dataSource
.Ajax()//bind with Ajax instead server bind
.ServerOperation(true)
.Model(model =>
{
model.Id(p => p.ProductId);
model.Field(p => p.ProductCreateDate).DefaultValue(DateTime.Now);
model.Field(p => p.ProductCreateDate).Editable(false);
})
.Sort(sort => sort
.Add(x => x.ProductCreateDate).Descending()
)
.Read(read => read.Action("GetProduct", "ProductDetails").Type(HttpVerbs.Get))
.Destroy("DeleteProduct", "ProductDetails")
)
)
Let's say you have the following logic that handles the clicking. Then you can turn the other model fields to false like this:
$('#grid').on('click', '.chkbx', function () {
var checked = $(this).is(':checked');
var grid = $('#grid').data().kendoGrid;
//clearAll all other checked
if(checked){
$.each(grid.dataSource.view(),function(){
this.isAdmin = false;
})
}
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('IsAdmin', checked);
})
How to pass params into partial with haml and unobtrusive javascript
comments/create.js.haml
$("#comment_list").html("#{escape_javascript( render(:partial => "shared/comments", :locals => { :commentable => #album }) ).html_safe}");
crashed
but in albums/show.html.haml
#comment_list= render :partial => 'shared/comments', :locals => { :commentable => #album }
working without bugs
I'm change
#comment_list= render :partial => 'shared/comments', :locals => { :commentable => #album }
to
#comment_list= render :partial => 'shared/comments', :locals => { :commentable => #commentable }
and install Haml v3.1.2