Here is what I got:
columns.Bound(t => t.Id)
.Title("")
.Template(#<text></text>)
.ClientTemplate("<a class=\"k-button\" href='"
+ Url.Action("Edit", "Controller") + "/#=Id#'>Edit</a>")
.Width(110);
What I need is to pick a specific controller action depending on type of object bound. (different form for e.g. CarEdit when lets say Type==1 and PlaneEdit when Type==2)
I've done similar thing using JS recently (to produce ClientTemplate content) but would greatly appreciate solution without nasty JS.
As for now this is my best solution:
columns.Bound(t => t.Id)
.Title("")
.Template(#<text></text>)
.ClientTemplate("#= GetEditTemplate(data)#")
.Width(110);
function GetEditTemplate(data) {
var html;
if (data.Type === 1) {
html = kendo.format("<a class=\"k-button\" href='" + '#Url.Action("Edit1", "Controller")' + "/{0}" + " '>Edit</a> ",
data.Id
);
}
else {
html = kendo.format("<a class=\"k-button\" href='" + '#Url.Action("Edit2", "Controller")' + "/{0}" + " '>Edit</a> ",
data.Id
);
}
return html;
}
Related
I am trying to use a ViewBag variable inside ClientTemplate but unable to do so
#Html.Kendo().Grid(Model.MainGrid)
.Name("MainGrid")
.Columns(col =>
{
col.Bound(o => o.Record).ClientTemplate("<a target='_blank' href='" + ViewBag.URL + "/#= Record#'>#=Record#</a>").Width(150);
}
Above code doesnt create a url link but a simple text. In developer console, it gives an error
'' #<a target='_blank' href='http://something.com/docs/workspace/#= Record#'>#=Record#</a></td><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['DateCreated'] ? ' k-dirty-cell' : '' #"
However, if I hardcode value of the ViewBag variable, i.e.
#Html.Kendo().Grid(Model.MainGrid)
.Name("MyGrid")
.Columns(col =>
{
col.Bound(o => o.Record).ClientTemplate("<a target='_blank' href='" + "http://something.com/docs/workspace" + "/#= Record#'>#=Record#</a>").Width(150);
}
it render the correct url link
Is there anything wrong with the code?
I want to change the cell background color based on a value.
My solution If ound and which worked was this:
#(Html.Kendo().Grid<Web.Models.Intern.CheckADGridModel>()
.Name("ADGrid")
.Filterable()
.Sortable(s => s.SortMode(GridSortMode.MultipleColumn))
.Pageable(page => page.Enabled(true))
.Columns(col =>
{
col.Bound(x => x.ProjectID).Filterable(true).Title("ID").Width(100);
col.Bound(x => x.ProjectName).Filterable(true).Title(ResourcesLocal.Resources_Intern_CheckAD.Name).ClientTemplate(
"<a href=\"" + #Url.Content("~/Home/Index/") +
"#= ProjectID #\"" +
"><span data-toggle=\"tooltip\" data-placement=\"bottom\" title=\"" + #ResourcesLocal.Resources_Intern_CheckAD.ChooseProject + "\">" +
"#= ProjectName #" +
"</span ></a>");
col.Bound(x => x.StartDate).Filterable(false).Title(ResourcesLocal.Resources_Intern_CheckAD.Start).Width(150).Format("{0:dd.MM.yyyy HH:mm:ss}");
col.Bound(x => x.EndDate).Filterable(false).Title(ResourcesLocal.Resources_Intern_CheckAD.Ende).Width(150).Format("{0:dd.MM.yyyy HH:mm:ss}");
col.Bound(x => x.ConnectionLength).Filterable(true).Title(ResourcesLocal.Resources_Intern_CheckAD.Length).Width(70)
.ClientTemplate("#= formatADGridDauer(ConnectionLength) #");
.DataSource(ds => ds
.Ajax()
.PageSize(20)
.Sort(x => x.Add("EndDate").Descending())
.Read(read => read.Action("DataSourceADGrid", "Intern").Data("GetADGridValues"))
)
)
function formatADGridDauer(value) {
var css = "";
if (parseFloat(value) >= 1800)
css = "background-color:red; color:white;";
else if (parseFloat(value) > 600)
css = "background-color:Orange; color:white;";
html = "<div style='" + css + "'>" + value + "</div>";
html = kendo.format(html);
return html;
}
The problem is, I can only change the behaviour of the data in the cell, which means the padding of the grid-cell will be shown and it looks really ugly.
So how to do it right an change the gridcell background color instead of the data inside?
Unfortunately, telerik is not the most user-friendly set of controls when it comes to customization. Javascript (jquery in this instance) has worked for me when I had to do something similar.
Try this something like this:
$(".k-grid tr td").filter(function () { //gets the generated table cells
if ($(this).text() > 0) {
$(this).css("background-color", "red");
}
});
I am using Telerik MVC Grid control to show a data grid. The detail of my grid is calling the following Client Detail template:
<script id="client-template" type="text/x-kendo-template"> <%: Html.Kendo().Grid<ASML_Scheduler.ScheduleService.AgentViewData>()
.Name("grid_#=WorkgroupName#")
.DataSource(dataSource =>
dataSource.Ajax().Read(read => read.Action("Agents_Read", "Home", new {workgroupname= "#=WorkgroupName#", name = ViewData["LoggedInUser"] }))
)
.Columns(columns =>
{
columns.Bound(product => product.AgentName).ClientTemplate("<strong>\\#:AgentName\\#</strong>");
//columns.Bound(product => product.IsLoggedOn);
//columns.Bound(product => product.IsLoggedOn).ClientTemplate("<div class='mystyle'>\\#:IsLoggedOn\\#</div>");
columns.Bound(product => product.IsLoggedOn).ClientTemplate(
"# if (IsLoggedOn != false) { #" +
"<div class='mystyle'>\\#:IsLoggedOn\\#</div>" +
"# } else { #" +
"<div>\\#:IsLoggedOn\\#</div>" +
"# } #"
);
columns.Bound(product => product.IsScheduled);
})
.ToClientTemplate()
%>
</script>
The problem I have is with the IsLoggedOn client template as it does not recognise the IsLoggedOn != false.
Can anyone see what I havedone wrong here.
personally with this sort of thing I prefer doing this.
change this:
columns.Bound(product => product.IsLoggedOn).ClientTemplate(
"# if (IsLoggedOn != false) { #" +
"<div class='mystyle'>\\#:IsLoggedOn\\#</div>" +
"# } else { #" +
"<div>\\#:IsLoggedOn\\#</div>" +
"# } #"
);
to
columns.Bound(product => product.IsLoggedOn)
.ClientTemplate("#=StyleLogin(data.IsLoggedOn)#");
then create a javascript function
function StyleLogin(IsLoggedOn)
{
var value = '';
if (IsLoggedOn != false) {
value = '<div class="mystyle">' + IsLoggedOn + '</div>';
} else {
value = '<div>' + IsLoggedOn + '</div>';
}
return value;
}
This way you can easily debug the code and also reuse the function elsewhere if needed.
I'm using Visual Studio 2012 Internet Application that I've enabled for Kendo UI. This is a MVC4 C# and Razor View Project.
I have more then 6 models i'm eventually going to cascade with these dropdowns
I have been following The Tutorial step by step ( actually copied it and renamed in code ).
When page loads the UI looks great, but NO data is bound to the DropdownLists(/comboboxes)
I'm really only focused on the first DropDownList atm wich is
<p>
<label for="clients">Clients:</label>
#(Html.Kendo().DropDownList()
.Name("clients")
.HtmlAttributes(new { style = "width:300px" })
.OptionLabel("Select Client...")
.DataTextField("Client")
.DataValueField("ClientID")
.DataSource(source => {
source.Read(read => {
read.Action("GetCascadeClients", "ComboBox");
});
})
)
</p>
when the code reaches
.DataSource(source => {
source.Read(read => {
read.Action("GetCascadeClients", "ComboBox");
});
})
it's supposed to call this action, but does not this action is located in the controller for this view
public JsonResult GetCascadeClients()
{
var Clients = db.Clients.AsQueryable();
return Json(db.Clients.Select(c => new { ClientID = c.ClientID, Client = c.Client }), JsonRequestBehavior.AllowGet);
}
My question is what am I doing wrong, it almost has to be something stupid.... ( Yes data is in the database, yes in other controls they bind fine.)
EDIT: Thought it was a little peculiar that the 2 dropdownboxes below show text and the top one doesnt?
Breakpoints not being hit here:
Also i have this scripttag that runs, possibly could be something wrong with it Keep in mind im only looking to fill the first ( if first works the rest should fall in )
<script>
$(document).ready(function () {
var clients = $("#clients").data("kendoDropDownList"),
countys = $("#countys").data("kendoDropDownList"),
townShips = $("#townShips").data("kendoDropDownList");
$("#get").click(function () {
var clientsInfo = "\nclients: { id: " + clients.value() + ", name: " + clients.text() + " }",
countysInfo = "\ncountys: { id: " + countys.value() + ", name: " + countys.text() + " }",
townShipsInfo = "\ntownShips: { id: " + townShips.value() + ", name: " + townShips.text() + " }";
alert("Select Tract To Upload:\n" + clientsInfo + countysInfo + townShipsInfo);
});
});
</script>
#Don Thomas Boyle,I was able to copy your code and use my controller to return json data and I get the Option Label to show "Select Client...". Are you able to get the json string returned by manually calling it in the browser address bar? What is the name of your Controller? "Combobox" sounds like a suspicious controller name to me.
<p>
<label for="clients">Clients:</label>
#(Html.Kendo().DropDownList()
.Name("clients")
.HtmlAttributes(new { style = "width:300px" })
.OptionLabel("Select Client...")
.DataTextField("SiteName")
.DataValueField("ID")
.DataSource(source => {
source.Read(read => {
read.Action("GetSites", "PlayGround");
});
})
)
Here is my controller:
namespace MyWebApp.Controllers
{
public class PlayGroundController : Controller
{
readonly MyEntities context = new MyEntities();
public JsonResult GetSites()
{
var sites = context.vSites.Select(s => new SitesVM
{
ID = s.ID,
SiteName = s.SiteName
}).OrderBy(s => s.SiteName);
return Json(sites, JsonRequestBehavior.AllowGet);
}
}
this line :
.DataTextField("Client")
should be:
.DataTextField("ClientName")
As a new to Ruby on Rails, I have stuck to render the nested_form_for fields with a filter checking. The nested form model already has some data in it which is said to be default data. Now on editing the model I need to set read-only feature and don't want to set any remove link on those default data. There is a field in the model 'is_default' which actually said that record is default or not. So how can I filter only those data? Please can any one pull me out from this.
Thanks in advance
Share how I have done this...
In my partial render file I use edit.js.erb which is actually required as I need to load all the thing using AJAX call. so in this part I have added extra JQuery code to set the readonly value and hide the remove anchor as well. Below is my code...
if('<%= #apps_event.is_std %>' == 'y' && '<%= #action %>' != 'create') {
$("#eventFormContainer").html("<%= escape_javascript(render(:partial => 'form_standard'))%>");
var stdAttrib = <%= #apps_event.apps_events_attributes.size %>
var stdAttribStr = 'apps_event_apps_events_attributes_attributes_';
for (var i=0; i < stdAttrib; i++) {
if($('#' + stdAttribStr + i + '_is_std').attr('value') === 'y') {
$('#' + stdAttribStr + i + '_name').attr('readonly', 'readonly');
var selectValue = $('#' + stdAttribStr + i + '_attribute_type').attr('value');
$('#' + stdAttribStr + i + '_attribute_type option').each(function() {
if ( $(this).val() != selectValue ) {
$(this).remove();
}
});
$('#' + stdAttribStr + i + '_is_std').parent().children('a.remove_nested_fields').css('display', 'none');
}
}
}
else {
$('#eventFormContainer').html("<%= escape_javascript(render(:partial => 'form_custom'))%>");
}
have fun... ;)