jQWidgets Forums

jQuery UI Widgets › Forums › Grid › jqwidgets and knockoutjs binding to selectedrow

Tagged: , , , ,

This topic contains 4 replies, has 2 voices, and was last updated by  jonr 13 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    jqwidgets and knockoutjs binding to selectedrow Posts
  • April 2, 2012 at 8:00 pm jqwidgets and knockoutjs binding to selectedrow #3170

    jonr
    Member

    Hi,

    I was looking at the tutorials for knockout and jqwidgets and was wondering if there was a way to bind to the selectedrow?

    Adding to the example:

    var initialData = [
    { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
    { name: "Speedy Coyote", sales: 89, price: 190.00 },
    { name: "Furious Lizard", sales: 152, price: 25.00 },
    { name: "Indifferent Monkey", sales: 1, price: 99.95 },
    { name: "Brooding Dragon", sales: 0, price: 6350 },
    { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
    { name: "Optimistic Snail", sales: 420, price: 1.50 }
    ];

    function GridViewModel(items) {
    var self = this;
    this.items = ko.observableArray(items);
    this.selectedRowIndex = ko.observable($('#jqxgrid').jqxGrid('getselectedrowindex'));

    this.selectedRow = ko.computed(function () {
    return $('#jqxgrid').jqxGrid('getrowdata', self.selectedRowIndex());
    });

    }

    var model = new GridViewModel(initialData);
    ko.applyBindings(model, $('#jqbindings').get(0));

    var source = {
    localdata: model.items,
    datatype: 'local'
    }

    $("#jqxgrid").jqxGrid(
    {
    source: source,
    autoheight: true,
    pageable: false,
    theme: 'darkblue',
    sortable: true,
    altrows: true,
    enabletooltips: true,
    showsortcolumnbackground: false,
    columns: [
    { text: 'Name', dataField: 'name', width: 200 },
    { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
    { text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' }
    ]
    });

    I understand there is an event called rowselect, but I would like to bind to lets say selectedRow.name and was wondering how I would go about doing this or if there is a way?

    Thanks,
    Jon

    April 2, 2012 at 9:37 pm jqwidgets and knockoutjs binding to selectedrow #3172

    jonr
    Member

    I was looking into this more, and maybe for the jqxgrid there could be a way to bind the selectedrowindex to an observable in the view model like so:


    $("#jqxgrid").jqxGrid(
    {
    source: dataAdapter,
    autoheight: true,
    pageable: false,
    theme: 'darkblue',
    sortable: true,
    altrows: true,
    enabletooltips: true,
    showsortcolumnbackground: false,
    selectionmode: 'singlerow',
    selectedrowindex: 'selectedRowIndex',
    columns: [
    { text: 'Name', dataField: 'name', width: 200 },
    { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
    { text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' }
    ]
    });

    Then when the selectedrowindex changes, we could have a computed function that would get the values like I had in the original post.

    Thanks,
    Jon

    April 3, 2012 at 6:14 am jqwidgets and knockoutjs binding to selectedrow #3181

    Peter Stoev
    Keymaster

    Hi Jon,

    You will need to create a custom binding with Knockout by using the ko.bindingHandlers.

    Here’s the code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/knockout-2.0.0.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var initialData = [
                    { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
                    { name: "Speedy Coyote", sales: 89, price: 190.00 },
                    { name: "Furious Lizard", sales: 152, price: 25.00 },
                    { name: "Indifferent Monkey", sales: 1, price: 99.95 },
                    { name: "Brooding Dragon", sales: 0, price: 6350 },
                    { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
                    { name: "Optimistic Snail", sales: 420, price: 1.50 }
                ];
                var GridModel = function (items) {
                    this.items = ko.observableArray(items);
                    this.selectedRow = function(args){
                        return $('#jqxgrid').jqxGrid('getrowdata', args).name;
                    };
                };
                var model = new GridModel(initialData);
          
                // Register a binding
                ko.bindingHandlers.updateSelection = {
                    init: function (element, valueAccessor) {
                        var value = valueAccessor();
                        $(element).bind('rowselect', function (event) {
                            value(event.args.rowindex);
                        });
                    }
                };
                ko.applyBindings(model);
                var source = {
                    localdata: model.items,
                    datatype: 'local'
                }
                // create jqxGrid.
                $("#jqxgrid").jqxGrid(
                {
                    source: source,
                    columns: [
                        { text: 'Name', dataField: 'name', width: 200 },
                        { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
                        { text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div data-bind="updateSelection: selectedRow" id="jqxgrid">
        </div>
    </body>
    </html>

    In the above code, the returned value of the selectedRow function is updated each time when the user selects a new row.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    April 3, 2012 at 6:38 pm jqwidgets and knockoutjs binding to selectedrow #3195

    jonr
    Member

    Hi Peter,

    Thank you for the response. I implemented what you had and the method was getting called every time. However if I put in something like this:

    <div id="jqbindings">
                    <div data-bind="updateSelection: selectedRow" id="jqxgrid">
                    </div>
                    <input type="text" data-bind="value: selectedRow().name" />
                </div>

    to have my UI update when the function is called, I noticed the UI doesn’t get updated. I’m not sure since the function is observable if the UI will get updated.

    Thanks,
    Jon

    April 3, 2012 at 8:00 pm jqwidgets and knockoutjs binding to selectedrow #3197

    jonr
    Member

    So since it is not an observable, it didnt change. When I used another variable and changed that in the function it did change:

    this.selectedRowValue = ko.observable();

    this.selectedRow = function (args) {
    if ($('#jqxgrid').jqxGrid('getrowdata', args) == null) {
    return '';
    }
    self.selectedRowValue($('#jqxgrid').jqxGrid('getrowdata', args));
    };

    Jon

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.