.Columns(columns =>
{
columns.Bound(o => o.TeamName).Title(Site.Resources.Shared.Team);
columns.Bound(o => o.PersonId).Title(Site.Resources.Shared.Person).ClientTemplate(#Site.CommonFunctions.GetPersonNameById(PersonId));
How to pass the PersonId into the C# function to get the return string.I manage to get the return string if hardcoded it like .ClientTemplate(#Site.CommonFunctions.GetPersonNameById(1));
Try below
.Columns(columns =>
{
columns.Bound(o => o.TeamName).Title(Site.Resources.Shared.Team);
columns.Bound(o => o.PersonId).Title(Site.Resources.Shared.Person).ClientTemplate(#Site.CommonFunctions.GetPersonNameById("#=PersonId#"));
OR
.Columns(columns =>
{
columns.Bound(o => o.TeamName).Title(Site.Resources.Shared.Team);
columns.Bound(o => o.PersonId).Title(Site.Resources.Shared.Person).ClientTemplate(#Site.CommonFunctions.GetPersonNameById("+ PersonId +"));
Related
I have implemented a kendo mvc grid and having only 3 records. It is showing blank white space at the bottom of the grid. I would like to show rows only for the records. How do I eliminate the white space
#(Html.Kendo().Grid<CC.GRP.MCRequest.ViewModels.ActivityViewModel>()
.Name("GridActivity")
.Columns(columns =>
{
columns.Bound(o => o.ActivityID).Hidden();
columns.Bound(o => o.ServiceID);
columns.Bound(o => o.ActivityAppliesToName);
columns.Bound(o => o.TeamName);
columns.Bound(o => o.FullName);
columns.Bound(o => o.EmployeeID);
columns.Bound(o => o.RequiredBy);
columns.Bound(o => o.CompletedDate);
columns.Bound(o => o.Status);
columns.Bound(o => o.CountryCode);
columns.Bound(o => o.CreatedDate);
columns.Bound(o => o.CreatedBy);
columns.Bound(o => o.ModifiedDate);
})
.ToolBar(toolbar => toolbar.Create().Text("Add Activity"))
.Editable(editable => editable.Mode(GridEditMode.PopUp)
.TemplateName("ActivityEdit")
.Window(w=>w.Width(600)))
.Pageable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Model(model => model.Id(p => p.ActivityID))
.Create(create => create.Action("Activity_Create", "Activity"))
.Read(read => read.Action("Activity_Read", "Activity", new { id = 5 }))
.Update(update => update.Action("Activity_Update", "Activity"))
.Destroy(update => update.Action("Activity_Delete", "Activity"))
)
)
I believe that this is related to the paging options - if you turn off paging, it will shrink to fit the number of records displayed.
Additionally, you may find this Telerik forum thread useful: Dynamic Grid Height?
I was just using Kendo UI Hierarchy Grid in my MVC3 project. The hierarchy is about 2 levels. I need to customize the 2nd level hierarchy with my own custom actionlink for adding the details.
The flow of execution is something simple. The Kendo Grid will populate with default records. If the user is selecting to view inner detail of any of the records it should show another hierarchy grid with actionlink for adding new record.
Here is my child grid code:
<script id="pordersTemplate" type="text/kendo-tmpl">
#Html.ActionLink("Create PoDetails", "Create", "PoDetails", new { id = "#=Id#" }, null)
// Here i need to get the current selected ID to use it on the create page.
#(Html.Kendo().Grid<Models>()
.Name("PoDetails_#=Id#")
.Columns(columns =>
{
columns.Bound(o => o.Copies).Width(140).ClientTemplate(Html.ActionLink("\\#=Copies\\#", "Edit", "PoDetails", new { Id = "id" }, null).ToHtmlString().Replace("id", "\\#=Id\\#"));
columns.Bound(o => o.Title).Width(150);
columns.Bound(o => o.UnitPrice).Width(200);
columns.Bound(o => o.Account).Width(200);
columns.Bound(o => o.Status).Width(200);
columns.Command(command => command.Destroy()).Width(110).Title("Action");
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("HierarchyBinding_PoDetails", "Porders", new { PoId = "#=Id#" }))
.Batch(false)
.ServerOperation(true)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Destroy("Delete", "PoDetails")
)
.Pageable()
.Sortable()
.Groupable()
.Filterable()
.ToClientTemplate()
)
Plase tell me some suggestions to add this actionlink with the grid.
Thanks,
Why don't you use a toolbar :
#(Html.Kendo().Grid<Models>()
.Name("PoDetails_#=Id#")
.Columns(columns =>
{
columns.Bound(o => o.Copies).Width(140).ClientTemplate(Html.ActionLink("\\#=Copies\\#", "Edit", "PoDetails", new { Id = "id" }, null).ToHtmlString().Replace("id", "\\#=Id\\#"));
columns.Bound(o => o.Title).Width(150);
columns.Bound(o => o.UnitPrice).Width(200);
columns.Bound(o => o.Account).Width(200);
columns.Bound(o => o.Status).Width(200);
columns.Command(command => command.Destroy()).Width(110).Title("Action");
})
.ToolBar(t => t.Create().Text("Create PoDetails")) // <-- add here the toolbar
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("HierarchyBinding_PoDetails", "Porders", new { PoId = "#=Id#" }))
// and here map the create event with your custom action
.Create(c => c.Action("Create", "PoDetails", new { id = "#=Id#" }))
.Batch(false)
.ServerOperation(true)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Destroy("Delete", "PoDetails")
)
.Pageable()
.Sortable()
.Groupable()
.Filterable()
.ToClientTemplate()
)
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)
%>
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 />")