CODEWITHSUNDEEP
knockout.js
sajesh Nambiar
sajesh Nambiar

Reputation: 699

Binding a dropdownlist in a table using Knockout.js

I am facing a problem while binding a HTML dropdown in a table. Need to change color of the Column1 based on status and also setting the default value of the dropdown with actual value coming from JSON.

JS fiddle link for the same is:

http://jsfiddle.net/sajesh1985/uguxA/1/

 <div class="divStat" data-bind="style: {background: selectedChoice() === 'Pricing Complete' ? 'Green': 'Red'}">

Kindly check and let me know the issue.

Thanks and Regards, Sajesh Nambiar

Upvotes: 0

Views: 609

Answers (2)

Goddard
Goddard

Reputation: 813

Change Style Binding

<div class="divStat" 
    data-bind="style: {background:selectedChoice().Name === 'Pricing Complete' ? 'Green': 'Red'}">
</div>

and in the ViewModel mapping json to model, i used to assign javascript object directly

This is option model

 self.pricingstatus = [
        { Name: 'Pricing Complete' },
        { Name: 'Pricing Incomplete' }

];

this is for binding with json to model

  self.BindPricingSiemensProductsDetailsData = function (data) {
    var tempArray = [];

    self.simpleSearchResultsArray([]);
    if (data) {
        for (var k = 0; k < data.length; k = k + 1) {
            var temppricingProdDetails = new PricingSiemensProductDetails();
            temppricingProdDetails.ItemNo(data[k].ItemNo);                
            temppricingProdDetails.BOMID(data[k].BOMID);
            if(data[k].priceStat === "Draft")
            {
            temppricingProdDetails.selectedChoice(self.pricingstatus[1]);
                console.log(temppricingProdDetails.selectedChoice().Name);
            }
            else
            {
                temppricingProdDetails.selectedChoice(self.pricingstatus[0]);
                 console.log(temppricingProdDetails.selectedChoice().Name);
            }
            tempArray.push(temppricingProdDetails);
            self.simpleSearchResultsArray.push(temppricingProdDetails);
        }
    }
};

If i don't take your question wrong - Here is sample in jsfiddle

You can also learn and reference through here

You can also find in this tutorial from knockoutjs learning website.

Upvotes: 1

Yabada
Yabada

Reputation: 1758

The value of selectedChoice() is not what you expect it to be. So it always display red color witch is the default choice.

Upvotes: 0

Related Questions