CODEWITHSUNDEEP
javascriptjqueryweb-applicationsknockout.jsphonejs
Caleb
Caleb

Reputation: 825

Checking if any checkbox is checked Knockout - PhoneJS

So in my mobile web app (using PhoneJS), I am using a dxList to display some records. I have a checkbox next to each list 'item', so that I can mass delete or send the records. I need to know how to figure out if there is one or more checkboxes checked.

I know I can do this with normal Knockout, but I don't the PhoneJS framework actually creates a 'real' HTML checkbox, but makes a clickable element that functions like a checkbox.

So if one or more checkboxes are checked, I need to show a send and delete button. I just need to know how to determine if there are any checked boxes.

I've looked everywhere online for this, but the solutions are for Knockout using REAL checkbox inputs...

Here's my code for the dxList:

<div data-bind="dxList:{dataSource: list_data, grouped:true }">
    <div data-options="dxTemplate:{name:'group'}">
        <b><span data-bind="text: $data.key"></span></b>
    </div>  
    <div data-options="dxTemplate:{name:'item'}">
        <span data-bind="text: $data.item_value"></span>
        <div data-bind="dxCheckBox: { }" style="float:right"></div>
    </div>   
</div>

I've tried binding 'checked' to an observable array, but that affects all the checkboxes.

Can anyone help me with this? Thanks!

Upvotes: 0

Views: 1035

Answers (2)

Zac M.
Zac M.

Reputation: 53

So, I have pretty much the same question, but I think I can be more clear on my requirements.

I have a dxList that uses a SQLite table as a datasource. It is setup to allow the user to select from a list of templates to apply to another object. This new list of templates and the associated object ID will be saveed in a DIFFERENT table than the original data and as such, I need to be able to identify the items in the list that have been checked.

<div data-bind="dxList: { dataSource: templateList }">
        <div data-bind="dxAction: ''" data-options="dxTemplate : { name: 'item' } ">
            <table>
                <tr>                      
                    <td>
                        <div data-bind="dxCheckBox: {  }"></div>
                    </td>
                    <td>
                        <div style="font-weight: bold; padding-left: 10px;" data-bind="text: TemplateName"></div>
                    </td>                   
                </tr>
            </table>
        </div>
    </div>

I found this post during my initial search. I can't use the data-bind: {checked: ?} value of each check box, as that would do as the original poster found, setting all or none. I thought about an array. I'm going to try to use the dxAction to add/remove checked list item IDs from an array but I'm not sure how well that will work. Then there's the final parse to get all checked items. I will update this post once I get it working.

Resolution:

ViewModel objects:

selectedTemplates: ko.observableArray(),
selectTemplate: function (args) {
        //If it's there. Remove it.
        if (args.model.selectedTemplates.indexOf(args.itemData.TemplateID) > -1) {
            args.model.selectedTemplates.pop(args.itemData.TemplateID);
            args.itemElement[0].style.backgroundColor = '';
            args.itemElement[0].style.color = 'Black';

        }
            //else Add
        else {
            args.model.selectedTemplates.push(args.itemData.TemplateID);
            args.itemElement[0].style.backgroundColor = '#017AFF';
            args.itemElement[0].style.color = 'White';
        }

    },

And the View:

<div data-options="dxView : { name: 'SelectSurveys', title: 'SelectSurveys' } ">
    <div data-bind="dxCommand: { title: 'Save', id: 'create', action: saveSelections, icon: 'save' }"></div>
    <div data-options="dxContent : { targetPlaceholder: 'content' } ">
        <div data-bind="dxList: { dataSource: templateList, itemClickAction: selectTemplate }">
            <div data-options="dxTemplate : { name: 'item' } ">
                <div style="font-weight: bold; padding-left: 10px;" data-bind="text: SurveyName"></div>
            </div>
        </div>
    </div>
</div>

And looping the selected values for saving to local DB:

$.each(args.model.selectedTemplates(), function (index, value) {
    db.transaction(function (tx) {
        console.log("Inserting Data");
        tx.executeSql(sql, [value],
            function (t, result1) {
                if (result1 != null) {
                    console.log("New Item added." + result1.insertId);
                }
            },
            function (t, error) {
                console.log(error);
            });
    });

In the objects, I've added some coloring so you can tell which ones are selected, it doesn't use the dxSwitch or Checkbox, but it works just as well and I think it's more visually appealing as well as informative to the user.

Upvotes: 0

amartynov
amartynov

Reputation: 4175

The most straightforward MVVM approach is to data-bind dxCheckBox.checked option to a boolean property of a list item view-model. Then you can iterate over the items and understand which are checked.

You mentioned that you

tried binding 'checked' to an observable array

It is not clear why you bind a scalar property to an array.

Actually it does not differ much from the pure HTML approach. You may treat PhoneJS widgets just as fat HTML tags.

Upvotes: 0

Related Questions