mardi 26 juillet 2016

Checked attribute for checkbox list in knockout

I have two arrays that should to be displayed and shown as a list of checkbox. The main idea is click on element of the first list for add the element to the second list. The html code looks like this

   <div class="tab-pane" id="ColumnHeading">
             <div class="row">
                 <div class="form-group span4">
                     <h4>Column Headings</h4>
                     <ul class="icons-ul" data-bind="foreach: staticItem.ColumnHeadingList.ColumnHeadingListItem" >
                         <li>
                             <div class="span2">
                                 <input class="selectedHeading" type="checkbox" data-bind=" click: $parent.myCheck, checkedInArray: $parent.Params.Item.ColumnHeadingList.ColumnHeadingListItem, attr: { value: Value }" />
                                 <span data-bind="text: Name"></span>
                             </div>
                         </li>
                     </ul>
                 </div>
                 <div class="form-group span4" style="margin-left: -90px; margin-top: 15px">
                     <div class="icons-ul" data-bind="foreach: Params.Item.ColumnHeadingList.ColumnHeadingListItem" >
                             <div class="span4">
                                 <input  type="checkbox" data-bind="customcheck: IntOnly" />

                             </div>
                     </div>
                 </div>
                 <div class="span6">
                     <p class="validationMessage" data-bind="validationMessage: Params.Item.ColumnHeadingList.ColumnHeadingListItem"></p>
                 </div>
             </div>

The value "IntOnly" is a property of each object inside of the two lists of checkbox.

my function for the click event on the first list of checkbox looks like this

  self.myCheck = (function(e) {
                    var index = self.staticItem.ColumnHeadingList.ColumnHeadingListItem().map(function(e) { return e.Value(); }).indexOf(this.Value());

                    if (self.staticItem.ColumnHeadingList.ColumnHeadingListItem()[index].IntOnly() !== "Y") {
                        self.staticItem.ColumnHeadingList.ColumnHeadingListItem()[index].IntOnly("Y");
                        var o = self.staticItem.ColumnHeadingList.ColumnHeadingListItem()[index];
                        var flag = false;
                        for (i = 0; i < self.Params.Item.ColumnHeadingList.ColumnHeadingListItem().length; i++) {

                            if (this.Value() == self.Params.Item.ColumnHeadingList.ColumnHeadingListItem()[i].Value()) {
                                flag = true;
                            }
                        }
                        if (flag == false || self.Params.Item.ColumnHeadingList.ColumnHeadingListItem().length == 0) {
                            var newObject = jQuery.extend(true, {}, this);
                            self.Params.Item.ColumnHeadingList.ColumnHeadingListItem.push(newObject);

                        }
                    } else { //checked==true

                        self.staticItem.ColumnHeadingList.ColumnHeadingListItem()[index].IntOnly("N");
                        for (i = 0; i < self.Params.Item.ColumnHeadingList.ColumnHeadingListItem().length; i++) {

                            if (this.Value() == self.Params.Item.ColumnHeadingList.ColumnHeadingListItem()[i].Value()) {
                                self.Params.Item.ColumnHeadingList.ColumnHeadingListItem.splice(i, 1);
                            }
                        }
                    }
                    return true;

                });

the code is working fine for add the element to the second list and save the value on IntOnly cuz customcheck function check that value for select the check box but I can save that property for the first list and selected those checkbox after the form is send to the server and see them for editing.

Some advises please, and sorry for the grammar.




Aucun commentaire:

Enregistrer un commentaire