The example given for using ClientRowTemplate in the Kendo UI Grid uses a nasty HTML string
.ClientRowTemplate(
"<tr><td colspan=\"6\">" +
"<div class=\"customer-details\">" +
"<img src=\"" + #Url.Content("~/Content/web/Customers/") + "#=CustomerID#.jpg\"" +
"alt=\"#=ContactName#\" />" +
"<h3 class=\"k-widget\">#=ContactName#</h3>" +
"<dl>" +
"<dt>Name:</dt><dd>#=ContactName#</dd>" +
"<dt>Company:</dt><dd>#=CompanyName#</dd>" +
"<dt>Country:</dt><dd>#=Country#</dd>" +
"</dl>" +
"<dl >" +
"<dt>Address:</dt><dd>#=Address#</dd>" +
"<dt>Phone:</dt><dd>#=Phone#</dd>" +
"</dl>" +
"</div>" +
"</td></tr>"
)
I am currently using a partial view .ClientRowTemplate(Html.Partial("_ClientRowTemplate").ToHtmlString()), but it would be nice to have it in the same view file.
Is there a built-in way to use something a bit nicer like a <script id="rowTemplate" type="text/x-kendo-tmpl"> block? I would still like to use the Kendo MVC helpers and not JavaScript.
Check out Haacks blog on templated razor delegates. http://haacked.com/archive/2011/02/27/templated-razor-delegates.aspx/
Basically you can define a chunk of razor that will be rendered as HTML
Define you razor delegate
#{
Func<dynamic, object> tableRow = #<tr></tr>;
}
Then do this
.ClientRowTemplate( #tableRow(null).ToString() )
Related
my code
html += '<select onchange="status_update(this.options[this.selectedIndex].value,' + data[count].petition_list_id + ')"">สถานะอนุมัติไม่อนุมัติ';
not working
I am trying to dynamically set the content of a cell using the KendoGrid Content Template and inline Razor but I am getting all sorts of errors.
"<table><tr>" +
"<td style='color:yellow; width:200px;height:13px;padding-top:0px; margin-top:0px;text-align:center;' class='audiogrid'>" +
#{
#if ((int)TempData["MediaTypeId"] == 1) {
#"<audio id='a1' src='#: MediaLocation #' controls='controls' preload='auto' autobuffer><embed height='26' autostart = 'false' type = 'audio/mpeg' width='290' src='#: MediaLocation #'></audio>" +
}
else{
#" #: Description # " +
}
}
"</td>" +
"</tr></table>"
The above code throws an error: CS1646: Keyword, identifier, or string expected after verbatim specifier: # at the first instance of the # sign.
I don't understand why or what this error means. According to the rules of using Razor in MVC4, my syntax should work. Did a little research to be sure and found the syntax to be accurate here
But I tried a variation that included a string after the # as the error suggested and that I figured should work as well:
"<table><tr>" +
"<td style='color:yellow; width:200px;height:13px;padding-top:0px; margin-top:0px;text-align:center;' class='audiogrid'>" +
#if ((int)TempData["MediaTypeId"] == 1) {
#"<audio id='a1' src='#: MediaLocation #' controls='controls' preload='auto' autobuffer><embed height='26' autostart = 'false' type = 'audio/mpeg' width='290' src='#: MediaLocation #'></audio>" +
}
else{
#" #: Description # " +
}
"</td>" +
"</tr></table>"
This time I get Compiler Error Message: CS1026: ) expected at the same line that the # first appears in my code.
I've also tried some other variations but none of them seem to work.
What am I doing wrong or missing here? :-(
Basically the control in the cell should change based on the media type.
Razor is not some sort of string concatenating syntax. You specify the html tags and C# code, and the Razor engine writes them to the client.
Inside an #{ block (or any other code block), you can use C# statements. There's no need for an extra #.
Inside the #if (or any other code block), you can use html tags. No need to prepend them with an #.
Inside the else block, use #: to output html without an html tag.
<table><tr>
<td style='color:yellow; width:200px;height:13px;padding-top:0px; margin-top:0px;text-align:center;' class='audiogrid'>
#{
if ((int)TempData["MediaTypeId"] == 1) {
<audio id='a1' src='#: MediaLocation #' controls='controls' preload='auto' autobuffer><embed height='26' autostart = 'false' type = 'audio/mpeg' width='290' src='#: MediaLocation #'></audio>
}
else{
<text> #: Description # </text>
}
}
I'm using Dojo 1.9.1.
I'm using dojox.charting to draw some charts.
I am using a labelFunc to produce a date/time label for my X-axis. This is working fine in all browsers.
But I want to add a line break to my label so that the date sits above the time, e.g.:
10/01/2014
06:00
I can add a html break tag to the string returned and this works in Chrome and Firefox but not IE9 (to be expected).
Has anybody solved how to do this one that works across all browsers including IE9 (or specifically ones that don't "do" html labels).
Cheers
Ian
My label func:
_labelFull: function (index) {
// Returns a label in the form "dd/mm/yyyy hh:mm" for tooltip labelling
var dt,
d;
dt = new Date(Date.parse(myglobalStartDateTime));
dt.setHours(dt.getHours() + Number(index));
// Full date/time
d = ("0" + dt.getDate()).slice(-2) + '/' +
("0" + (dt.getMonth() + 1)).slice(-2) + '/' +
dt.getFullYear() + ' ' +
("0" + dt.getHours()).slice(-2) + ':' +
("0" + dt.getMinutes()).slice(-2) + 'UTC';
return d;
}
I am trying to create a converter to concatenate 2 properties. I would like to style one of them to be italic.
fooConverter: WinJS.Binding.converter(function (model) {
return model.foo + ' ' + '<i>' + model.foo2 + '</i>';
}
and my markup is
<h2 data-win-bind="innerText: model.name"></h2>
However, the output of this is
Foo <i>Foo2</i>
instead of making Foo2 italic. Is it possible to do this with converters?
Use <h2 data-win-bind="innerHTML: model.name"></h2> instead.
I'm trying to use MediaElement.js on a site and everything works great in every browser but IE, most specifically IE9 (I'm not too concerned with supporting below IE9 at the moment). I'm populating the ME dynamically which I've read can cause problems in IE specifically, but I'm just not sure if there is a workaround. The reason I'm doing it this way is because this is a portfolio site where all project data gets loaded through a getJSON call and once loaded all projects get populated with their appropriate data and created on the fly. There are several video projects. I've dumbed the code down to an example outside of my project which essentially goes through this same behavior. If I just write the HTML out and control in JS it works but when I create the HTML through JS and then try to play I get the error log (in the creation of ME player in the code). Here is the code:
$(function() {
var details = {
width: 640,
height: 480,
src: 'work/television/1'
},
$body = $('body'),
$vid = $('<video width="' + details.width + '" height="' + details.height + '" preload="none" id="vidPlayer1"></video>'),
$mp4 = $('<source src="' + details.src + '.mp4" type="video/mp4" title="mp4">'),
$webm = $('<source src="' + details.src + '.webm" type="video/webm" title="webm">'),
$ogg = $('<source src="' + details.src + '.ogv" type="video/ogg" title="ogg">'),
$flash = $('<object width="' + details.width + '" height="' + details.height + '" type="application/x-shockwave-flash" data="swf/flashmediaelement.swf"><param name="movie" value="swf/flashmediaelement.swf"><param name="flashvars" value="controls=true&file=' + details.src + '.mp4"></object>'),
$error = $('<p>The available video formats are not supported by your browser. :(</p>'),
$controls = $('<div class="videoControls playBtn"></div>');
$body.append($controls);
$vid.append($mp4);
$vid.append($webm);
$vid.append($ogg);
$vid.append($flash);
$vid.insertAfter($controls);
var vidPlayer = new MediaElementPlayer('#vidPlayer1', {
features: [],
// mode: 'shim',
pluginPath: 'swf/',
success: function(mediaElement) {
console.log('success', mediaElement);
},
error: function() {
console.log('Error loading player. Please try again.');
}
});
$body.on('click', function(evt) {
vidPlayer.play();
});
});
Any help would be tremendously appreciated.
problem solved. for anyone interested, had to combine my appends into one call so $vid became:
$vid = $('<video width="' + details.width + '" height="' + details.height + '" preload="none" id="vidPlayer-' + row + '-' + slide + '"><source src="' + details.src + '.mp4" type="video/mp4" title="mp4"><source src="' + details.src + '.webm" type="video/webm" title="webm"><source src="' + details.src + '.ogv" type="video/ogg" title="ogg"><p>The available video formats are not supported by your browser. :(</p></video>')
just had to put it all in one statement and IE9 recognized it properly. The issue was by appending as I was doing the source variables never got appended and thus IE didn't know what the source of my video was.
Hope this helps someone in the future.