Pass hidden fields in Telerik grid row - asp.net-core

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);
})

Related

Display current date in Kendo grid column

I have a Kendo grid like the following:
#(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.order_num).Title(" Number");
columns.Bound(c => c.Customer_name).Title("Customer Name").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
if(ViewBag.odrStatus == "Pending")
{
columns.Bound(c => c.order_date).Format("{0:MM/dd/yyyy}").Title("TodayDate");
columns.Bound(c => c.est_ship_date).Format("{0:MM/dd/yyyy}").Title("NextMonthDate");
}
else
{
columns.Bound(c => c.order_date).Format("{0:MM/dd/yyyy}").Title("Order Submittal Date");
columns.Bound(c => c.est_ship_date).Format("{0:MM/dd/yyyy}");
}
columns.Bound(c => c.Contact_name).Title("Contact Name").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
columns.Bound(c => c.order_status).Title("Status");
})
.Sortable()
.Pageable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("details", "order"))
.PageSize(15)
)
)
I want to check the status of the order. If status is 'pending', then need to display the current date, otherwise display the date from the database.
Can anyone help me to complete this?
Thanks in advance!
Please try this.
columns.Bound(p => p.ID).ClientTemplate(DateTime.Now.ToString()).Title("TodayDate");
Here p.ID is your unique table id.

sub grid in telerik not displaying records

I want to create parent - child grid. I can get parent grid as expected, but Datasource method is not calling for sub grid. Can any one help me to find out solution?
Here is my code:
<div class="panel" style="float:left; width:87%;margin-left:12px">
#(Html.Kendo().Grid<BuildingAssetEntities.Models.AssetDisplay>()
.Name("ManageRecordgrid")
.Columns(columns =>
{
columns.Bound(c => c.BuildingName).Title("Building Name").Width(90);
columns.Bound(p => p.BuildingNo).Title("Building Number").Width(95);
columns.Bound(p => p.assetID).Title("QR").Width(50);
})
.ClientRowTemplate(
"<tr>" +
"<td width='90px'>#:checkNull(BuildingName)#</td>" +
"<td width='95px'>#:checkNull(BuildingNo)#</td>" +
"<td width='50px'>#:checkNull(assetID)#</td>" +
"</tr>")
.Pageable(Pageable => Pageable.Numeric(false)
.PageSizes(true))
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetManageRecordList", "Record"))
.PageSize(20)
.ServerOperation(false))
.ClientDetailTemplateId("template1")
)
<script id="template1" type="text/kendo-tmpl">
#(Html.Kendo().Grid<BuildingAssetEntities.Models.AssetDisplay>()
.Name("grid_#=assetId#")
.Columns(columns =>
{
columns.Bound(c => c.BuildingName).Title("Building Name").Width(90);
columns.Bound(p => p.BuildingNo).Title("Building Number").Width(95);
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetManageRecordSubList", "Record",new {assetId = "#=assetId#"}))
.ServerOperation(false))
.ToClientTemplate()
)
</script>
</div>
I am not get any idea, What is the issue. I am just getting parent grid, not sub grid.
Please give me your suggestion for the same.
I got the solution for this issue. I just changed my parent grid as below and it works as expected.
<div class="panel" style="float:left; width:87%;margin-left:12px">
#(Html.Kendo().Grid<BuildingAssetEntities.Models.AssetDisplay>()
.Name("ManageRecordgrid")
.Columns(columns =>
{
columns.Bound(c => c.BuildingName).Title("BuildingName").Width(90);
columns.Bound(c => c.BuildingNo).Title("BuildingNo").Width(95);
})
.Pageable(Pageable => Pageable.Numeric(false)
.PageSizes(true))
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetManageRecordList", "Record"))
.PageSize(20)
.ServerOperation(false))
.ClientDetailTemplateId("template1")
)
<script id="template1" type="text/kendo-tmpl">
#(Html.Kendo().Grid<BuildingAssetEntities.Models.AssetDisplay>()
.Name("grid_#=assetId#")
.Columns(columns =>
{
columns.Bound(c => c.BuildingName).Title("Building Name").Width(90);
columns.Bound(p => p.BuildingNo).Title("Building Number").Width(95);
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetManageRecordSubList", "Record",new {assetId = "#=assetId#"}))
.ServerOperation(false))
.ToClientTemplate()
)
</script>
</div>
It was not expecting client template in parent grid.

Kendo mvc grid detail templates with columns bounded to editor templates within tabstrip

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.

Only allow to tick a record using check box in kendo ui grid

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 access ViewModel using KendoUI Grid MVC

I have a view like that:
#model MySearchVM
//Filters
...
#Html.TextBoxFor(model => model.Description)
#Html.TextBoxFor(model => model.Letter)
...
//Grid
#(Html.Kendo().Grid<MyGridVM>()
.Name("MyGrid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Hidden(true);
columns.Bound(p => p.Description);
columns.Bound(p => p.Letter);
})
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("_Read", "MyController"))
.Model(model => model.Id(p => p.Id)))
)
My Controller :
public ActionResult _Read([DataSourceRequest] DataSourceRequest request)
{
var list = repository.GetAll().Select(x => new MyGridVM()
{
Id = x.Id,
Description = x.Description,
Letter = x.Letter,
});
return Json(list.ToDataSourceResult(request));
}
All works great... But I want to access my ViewModel in _Read action, so I can manually filter the result...
I tried to pass FormCollection, but only got that from : sort, page, pageSize, group and filter
How Can I do that?
Thanks
Nothing will be send to the server automatically will be available inside the action method. What I can suggest you is to send whatever you need to that action method with the help of the data function of the read configuration to send whatever you need.
e.g.
.DataSource(dataSource => dataSource.Ajax()
.Read(read => read
.Action("Read", "Home")
.Data("additionalData")
)
)
// -- removed for brevity
<script>
function additionalData() {
return {
userID: 42,
search: $("#search").val()
};
}
</script>