I´m working on a MVC3 project.
I already have a decimal value into a ViewData["nReceived"] calculated in the controller. After that the controller calls to Index view.
I'm able to display it on Index view outside of a element
<div class="bar bar-success" style="width: 42%;">Received #ViewData["nReceived"]</div>
but I need to use this value as a property of element replacing the width percentage.
I tried this with no success:
<div class="bar bar-success" style="width: #ViewData["nReceived"]%;">Received</div>
and also this:
#ViewContext.Writer
.Write("<div class=\"bar bar-success\" style=\"width: #ViewData["nReceived"]%;">")
Any ideas on how to get it working?
This should work use #()
<div class="bar bar-success" style="width:#(ViewData["nReceived"])%;">Received</div>
Also Since you are using MVC3, you can try ViewBag as well
<div class="bar bar-success" style="width:#(ViewBag.nReceived)%;">Received</div>
style='width: #Html.Raw(ViewData["nReceived"])' you're breaking your quotes and you need this to render out a little differently here
Related
I have an observable array of items which are made draggable/droppable using the Knockout sortable plugin. I am able to apply a custom template binding on the elements as per the doc using following piece of code.
<div style="border-width:0;" data-bind="sortable: {template: 'customTemplate', data: observableArray}">
My requirement is to use different templates for different items in the array based on certain condition applied to the item property. For example, if we have a property called 'status' for each item in the observable array, I want to bind 'template1' if status is true else 'template2'.
I am able to achieve the same for arrays which can be traversed using foreach loop in ko, but unable to do the same for sortable array since it does not allow to use foreach. Can someone suggest a solution/workaround to the same?
UPDATE: I was able to apply custom binding in the same template based on condition but it lead to a strange error where the element gets cloned in the parent container while dragging and dropping it into a target container. Demo can be seen here: jsFiddle
I have applied different style to students based on name but on dropping the student to a table, it gets cloned in the parent table as well. What can be the possible issue?
Note: I do not want to bind conditional css to my elements, I want to differentiate the way elements render, based on condition. Example - Going by the table seating example, if I have properties name, age and class for students object, I just want to show name for few students while all 3 properties for some as can be seen in the example fiddle.
we can fix the issue using conditional css binding
View :
<script type="text/html" id="customTmpl">
<div data-bind="css:{'one': name() === 'Bobby' ? true : false ,'two': name() != 'Bobby' ? true : false } ">
<p data-bind="text: name"></p>
</div>
</script>
Instead of going for a conditional containerless if we can simply avoid it and do it with conditional css binding .
Working fiddler here
Documentation on css available here
I was finally able to make it work by adding conditional knockout code in a single template and separating the template div from the sortable div as can be seen in the fiddle here.
The conditional script was written as below:
<script type="text/html" id="customTmpl">
<!-- ko if: name() == 'Bobby' -->
<div style="background-color: red; margin:4px;">
<p data-bind="text: name"></p>
<p data-bind="text: gender"></p>
</div>
<!-- /ko -->
<!-- ko if:name() != 'Bobby' -->
<div style="background-color: yellow; margin:4px;">
<p data-bind="text: name"></p>
</div>
<!-- /ko -->
The sortable and the template divs were separated as:
<div class="seats" data-bind="sortable: {data: students, allowDrop: $root.isTableFull }">
<div style="padding:0; border-width:0" data-bind="template:'customTmpl'"></div>
</div>
Hope it helps :)
Property binding is working fine if I have an input in my template
<div id="textAreaDiv"><input type="text" value={{item.mainText}}></div>
but I would like to have an editable div
<div id="textAreaDiv" contenteditable="true">{{item.mainText}}</div>
Is that possible? Can't find anything in the documentation.
Seems not to be supported. You should file a bug/feature request.
https://code.google.com/p/dart/issues/list
I'm using jQuery mobile and Knockout JS (latest versions of both).
I cannot seem to style a horizontal list after knockout updates the dom.
<h2>Dynamic</h2>
<div id="dynamicControlgroup" data-role="controlgroup" data-type="horizontal" data-mini="true" data-bind="foreach: Labels">
</div>
<h2>Static</h2>
<div id="staticControlgroup" data-role="controlgroup" data-type="horizontal" data-mini="true">
3G
SD
HD
HD+
/div>
The "Static" looks good, but the "dynamic" is not styled by jQuery mobile. I've tried several methods of trying to make this work, and I am missing something... after knockout runs, I do:
$("#dynamicControlgroup").trigger("create")
$("#dynamicControlgroup").children('a').buttonMarkup({ inline: true,mini: true,corners: true, type: "horizontal"});
But here is what it looks like:
Thoughts?
After appending new items, use the below code.
$('[data-role="controlgroup"]').controlgroup().trigger('create');
Note: Creating completely new controlgroup doesn't get enhanced corners dynamically. However, appending new items into existing controlgroup corners get enhanced. This problem can be solved by adding ui-first-child and ui-last-child classes.
$('[data-role="controlgroup"] a').first().addClass('ui-first-child');
$('[data-role="controlgroup"] a').last().addClass('ui-last-child');
Demo
Turns out with Knockout you need to remove the controlgroup from the div so you dont get the "empty wrapper". So the dynamic code looks like:
<h2>Dynamic</h2>
<div id="dynamicControlgroup" data-type="horizontal" data-mini="true" data-bind="foreach: Labels">
</div>
and then on page load, you can call
$('#dynamicControlgroup').controlgroup().trigger('create');
$('#dynamicControlgroup a').first().addClass('ui-first-child');
$('#dynamicControlgroup a').last().addClass('ui-last-child');
and this works. Thanks to Omar for the help on the first/last rounded classes tip!
I'm new to all this so please bear with me.
I've been using some jQuery UI widgets and I'm wanting to create category (adults) radio buttons with their own set of subcategories (children) that only appear when the appropriate adult is selected.
Here's the code I have so far: http://jsfiddle.net/99azd/
The problem is only the formatting of the initial set of children work, the others show up as plain checkboxes. I think it has something to do with the div id="format" but I'm not sure.
<div style="display: none;" id="Adult1Children">
<div id="format">
<input type="checkbox" id="child1" value="child1"/><label for="child1">child1</label>
<input type="checkbox" id="child2" value="child2"/><label for="child2">child2</label>
</div>
</div>
Got some help from the IRC channel - here's the fixed code:
http://jsfiddle.net/w6qFC/
I had a duplicated id "format" so it only ran the first one. All I had to do was change the id to a class instead and then in the js change from #format to .format. Simple.
$( ".format" ).buttonset();
and
<div class="format">
Hi I am trying to bind to an item within an object in knockout:
the following line does not work
<span data-bind="text:selectedItem.details"></span>
I tried changing it to have parenthesis after selecteItem:
<span data-bind="text:selectedItem().details"></span>
, it still did not work.
Using with:, however works:
<div data-bind="with:selectedItem">
<span data-bind="text:details" />
</div>
What am I doing wrong? How does one use composite binding paths in Knockout.
Thanks