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.
Related
I am using bootstrap-treeview 1.2.0 (from Jon Miles).
My goal is to add custom data-attributes to my list items' markup, e.g.
<li class="list-group-item node-tree" data-id="100" data-type="user" ...>
I tried to follow these instructions see here and here is part of my JSON:
[{"text":"Root","icon":null,"data-id":1,"data-type":"branch","nodes":[{"text":"Steve","icon":null,"data-id":17, "data-type":"user","nodes":...
To me the JSON looks good. But none of my data-attributes gets rendered in the markup.
Any ideas?
Sorry, I see it's too late. I searched about this and couldn't find anything. But you can
change bootstrap-treeview.js file a bit. There is some attribute set code in buildTree function. It's looking like this:
Tree.prototype.buildTree = function (nodes, level) {
if (!nodes) return;
level += 1;
var _this = this;
$.each(nodes, function addNodes(id, node) {
var treeItem = $(_this.template.item)
.addClass('node-' + _this.elementId)
.addClass(node.state.checked ? 'node-checked' : '')
.addClass(node.state.disabled ? 'node-disabled': '')
.addClass(node.state.selected ? 'node-selected' : '')
.addClass(node.searchResult ? 'search-result' : '')
.attr('data-nodeid', node.nodeId)
.attr('style', _this.buildStyleOverride(node));
......................SOME CODES ........SOME CODES..........................}
You can add :
.attr('data-type', node.dataType)
.attr('data-id', node.dataId)
And then change the object(json) like this:
[{"text":"Root","icon":null,"dataId":1,"dataType":"branch","nodes":
[{"text":"Steve","icon":null,"dataId":17, "dataType":"user","nodes":...
The link provided simply instructs how to expand the node object with additional properties. There is no correlation between a node's properties and the attributes assigned in HTML.
You might want to do something like this:
var allNodes = $('#tree').treeview('getNodes);
$(allNodes).each(function(index, element) {
$(this.$el[0]).attr('data-attribute-name', this.data-attribute-name);
});
I have created 2 buttons that allow a user to download a HTML table as TXT or Excel. The appropriate files are generated by my Rails app. Everything works fine except for IE. I tested IE11 on Win7.
Live example (See buttons at bottom): http://en.mycoursewalk.com/course_walk/distance_table/3575
HTML Code:
<i class="fa fa-file-excel-o fa-lg"></i> Export to Excel
<script>
var cw_id = <%= #coursewalk.id %>;
$(document).on("pageshow",function(event) {
$("#Export_Excel").click(function(event) {
export_table('xml');
});
});
function export_table(export_format) {
var table = $('#distance_table').tableToJSON();
window.open('/application/export_table/' + cw_id + '.' + export_format + '?table_type=distance_table&export_format=' + export_format + "&_json=" + encodeURIComponent(JSON.stringify(table)), "_self");
}
</script>
Controller:
def export_table
# Code here to create appropriate text or Excel file. Removed for clarity
formatted_data = ''
formatted_data << "test" + "\t" + "test2" + "\n"
i = Iconv.new('UTF-8','iso-8859-1')
formatted_data_utf8 = i.iconv(formatted_data)
send_data formatted_data_utf8, :filename => "test.txt", :type => "text/csv;charset=UTF-8", :disposition => "attachment"
end
In the IE Developer Tools and Console, IE shows "Navigation Occurred" and a complaint about DOCTYPE when you click on the Export buttons. Clicking on the DOCTYPE warning will actually load the TXT or Excel file into the console.
How can I fix this?
I fixed this issue by using rails templates instead as described in this Rail Cast:
http://railscasts.com/episodes/362-exporting-csv-and-excel?view=asciicast
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 am using Dojo v1.8 with Worklight; I would like create a SwapView dynamically in View, but I'm encountering problems...
HTML code:
<div data-dojo-type="dojox.mobile.View" id="listeInscriptionView"
data-dojo-props="selected:false,scrollDir:'vh'"
style="background-image: url('images/bg-texture.jpg');"
data-dojo-id="id">
</div>
JavaScript code:
var view = registry.byId(listeInscriptionView);
alert(view);
for(var i = 1; i < 3; i++ ){
var swap = new dojox.mobile.SwapView({
id: i,
selected:false
});
var head = new dojox.mobile.Heading({
label:'Swap' + i,
});
swap.addChield(head);
view.addChield(swap);
alert("test" + i);
}
The above does not work. How I can create the widget SwapView dynamically?
Is that a copy of your actual code? I have not actually tested it but there are syntax errors and typos:
registry.byId(listeInscriptionView);
should be
registry.byId("listeInscriptionView");
(missing quotes), and
swap.addChield(head);
view.addChield(swap);
should be
swap.addChild(head);
view.addChild(swap);
Maybe it works better with these errors fixed?
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() )