I'm trying to display multiple fields in a single cell in an ASP.NET MVC Kendo Razor grid
I've tried both
columns.Template(#<text>#item.Field1 #item.Field2</text>).Title("Test");
and
columns.Bound(c => new {x = c.Field1, y = c.Field2}).Template(#<text><strong>#item.Field1 #item.Field2</strong></text>).Title("Test");
Does anyone have any expereience of how this can be done?
#(Html.Kendo().Grid(modelData[i])
.Name($"grid{i}")
.Columns(columns =>
{
columns.Bound(c => c.Field1).Title("Column1");
//These don't work!
columns.Template(#<text>#item.Field1 #item.Field2</text>).Title("Test");
columns.Bound(c => new {x = c.Field1, y = c.Field2}).Template(#<text><strong>#item.Field1 #item.Field2</strong></text>).Title("Test");
})
.Sortable(sortable =>
{
sortable.SortMode(GridSortMode.MultipleColumn);
})
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false)
)
What about trying to append the two strings together within a ClientTemplate?
.Columns(columns =>
{
columns.Bound(c => c.Field1).Title("Column1");
columns.Bound(product => c.Field2).ClientTemplate("<strong>#: Field1 #</strong>#: Field2 #");
})
Note: The Bound field specified will be used for sorting and filtering.
If you just want to show the field value You can use the ClientTemplate with following syntax:
columns.ClientTemplate("<span>#=Field1 #</span><span>#=Field2 #</span>").Title("Test");
Related
i created a simple web app in .net MVC that contains a simple input textbox and a grid (showing some DB data).
#(Html.Kendo().Grid<Z.ViewModels.ZViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Number);
columns.Bound(c => c.AddedDate);
columns.Bound(c => c.ProcessingMessageText);
columns.Bound(c => c.ProcessedDate).
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Read", "Home"))
.PageSize(20)
)
)
Now i need to add another feature to this page ... if there is no value (" ") in ProcessedDate display a Button with som custom functionality (call an action from controller with parameter from Number column), else display the value.
Is this possible ?
I tried something like thisClientTemplate("# if (ProcessingMessageText =='') {# <button>do stuff</button> #} else if (ProcessingMessageText !='') {# ProcessedDate <#}# ");
}).Events(e => e.DataBound("onDataBound")) but it didnt worked.
I have a function to change the rows color ... but i dont know how to access the column values...
function onDataBound(e) {
var grid = this;
var currentRecords = grid.dataSource.view();
for (var i = 0; i < currentRecords.length; i++) {
//currentRecords[i] is the current dataItem
if (currentRecords[i].ProcessingMessageText == "Finished") {
grid.tbody.find("tr[data-uid='" + currentRecords[i].uid + "']").addClass("rowSucess");
}
if (currentRecords[i].ProcessingMessageText == "Sent") {
var row= grid.tbody.find("tr[data-uid='" + currentRecords[i].uid + "']").addClass("rowSent");
}
else if (currentRecords[i].ProcessingMessageText == "Error") {
grid.tbody.find("tr[data-uid='" + currentRecords[i].uid + "']").addClass("rowError");
}
}
}
Thanks for any help
Using a template column that calls your MVC action and passes a parameter(number) is fairly straight forward. This example creates a bootstrap button to call my controller and pass it the parameter named 'number' using kendo hash tag syntax. Carefull with the single vs double quotes.:
columns.Template(t => { }).Title(string.Empty).Width(40)
.ClientTemplate(#"<a href='" + Url.Action("MyAction","MyController") + "?number=#= Number#' class='btn btn-info btn-xs' title='Modify this item'>Edit</a>");
You would need to add your if statement to show the date if the field is not empty, otherwise show the button.
Currently I am having this code for displaying a KendoUI grid:
#(Html.Kendo().Grid<CleverFit.Models.MyHistorie>()
.Name("grid")
.DataSource(dataSource => dataSource // Configure the grid data source
.Ajax() // Specify that ajax binding is used
.Read(read => read.Action("Products_Read", "Action")) // Set the action method which will return the data in JSON format
)
.Columns(columns =>
{
columns.Bound(product => product.Datum).Format("{0:dd.MM.yyyy}");
columns.Bound(product => product.Aktion);
columns.Bound(product => product.Ergebnis);
columns.Bound(product => product.Wiedervorlage).Format("{0:dd.MM.yyyy H:mm}");
columns.Bound(product => product.Bemerkung);
columns.Bound(product => product.Erledigt);
})
.Pageable() // Enable paging
.Sortable() // Enable sorting
)
I tried already this:
columns.Bound(product => product.Erledigt).ClientTemplate(
"<input type='checkbox' value='#= ProductID #' " +
"# if (Enabled) { #" +
"checked='checked'" +
"# } #" +
"/>"
);
But if I add this, there is no data displayed in the grid...
The values of the last column which is product.Erledigt are displayed as true or false. Is it possible to display them as checkboxes?
I am using Telerik KendoUI and loading the content of the template via AJAX.
You can check the following FAQ page:
http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#how-to-display-checkboxes-in-ajax-bound-grids
In addition, you can make the checkbox readonly or disabled to prevent the user from editing it and expect the changes to be persisted.
Update
The code that you have tried contains two data field values, which obviously do not exist in your Grid: ProductID and Enabled. Most probably you are getting a JavaScript error in the browser console. Replace Enabled with Erledigt and remove value='#= ProductID #' if you don't need such a thing.
I am using kendoUI Detail view template, as shown in the image
When i click on on each row it opens a tabstrip and displays all the data stored in the ViewData for e.g
The main grid Code is shown Below,
#(Html.Kendo().Grid<EnvironmentPOCO>()
.Name("Grid")
.Columns(columns =>
{
//columns.Bound(d => d.EnvironmentID).Visible(false);
columns.Bound(d => d.EnvironmentName).Width(200).Title("Environment Name");
columns.ForeignKey(d => d.EnvironmentTypeID, (List<EnvironmentTypePOCO>)ViewData["EnvironmentType"], "EnvironmentTypeID", "EnvironmentTypeCode").Width(150).Title("Environment Code").EditorTemplateName("_EnvironmentCodeDropDown");
columns.ForeignKey(d => d.ServerID, (List<ServerPOCO>)ViewData["MyServers"], "ServerID", "ServerDetailsProperty").Width(300).Title("Server Details").EditorTemplateName("_ServerDropDown");
columns.ForeignKey(d => d.ProjectID, (List<SynergyProjectPOCO>)ViewData["MySynergyProjects"], "ProjectID", "ProjectDetailsProperty").Width(400).Title("Project Details").EditorTemplateName("_ProjectNameDropDown");
columns.Command(d =>
{
d.Edit();
d.Destroy();
}).Width(200).Title("Action");
}
)
.ToolBar(tools => tools.Create())
.Sortable()
.Pageable()
.Filterable()
.Navigatable()
.Sortable(sortable => sortable.AllowUnsort(false))
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
.Events(events => events.DataBound("dataBound"))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(m => m.EnvironmentID);
})
.Read(read => read.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Get))
.Create(create => create.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Post))
.Update(update => update.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Put))
.Destroy(destroy => destroy.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Delete))
)
)
I have a viewdata which have all the details i want to show in the tabstrip, but what i want is it should only display the data only related to the rows selected ServerID....there should be a if check in for loop for e.g if(//above grid ServerID==viewdata ServerID display that row of view data).But i dont know how to access the above grid value in the tabstrip and how to use if in cshtml razor engine. See the if check which is not working in Tabstrip code is shown below
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().TabStrip()
.Name("Logins")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Contact Information").Content(#<div>
<ul>
#for (var i = 0; i < viewDataServer.Count; i++)
{ //How to get the Top Grid ServerID value here in **if**
#if("#=ServerID"==viewDataServer[i].ServerID.ToString())//#=ServerID should be the selected main grid serveridvalue
{
<li><label>LoginID:</label>#viewDataServer[i].LoginID.ToString()</li>
<li><label>ServerID:</label>#viewDataServer[i].ServerID.ToString()</li>
<li><label>UserID:</label>#viewDataServer[i].UserID.ToString()</li>
<li><label>Password:</label>#viewDataServer[i].passwd.ToString()</li>
}
}
</ul>
</div>);
})
.ToClientTemplate())
</script>
In case any one else have this issue, here is the solution.
The detail template of the Grid is a client template, which means that all content customizations depending on the master row must be managed from the client. Currently the TabStrip uses server-side logic that relies on a parameter (ServerID), which is available only on the client, that's why the server logic does not work as expected.
You need to populate the TabStrip via an Ajax request, which will pass the ServerID
items.Add().Text("Contact Information")
.LoadContentFrom(Url.Content("~/controller/action/?ServerID=#=ServerID#"));
http://demos.telerik.com/aspnet-mvc/tabstrip/ajax
For more advanced customization that require manual coding, you can use the Grid's detailInit event, as shown here:
http://demos.telerik.com/kendo-ui/grid/detailtemplate
Strange thing.
My Grid seems and work correct, only untypical thing is that input during editing has:
class="text-box single-line"
instead of
class="k-textbox k-input"
Also in case when grid is completly same like in demo.
I dont know how it can happens. Copy of whole view - without some js :
#model IEnumerable<TranslationModel>
#{
ViewBag.Title = "Translations";
Layout = "~/Views/Shared/_PrivateLayout.cshtml";
Html.EnableClientValidation();
}
<h2>Translations</h2>
#(Html.Kendo().Grid<TranslationModel>(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.Shortcut).Width(150);
columns.Bound(e => e.LanguageName).Width(100);
columns.Bound(e => e.Content);
columns.Command(command => { command.Custom("ExtraPopUpEdit").Click("ExtraPopUpEdit").Text("..."); }).Width(100);
})
.ToolBar(toolbar => {
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable((p => p.PageSizes(new[] { 5 , 10, 20, 50, 100 })))
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(true)
.PageSize(10)
.Events(events => events.Error("error_handler"))
.Aggregates(a =>
{
a.Add(e => e.Content.Equals(string.Empty)).Count();
}
)
.Model(model =>
{
model.Id(e => e.Id);
model.Field(e => e.Shortcut).Editable(false);
model.Field(e => e.LanguageName).Editable(false);
})
.Group(g => g.Add(e => e.Shortcut))
.Read(read => read.Action("Translations_Read", "Admin"))
.Update(update => update.Action("Translations_Update", "Admin"))
)
)
Those classes are rendered by ASP.NET MVC when Html.EditorFor is used. If you want to remove them you have to use editor templates.
I assume you have already figured this out on your own, but for future reference for anyone else, like me, who has this problem. The solution I found is - along the lines of what Atanas said - to just copy the EditorTemplates folder from Kendo's distribution into your project. They have templates for 12 different types (in both ascx and cshtml).
The directory I copied is within the Kendo download, in \wrappers\aspnetmvc\Examples\VS2013\Kendo.Mvc.Examples\Views\Shared\EditorTemplates. Copy that into your ~/Views/Shared, delete either the *.ascx or *.cshtml files depending on your needs, and you're good to go!
I have a view with telerik grid.
Ihave a controler code which I am passing the data to the view
public ActionResult GridList(int id)
{
_genrepo.GetCategoriesForControlPlanTemplateByControlPlanID(CurrentHealthPlanId,id);
return PartialView(_viewModel);
}
Hunter: here is my grid
<%= Html.Telerik().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(100);
columns.Bound(o => o.ContactName).Width(200);
columns.Bound(o => o.ShipAddress);
columns.Bound(o => o.OrderDate).Format("{0:MM/dd/yyyy}").Width(120);
})
.DataBinding(dataBinding =>
{
dataBinding.Server().Select("FirstLook", "Grid", new { ajax =
ViewData["ajax"] });
dataBinding.Ajax().Select("_FirstLook",
"Grid").Enabled((bool)ViewData["ajax"]);
})
.Scrollable(scrolling => scrolling.Enabled((bool)ViewData["scrolling"]))
.Sortable(sorting => sorting.Enabled((bool)ViewData["sorting"]))
.Pageable(paging => paging.Enabled((bool)ViewData["paging"]))
.Filterable(filtering => filtering.Enabled((bool)ViewData["filtering"]))
.Groupable(grouping => grouping.Enabled((bool)ViewData["grouping"]))
.Footer((bool)ViewData["showFooter"])
%>
I am able to display the data perfectly in to the grdi with pagging..
but problem is when I hit the second page.. the whole grid showing me in a static page. I am not able to see the grid.. I hope its a partial view problem.. I am not able to implement pagging sorting and filtering on partial view page?
can any body help me out how to avoid this situation to work on partial views?
thanks in advance
There's an example illustrating how to implement paging with the Telerik Grid component for ASP.NET MVC.