I have a telerik grid, I want to display data as below
ProductName Count
Letters 5
Phone
Pens 3
I want to do something like if count>0 then only show th evalue for count column, i.e. do not display value 0.
<% Html.Telerik().Grid(Model.Orders)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.ProductName);
if(Count>0)
{
columns.Bound(o => o.Count);
}
})
.Groupable(settings => settings.Groups(groups => groups.Add(o => o.KeyID)).Visible(false))
.Scrollable(s => s.Enabled(true))
.Scrollable(scrolling => scrolling.Height(300))
.Reorderable(reorder => reorder.Columns(true))
.Footer(true)
.Render();
%>
Thanks
You can use CellAction to render conditional results.
<%
Html.Telerik().Grid(Model.Orders)
.Name("Grid")
.CellAction(cell =>
{
if (cell.Column.Title.Equals("Count"))
{
if (cell.DataItem.Count == 0)
{
cell.Text = " ";
}
}
})
.Columns(columns =>
{
columns.Bound(o => o.ProductName);
columns.Bound(o => o.Count);
})
.Groupable(settings => settings.Groups(groups => groups.Add(o => o.KeyID)).Visible(false))
.Scrollable(s => s.Enabled(true))
.Scrollable(scrolling => scrolling.Height(300))
.Reorderable(reorder => reorder.Columns(true))
.Footer(true)
%>
Related
I am using Kendo MVC grid with ClientGroupHeaderTemplate with ClientTemplate checkboxes as one of the column. Under each group there are check boxes, At least one check box should be selected under each group. How do I loop through each groups and validate if check box is checked or not. Please help.
#(Html.Kendo().Grid<Arthama.Web.GlobalvaluesModels.Model.Model>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Type).Title("Type").ClientGroupHeaderTemplate("#= items[0].Type#").Hidden(true);
columns.Bound(p => p.Text).Visible(true).Width(50).Title("SubType").Filterable(x => x.Cell(y => y.Template("template").ShowOperators(false).Operator("contains")));
columns.Bound(p => p.Value).Visible(false).Width(50).Title("Value");
columns.Bound(c => c.Check).Width(40).Title("Check").ClientTemplate("<input name='Check' type='checkbox' #= Check? checked='checked': '' # class='chk_row' />").HtmlAttributes(new { style = "text-align: center" }).Filterable(false).HeaderHtmlAttributes(new { style = "text-align:center" }).Filterable(false).Sortable(false);
})
.HtmlAttributes(new { #style = "height:390px;" })
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.AutoBind(false)
.DataSource(dataSource => dataSource
.Ajax()
.Sort(x => x.Add("Check").Descending())
.Group(group => group.Add(p => p.Type))
.Batch(true)
.ServerOperation(false)
.PageSize(1000)
.Read(read => read.Action("Action", "Controller").Data("param"))
)
.Pageable()
.Sortable()
.Events(e => e.DataBound("DBound"))
.Scrollable()
.Resizable(resize => resize.Columns(true))
)
This is what I am trying, but this won't loop through groups
var len = $("#grid").data("kendoGrid").dataSource.data().length;
var data = $("#grid").data("kendoGrid").dataSource.data();
for (i = 0; i < len; i++) {
if (data[i].Check=== true) {
}
}
So I've got the following piece of code working server side using Kendo Grid. However, I am confused on the next step.
How do I set the grid to initially group by Income_Party? Also is it possible to add in a total amount per grouping?
#(Html.Kendo().Grid(Model.IncomeView)
.Name("grid")
.Columns(columns =>
{
columns.Bound(model => model.INC_INCOME_DESCRIPTION);
columns.Bound(item => item.INC_INCOME_AMOUNT);
columns.Bound(item => item.INC_INCOME_PARTY);
columns.Template(#<text>
#Html.ActionLink("Edit", "Edit", "MyLink" + item.VIEW_TYPE, new { id = item.GID, ReturnAction = "IncomeAndExpenses" }, null)
</text>)
.ClientTemplate("<a href='/brunch/statistics/brunchid=#= BrunchCode#'>#=BrunchCode#</a>")
.Title("");
})
)
You can set the initial groups and aggregates like this:
#(Html.Kendo().Grid(Model.IncomeView)
.Name("grid")
.Columns(columns =>
{
columns.Bound(model => model.INC_INCOME_DESCRIPTION);
columns.Bound(item => item.INC_INCOME_AMOUNT).GroupFooterTemplate(#<text>
Total: #item.Sum
</text>);
columns.Bound(item => item.INC_INCOME_PARTY);
columns.Template(#<text>
#Html.ActionLink("Edit", "Edit", "MyLink" + item.VIEW_TYPE, new { id = item.GID, ReturnAction = "IncomeAndExpenses" }, null)
</text>)
.ClientTemplate("<a href='/brunch/statistics/brunchid=#= BrunchCode#'>#=BrunchCode#</a>")
.Title("");
})
.DataSource(dataSource => dataSource
.Server()
.Aggregates(aggregates =>
{
aggregates.Add(p => p.INC_INCOME_AMOUNT).Sum();
})
.Group(groups => groups.Add(p => p.INC_INCOME_PARTY))
)
I have a question based on my current situation, I have a grid with ClientDetail / Child grid inside of it. In my parent grid there is a custom command button, let say...
"columns.Command(
command => { command.Custom("Edit").Click("showEdit"); command.Destroy();
}).Width(160);"
and also i had my custom command button as well in my child grid, let say...
"columns.Command(
command => { command.Custom("Edit").Click("showSubEdit"); command.Destroy();
}).Width(160);"
Those 2 custom command should call different function which is "showEdit" & "showSubEdit". The problem is, every time custom command in child grid triggered, it always calls its parent's function which is "showEdit", however the child grid should call "showSubEdit".
Is there something i missed ?
NB :
function showEdit(e) {
...
}
function showSubEdit(e) {
...
}
Grid Code :
<div>
#(Html.Kendo().Grid<ActivityModel>()
.Name("GridActivity")
.Columns(columns =>
{
//columns.Template(t => { }).Title("No").ClientTemplate("#= renderNumber(data) #").Width(50);
columns.Bound(c => c._id).Visible(false);
columns.Bound(c => c.ActivityType.TypeTitle).Title("Type").Width(80);
columns.Bound(c => c.ActivityTitle).Title("Title").Width(120);
columns.Bound(c => c.DependenciesStr).Title("Dependencies").Width(120);
columns.Bound(c => c.ResourcesStr).Title("Resources").Width(120);
columns.Bound(c => c.FromStr).Title("From");
columns.Bound(c => c.ToStr).Title("To");
columns.Bound(c => c.Status).Title("Status").Width(90).Format("{0:0.00} %").Width(85);
columns.Bound(c => c.Weight).Title("Weight").Format("{0:0.00} %").Width(85);
columns.Command(command => { command.Custom("Edit").Click("showEdit"); command.Destroy(); }).Width(160);
})
.HtmlAttributes(new { style = "height: 290px;" })
.Groupable()
.Scrollable()
.Sortable()
.Filterable()
.ClientDetailTemplateId("template")
.Pageable(x => x.PageSizes(new int[] { 10, 20 }).Refresh(true))
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(c => c.Id(p => p._id))
.Read(read => read.Action("ProjectActivities_Read", "Project", new { projectId = ViewBag.ProjectId }))
.Destroy(destroy => destroy.Action("ProjectActivities_Destroy", "Project", new { projectId = ViewBag.ProjectId }))
)
.Events(x => x.DataBound("resetRowNumber"))
)
</div>
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().TabStrip()
.Name("TabStrip_#=_id#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Sub Activity").Content(#<text>
#(Html.Kendo().Grid<ActivityModel>()
.Name("GridChild_#=_id#")
.Columns(columns =>
{
columns.Bound(x => x._id).Visible(false);
columns.Bound(x => x.ActivityType.TypeTitle).Title("Type");
columns.Bound(x => x.ActivityTitle).Title("Title").Width(150);
columns.Bound(x => x.DependenciesStr).Title("Dependencies").Width(150);
columns.Bound(x => x.ResourcesStr).Title("Resources").Width(150);
columns.Bound(x => x.FromStr).Title("From");
columns.Bound(x => x.ToStr).Title("To");
columns.Bound(x => x.Status).Title("Status").Width(90).Format("{0:0.00} %").Width(85);
columns.Bound(x => x.Weight).Title("Weight").Format("{0:0.00} %").Width(85);
columns.Command(command => { command.Custom("Edit").Click("showEditSub"); command.Destroy(); }).Width(160);
})
.Pageable(x => x.PageSizes(new int[] { 5, 10 }).Refresh(true))
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Model(x => x.Id(y => y._id))
.Read(read => read.Action("ProjectSubActivities_Read", "Project", new { projectId = ViewBag.ProjectId, activityId = "#=_id#" }))
.Destroy(destroy => destroy.Action("ProjectSubActivities_Destroy", "Project", new { projectId = ViewBag.ProjectId, activityId = "#=_id#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate())
</text>
);
}).ToClientTemplate())
</script>
I got around the bubbling by checking if the element shown by the first command event is visible:
function showDetailsLevel(e) {
e.preventDefault();
originatingId = this.dataItem($(e.currentTarget).closest("tr")).Id
var wnd = $("#Details").data("kendoWindow");
if (!$("#Details").is(":visible")) {
wnd.center();
wnd.open();
var grid = $("#DetailGrid").data("kendoGrid");
grid.dataSource.read();
}
}
I'm developing an app using Kendo UI for MVC and I want to be able to change the background of a cell but I don't know how to get the value of the column cell background property so I can set it.
#(Html.Kendo().Grid(Model)
.Name("LineItems")
.Events(e=> e
.DataBound("LineItems_Databound")
)
.Columns(columns =>
{
columns.Bound(o => o.Ui).Title("UI").Width(20);
columns.Bound(o => o.QtyOrdered).Title("Qty Ord").Width(30);
columns.Bound(o => o.Nomenclature).Width(200);
columns.Bound(o => o.QtyShipped).Width(20).Title("Qty Sent");
columns.Bound(o => o.QtyReceived).Width(20).Title("Qty Rx");
columns.Bound(o => o.ReqID).Width(50);
columns.Bound(o => o.JCN_Job).Width(50).Title("Job/JCN");
columns.Bound(o => o.ManPartID).Width(100).Title("Part#");
columns.Bound(o => o.Requestor).Width(100).Title("Requestor");
})
.ToolBar(toolbar =>
{
//toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.Selectable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.ID))
.Batch(true)
.ServerOperation(false)
.Read(read => read.Action("Editing_Read", "Shipping"))
.Update(update => update.Action("UpdateShipment", "Shipping"))
//.Destroy(update => update.Action("Editing_Destroy", "Shipping"))
)
)
In my script I have code that loops through my grid on .databound
function LineItems_Databound() {
var grid = $("#LineItems").data("kendoGrid");
var data = grid.dataSource.data();
$.each(data, function (i, row) {
var qtyRx = row.QtyReceived;
var qtySx = row.QtyShipped;
if (qtyRx < qtySx) {
// Change the background color of QtyReceived here
}
});
}
With Ajax Binding
Using jquery, you can select and change the background color of a cell of the grid by using the uid (unique id) of the row and selecting the nth-child of that row.
function LineItems_Databound() {
var grid = $("#LineItems").data("kendoGrid");
var data = grid.dataSource.data();
$.each(data, function (i, row) {
var qtyRx = row.QtyReceived;
var qtySx = row.QtyShipped;
if (qtyRx < qtySx) {
//Change the background color of QtyReceived here
$('tr[data-uid="' + row.uid + '"] td:nth-child(5)').css("background-color", "red");
}
});
}
Update
Alan Fisher in the comments suggested another way to solve this that he learned from the people at KendoUI. The QtyReceived column uses a ClientTemplate that passes parameters to the databound event.
#(Html.Kendo().Grid(Model)
.Name("LineItems")
.Events(e => e.DataBound("LineItems_Databound"))
.Columns(columns =>
{
columns.Bound(o => o.Ui).Title("UI").Width(20);
columns.Bound(o => o.QtyOrdered).Title("Qty Ord").Width(30);
columns.Bound(o => o.Nomenclature).Width(200);
columns.Bound(o => o.Requestor).Width(100);
columns.Bound(o => o.QtyShipped).Width(20).Title("Qty Sent");
columns.Bound(o => o.QtyReceived).Width(20).Title("Qty Rx")
.ClientTemplate("#= LineItems_Databound(QtyShipped,QtyReceived)#");
columns.Bound(o => o.ReqID).Width(50);
columns.Bound(o => o.JCN_Job).Width(50).Title("Job/JCN");
columns.Bound(o => o.ManPartID).Width(100).Title("Part#");
columns.Bound(o => o.ReceivedBy).Width(100).Title("Received By");
columns.Bound(o => o.RecAtSiteDate).Width(100).Title("Received Date")
.Format("{0:dd MMM, yy}");
})
)
<script>
function LineItems_Databound(qtySx, qtyRx) {
if (qtyRx < qtySx) {
return "<div style='background: pink'>" + qtyRx + " </div>";
}
else {
return qtyRx;
}
}
</script>
With Server Binding
If you are using server data binding and not ajax data binding, CellAction might be a better way to do this.
#(Html.Kendo().Grid(Model)
.Name("LineItems")
.CellAction(cell =>
{
if (cell.Column.Title.Equals("QtyReceived"))
{
if (cell.DataItem.QtyReceived.Value < cell.DataItem.QtyShipped.Value)
{
cell.HtmlAttributes["style"] = "background-color: red";
}
}
})
.Columns(columns =>
{
columns.Bound(o => o.Ui).Title("UI").Width(20);
columns.Bound(o => o.QtyOrdered).Title("Qty Ord").Width(30);
columns.Bound(o => o.Nomenclature).Width(200);
columns.Bound(o => o.QtyShipped).Width(20).Title("Qty Sent");
columns.Bound(o => o.QtyReceived).Width(20).Title("Qty Rx");
columns.Bound(o => o.ReqID).Width(50);
columns.Bound(o => o.JCN_Job).Width(50).Title("Job/JCN");
columns.Bound(o => o.ManPartID).Width(100).Title("Part#");
columns.Bound(o => o.Requestor).Width(100).Title("Requestor");
})
)
If you are populating the grid from the MVC view model, here's a simple way to do it. Create CSS styles:
<style>
.TrunkSummaryLightYellow {
background: LightYellow;
}
.TrunkSummaryPink {
background: Pink;
}
.TrunkSummaryLightGreen {
background: LightGreen;
}
</style>
Then use a document-ready function as follows:
$(document).ready(function () {
var grid = $("#TrunkSummaryGrid").data("kendoGrid");
var gridData = grid.dataSource.view();
for (var i = 0; i < gridData.length; i++) {
if (gridData[i].SomeProperty == SomeValue) {
grid.table.find("tr[data-uid='" + gridData[i].uid + "']").addClass("TrunkSummaryLightYellow");
}
}
})
Thanks to Dave Glick (link) for this suggestion.
I have worked out that the background colour of an individual cell can be set as follows:
grid.table.find("tr[data-uid='" + gridData[i].uid + "']")[0].cells[4].style.backgroundColor = 'pink';
I have a very similar problem to the post located here:
Telerik grid with checkbox - Checkbox not showing up when the grid initially paints
Basically, I have a telerik MVC3 razor grid with a ClientTemplate column that consists of a checkbox. When the page loads initially, the checkbox is not there - instead it is what I want the value of the checkbox to be. However, when ajax is fired (such as grouping columns together), the checkbox shows with no problem.
I don't really understand the solution to the thread I pasted above....so maybe that is the answer and I just don't know how to call the grid's constructor. Here's the code I have:
research.cshtml
#(Html.Telerik().Grid(Model)
.Name("Grid")
.DataKeys(keys => keys.Add(m => m.MessageInformation.MessageGUID))
.DataBinding(databinding => databinding.Ajax()
.Select("_ViewMessages", "Results")
.Update("_UpdateSelectedMessage", "Results"))
.Columns(columns =>
{
columns.Bound(o => o.MessageInformation.MessageGUID)
.ClientTemplate("<input type='checkbox' id='chkMessage' name='checkedRecords' value='<#= MessageInformation.MessageGUID #>' />")
.Title("Check")
.Width(50)
.HtmlAttributes(new { style = "text-align:center" });
columns.Bound(o => o.MessageInformation.MessageGUID).Title("ID");
columns.Bound(o => o.MessageInformation.MessageReceivedDateTime).Title("Received Date").Format("{0:d}");
columns.Bound(o => o.MessageInformation.MessageReceivedDateTime).Title("Received Time").Format("{0:t}");
columns.Bound(o => o.MessageInformation.MedVAMessageTypeString).Title("Message Type");
columns.Bound(o => o.MessageStatus).Title("Status");
columns.Command(commands => commands.Edit().ButtonType(GridButtonType.Text)).Title("Edit");
})
.Editable(editing => editing.Mode(GridEditMode.PopUp))
.Scrollable(scrolling => scrolling.Enabled(true))
.Sortable(sorting => sorting.Enabled(true))
.Pageable(paging => paging.Enabled(true))
.Filterable(filtering => filtering.Enabled(true))
.Groupable(grouping => grouping.Enabled(true))
.Footer(true)
)
ResultsController.cs
[GridAction]
public ActionResult Research()
{
ViewBag.Message = "Research";
return View(DataAccess.Get_Messages());
}
[GridAction]
public ActionResult _ViewMessages()
{
ViewBag.Message = "Research";
return View(new GridModel(DataAccess.Get_Messages()));
}
You are initially binding to server data so you will need a server template as well as a client template:
#(Html.Telerik().Grid(Model)
.Name("Grid")
.DataKeys(keys => keys.Add(m => m.MessageInformation.MessageGUID))
.DataBinding(databinding => databinding.Ajax()
.Select("_ViewMessages", "Results")
.Update("_UpdateSelectedMessage", "Results"))
.Columns(columns =>
{
columns.Bound(o => o.MessageInformation.MessageGUID)
.Template(mi => {
%>
<input type='checkbox' id='chkMessage' name='checkedRecords' value='<%= mi.MessageGUID %>' />
%>
})
.ClientTemplate("<input type='checkbox' id='chkMessage' name='checkedRecords' value='<#= MessageInformation.MessageGUID #>' />")
.Title("Check")
.Width(50)
.HtmlAttributes(new { style = "text-align:center" });
columns.Bound(o => o.MessageInformation.MessageGUID).Title("ID");
columns.Bound(o => o.MessageInformation.MessageReceivedDateTime).Title("Received Date").Format("{0:d}");
columns.Bound(o => o.MessageInformation.MessageReceivedDateTime).Title("Received Time").Format("{0:t}");
columns.Bound(o => o.MessageInformation.MedVAMessageTypeString).Title("Message Type");
columns.Bound(o => o.MessageStatus).Title("Status");
columns.Command(commands => commands.Edit().ButtonType(GridButtonType.Text)).Title("Edit");
})
.Editable(editing => editing.Mode(GridEditMode.PopUp))
.Scrollable(scrolling => scrolling.Enabled(true))
.Sortable(sorting => sorting.Enabled(true))
.Pageable(paging => paging.Enabled(true))
.Filterable(filtering => filtering.Enabled(true))
.Groupable(grouping => grouping.Enabled(true))
.Footer(true)
)
Another snippet for Razor syntax: CheckBox can editable after click edit.
.Template(
#<text>
<input name="chkStatus" type="checkbox" #if(item.Status) { #:checked="checked" } disabled />
</text>
)
.ClientTemplate("<input type='checkbox' name='chkStatus' value='<#= Status #>' <#=Status?'checked':''#> disabled />");
#McGarnagle's syntax doesn't work for me. Here's mine that works:
.Template(#<text><input name="chkStatus" type="checkbox" #(item.Status ? "checked=\"checked\"" : "") disabled /></text>)
.ClientTemplate("<input type='checkbox' name='chkStatus' value='<#= Status #>' <#=Status?'checked':''#> disabled />")