i have column named type and its an enum
public enum CalcEnum
{
Created = 0,
Calculated = 1,
Imported = 2,
Edited = 3
}
I want to display a button based on the value of this field. Say if the value is created then i want to show a button in the grid. I have tried like this but its not working
#(Html.Kendo().Grid(Model.values)
.Name("Grid1")
.Columns(columns =>
{
columns.Bound(p => p.UserComments).Title("Comments");
columns.Bound(p => p.Type).Title("Type");
columns.Template(#<text></text>)
.ClientTemplate("#if(Type == '0') {#"
+ "View"
+ "#} else {#"
+ "Open"
+ "#} #").Title(string.Empty);
}
Any clues where im doing wrong ? Thanks
Here is a link to the templates overview.
Here is a similar question where an external function is called to do all the processing.
Here is a similar question to yours.
I am also not too sure why you have quotes on your 0.
I have performed the action client side and if you do this I believe you need to put 'data.' before your Model's property.
`#if(data.Type == 0)`
Try that OR check the links below to see the links to questions similar to yours.
I can't set up a project to test this at the moment but I can give you a quick look at how I have used it with a boolean (CanCanel).
columns.Template(#<text></text>).ClientTemplate(
"<button type='button' class='myRequestsViewRequest grid-btn grid-btn-primary' style='margin: 3px 15px 3px 0;'" +
"data-requestid='#= RequestId #' data-requesterdisplayname='#= RequesterDisplayName #'>View</button>" +
" #if (!(data.CanCancel)) " +
"{# <span class='grid-btn grid-btn-disabled'>Cancel</span> #} " +
"else {# <a class='grid-btn grid-btn-primary' href='" +
Url.Action("CancelRequest", "Home") +
"?requestId=#= RequestId #' " +
" onclick='return MyRequest_ConfirmCancel()'>Cancel</a> #}#")
.Title("Actions")
.Width(200);
})
What if you change the column value 'Type' in the condition as below
if(#=Type# == '0')
Related
I am using kendo grid + mvc 5. in that,
columns.Template(e => { }).ClientTemplate..
I just want to use "Contains".
if "SitePlanMediaUrl.Contains(\"" + ViewBag.option + "\"))" value then ClientTemplate item show, otherwise not.
note - I have a value in "ViewBag.option"
-code line -
columns.Template(e => { }).ClientTemplate("<a href='" + Url.Action("download", "common", new { area = "" }) + "?url=#=SitePlanMediaUrl#&fileName=#=MediaTitle#' title='Download Media' class='icon download' target='_blank'></a> #if(SitePlanMediaUrl.Contains(\"" + ViewBag.option + "\")) {# <a href='javascript:void(0)' class='icon upload' onclick='SitePlanUploadMedia(#=SitePlanMediaId#,\"#=MediaTitle#\", \"#=MediaTitle#\")' title='Upload Media'></a> #}# <a href='javascript: void(0)' class='icon delete' onclick='deleteRowConfirm(\"sitePlanMediagrid\",this)' title='Delete Media'></a>").Title("Action").Width(50);
if I get in between SitePlanMediaUrl then tag will show.
thanks.
I suspect this is not translated to C#, but to javascript, due to this being a ClientTemplate in the kendo framework.
Could you try with if(SitePlanMediaUrl.indexOf(\"" + ViewBag.option + "\") > -1)
.
The indexOf() method returns the index within the calling String
object of the first occurrence of the specified value starting the search at fromIndex. Returns -1 if the value is not found.
Im using Stacked area chart of nvd3-angularjs
This is my html
<div ng-controller="Eth2GraphController">
<nvd3-stacked-area-chart
data="GraphData"
noData="No Data For You!"
id="eth2Graphs"
showXAxis="true"
showYAxis="true"
showLegend="true"
interactive="true"
tooltips="true"
objectEquality="true"
margin="{left:100,right:100}"
useInteractiveGuideline="true"
tooltipcontent="toolTipContentFunction()"
xAxisTickFormat="xAxisTickFormatFunction()"
yAxisTickFormat="yAxisTickFormatFunction()"
color="colorFunction()"
legendColor="colorFunction()"
>
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Now, I have a function that should format the tooltipcontent, but its not working. Maybe it has something to do with the useInteractiveGuideline attribute. I used the same tooltipcontent function to edit the tooltip of my other charts, its working on those charts the only difference is that those chart dont use useInteractiveGuideline.
$scope.toolTipContentFunction = function() {
return function(key, x, y, e, graph) {
return '<h3>' + x + '</h3>' +
'<p>' + key + ' ' + y + '</p>';
}
};
I want x to be in the center, and other formatting for the data. How would I do that? Am I using the correct attribute that would format the tooltip?
Change tooltipcontent="toolTipContentFunction()" to:
tooltipContent="toolTipContentFunction"
useInteractiveGuideline must be set to false for the tooltipContent to work. I believe it is because useInteractiveGuideline uses it's own popup.
I use Kendo grid MVC and In The First Column I Use This Code:
columns.Template(s => s.IsActive).Title("").ClientTemplate(
" <input type='checkbox' \\#= IsActive ? checked='checked' : '' \\# /input>"
).Width(50);
and it works correctly, but when i wanted to use this code in span it's not working i wanted to show text insted of boolean my wrong code is :
columns.Template(s => s.IsActive).Title(T("My Title").ToString()).ClientTemplate(
" <span> \\#= IsActive?" + T("Required") + " : " + T("Optional") + " \\#</span>"
).Width(150);
so what's wrong with second one?
From looking at it the code is not being picked up because it it a mix of html and javascript. In the client templating then this should would in Kendo:
#if(data.IsActive === true){#<span>Required</span>#}else{#<span>Optional</span>#}#
I find this messy so I personally like to pull this out of the template and use a function as it means I can edit it easier and don't get frustrated. so something like this:
.ClientTemplate("#=TextFormatter(data.IsActive)#")
Then in the javascript would be
function TextFormatter(value)
{
var returnString = '';
if(value === true)
{
returnString = '<span>Required</span>';
}
else
{
returnString = '<span>Optional</span>';
}
return returnString;
}
For further reading check this link out: How do I have conditional logic in a column client template
Is there a more efficient way for displaying a tool tip once a cell is hovered? Using the structure attribute to format the datagrid, is there a way to use formatter to display a dijit toolTip rather than using the html title attribute.
Here is the column in which the toolTip is displaying.
var subscriberGridLayout = [
{
name: " ",
field: "ExpirationDate",
formatter: function(value){
if(value){
expDate = formatDateIE(value);
return toolTip();
}
else
return " ";
},
styles: "text-align: center;",
width: "30px"
},
Here is the function that displays a tooltip icon through the image tag but instead of a dijit toolTip it simply uses html's title to display a popup.
function toolTip(){
src = "'/Subscriber/resources/images/icons/icon_error.gif'/>";
if(dojo.date.difference(today, expDate) <= 0 ){
message = "Credential expired.";
return "<img title='"+ message + "' src=" + src + "";
} else if(dojo.date.difference(today, expDate) <= 60) {
message = "This Subscriber will expire in " + dojo.date.difference(today, expDate) + " days."
+ "
To prevent an interruption in the Subscriber’s access, please sumbit a request to " +
"renew the Subscriber within 30 days of the expiration date.";
return "<img title='"+ message + "' src=" + src + "";
} else {
return " ";
}
}
I would do something like:
new Tooltip({
connectId: grid.domNode,
selector: "td",
getContent: function(matchedNode){
return matchedNode.innerText
}
});
With grid.domNode you can get the generated DOM of your widget. A grid generates a table-structure, so you can get the cells by using the selector and getContent properties.
I must say it's not really the correct way to do it because now you're playing with the internal structure of the Dojo widget. If they once decide not to use a table as DOM structure your code won't work.
But I don't think there is a better way to achieve this, in the end you will always have to translate the Dojo cell to a DOM node (because tooltips are DOM based). You can of course connect a tooltip to each cell, but I tried that before and it was a little buggy (sometimes the tooltip didn't pop up).
I also made a JSFiddle to show you a working example.
Of course I know that SELECT form elements are hard to style and/or modify beyond the basics.
Just out of curiosity, does anyone know of a one-off bootstrap (the one from twitter) solution that would allow me to affect the size of the SELECT and perhaps even apply a gradient that looks more like a bootstrap button (than the scratchy surface they have now).
I don't mind noodling around with the CSS myself, but I thought I'd ask around before re-inventing the wheel.
Any pointers, links or suggestions would be greatly appreciated.
You can use the jQuery plugin bootstrap-select:
https://developer.snapappointments.com/bootstrap-select/
It will turn your select into a bootstrap button dropdown
A bit late but maybe this can help http://blog.iamjamoy.com/docs/select.html
or this http://ivaynberg.github.com/select2/
The first one doesn´t work on IE, if you can fix it please provide.
jQuery(function($){
$('select').each(function(i, e){
if (!($(e).data('convert') == 'no')) {
//$(e).hide().wrap('<div class="btn-group" id="select-group-' + i + '" />');
$(e).after('<div class="btn-group" id="select-group-' + i + '" />');
var select = $('#select-group-' + i);
var current = ($(e).val()) ? $(e).val(): ' ';
select.html('<input type="hidden" value="' + $(e).val() + '" name="' + $(e).attr('name') + '" id="' + $(e).attr('id') + '" class="' + $(e).attr('class') + '" /><a class="btn" href="javascript:;">' + current + '</a><a class="btn dropdown-toggle" data-toggle="dropdown" href="javascript:;"><span class="caret"></span></a><ul class="dropdown-menu"></ul>');
$(e).find('option').each(function(o,q) {
select.find('.dropdown-menu').append('<li>' + $(q).text() + '</li>');
if ($(q).attr('selected')) select.find('.dropdown-menu li:eq(' + o + ')').click();
});
select.find('.dropdown-menu a').click(function() {
select.find('input[type=hidden]').val($(this).data('value')).change();
select.find('.btn:eq(0)').text($(this).text());
});
$(e).remove();
}
});
});