You just need to add your css class in the document.ready function and things are done, code in document.ready function work only after all the DOM is loaded, the same for your menu.
$(document).ready(function () {
var index = 1;
ko.applyBindings(new FixRecords());
//something like this
$("#menuid").css('color', 'red');
//or
$("#menuid").css('menuclass submenuclass');
});
Since you are using KnockoutJS, you can just use the "css" binding to specific a conditional. If the conditional is true, knockout will apply the css class. See the documentation here:
http://knockoutjs.com/documentation/css-binding.html
Also, you don't have to use $data in the foreach, you can just data-bind to the element directly.
So, for example to set a css class of "tall" if the Height property is greater than 20 you can do this:
Here is an example using hardcoded fake data. Notice height on the second box is red because the css is applied conditionally and it's getting a class of tall. Same with the weight on the 3rd box. It's blue because the class skinny is applied if the weight
is less than 90 http://jsfiddle.net/eBxdm/
kate0824
Member
7 Points
12 Posts
How to add css class dynamicly in Api
Nov 07, 2012 01:11 AM|LINK
It is retrieving data from Api Controller and populating menu list . Is it possible to add different css class to menu item dynamicly?
ozkary
Contributor
2034 Points
303 Posts
Re: How to add css class dynamicly in Api
Nov 07, 2012 01:35 AM|LINK
Yes, you can add a css class dynamically to any html element on the client side. If your menu is like this:
<ul id="menu:>
<li id="mnhome">Home</>
<li id="mnabout">About</>
</ul>
You can add a class with JQuery like this:
$('#menu li').css('mynewclass'); //adds style to all the menus
or to a specific item:
$('#mnabout').css('mynewclass'); //only to the about menu
hope that helps.
og-bit.com
kate0824
Member
7 Points
12 Posts
Re: How to add css class dynamicly in Api
Nov 07, 2012 01:46 AM|LINK
Thanks for reply.
The menu list is populated at running time. I need to add css after the menu is ready. Is there a way to do this? Code as following.
function FixRecords() { var self = this; self.baseurl = '@ViewBag.WebApi'; self.FixRecords = ko.observableArray(); self.Create = function () { } self.Update = function () { } self.Delete = function () { } $.getJSON(self.baseurl+'/1', self.FixRecords); } $(document).ready(function () { var index = 1; ko.applyBindings(new FixRecords()); }); <ol class="round" data-bind="foreach:FixRecords"> <li> <h5>Month: <span id="title" data-bind="text: $data.Month" ></span></h5> <div> <div class="item">Height:</div> <span id="txtHeight" data-bind="text: $data.Height"></span> </div> <div> <div class="item">Weight:</div> <span id="txtWeight" data-bind="text: $data.Weight"></span> </div> <div> <input type="button" value="Update" data-bind="click: $root.Update"/> <input type="button" value="Delete Item" data-bind="click: $root.Delete"/> </div> </li> </ol>vietlongkg
Member
78 Points
26 Posts
Re: How to add css class dynamicly in Api
Nov 07, 2012 02:24 AM|LINK
Hi kate0824,
You just need to add your css class in the document.ready function and things are done, code in document.ready function work only after all the DOM is loaded, the same for your menu.
$(document).ready(function () { var index = 1; ko.applyBindings(new FixRecords()); //something like this $("#menuid").css('color', 'red'); //or $("#menuid").css('menuclass submenuclass'); });CodeHobo
All-Star
18647 Points
2647 Posts
Re: How to add css class dynamicly in Api
Nov 07, 2012 04:20 AM|LINK
Since you are using KnockoutJS, you can just use the "css" binding to specific a conditional. If the conditional is true, knockout will apply the css class. See the documentation here:
http://knockoutjs.com/documentation/css-binding.html
Also, you don't have to use $data in the foreach, you can just data-bind to the element directly.
So, for example to set a css class of "tall" if the Height property is greater than 20 you can do this:
<div class="item">Height:</div> <span id="txtHeight" data-bind="text: Height, css: { tall : Height > 200}"></span> </div>Here is an example using hardcoded fake data. Notice height on the second box is red because the css is applied conditionally and it's getting a class of tall. Same with the weight on the 3rd box. It's blue because the class skinny is applied if the weight is less than 90
http://jsfiddle.net/eBxdm/
Blog | Twitter : @Hattan
ozkary
Contributor
2034 Points
303 Posts
Re: How to add css class dynamicly in Api
Nov 08, 2012 01:24 PM|LINK
It looks like normal CSS class should handle this. For example, to add a font size style to those menu entries just add the following:
#title{font-size:12pt;}
#txtWeight{font-size:10pt;}
og-bit.com