jQWidgets Forums

Tagged: grid, jqxgrid, Knockout

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 12 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

jqxgrid configured with knockout and percentage based widths Posts

March 13, 2013 at 6:36 pm jqxgrid configured with knockout and percentage based widths #16998

andrew

Member

Hi,

Are there any known issues regarding your data grid used with knockout when the grid’s width is percentage based?

Configured via JQuery the percentage based widths work just fine. However the same configuration when done with a custom knockout binding handler …. The grid sizes itself appropriately initially but does not resize itself thereafter.

Code:

<div id=”jqxgrid” data-bind=”jqxGrid: {

width: ‘100%’,

height: ‘100%’,

autoheight: true,

source: collection,

groupable: true,

pageable: true,

filterable: true,

sortable: true,

rowsheight: 40,

theme: getDemoTheme(),

columns: [

{ text: ‘a’, datafield: a, width: ‘10%’ },

{ text: ‘b’, datafield: ‘b’, width: ‘10%’ },

{ text: ‘c’, datafield: ‘c’, width: ‘10%’ },

{ text: ‘d’, datafield: ‘d’, width: ‘10%’ },

{ text: ‘e’, datafield: ‘e’, width: ‘10%’ },

{ text: ‘f’, datafield: ‘f’, width: ‘10%’ },

{ text: ‘g’, datafield: ‘g’, width: ‘10%’ },

{ text: ‘h’, datafield: ‘h’, width: ‘10%’ },

{ text: ‘i’, datafield: ‘i’, width: ‘10%’ },

{ text: ‘j’, datafield: ‘j’, width: ‘10%’ }

] }”>

</div>

Thanks,

Andrew Felder

March 13, 2013 at 9:18 pm jqxgrid configured with knockout and percentage based widths #17004

Peter Stoev

Keymaster

Hi andrew,

Here’s a sample which shows how to define “100%” width using jqxGrid and Knockout:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to integrate jqxGrid with Knockout.js.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/json2.js"></script> 
    <script type="text/javascript" src="../../scripts/knockout-2.1.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" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.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.disabled = ko.observable(false);
                this.addItem = function () {
                    // add a new item.
                    if (this.items().length < 20) {
                        this.items.push({ name: "New item", sales: Math.round(Math.random() * 100), price: Math.round(Math.random() * 100) });
                    }
                };
                this.removeItem = function () {
                    // remove the last item.
                    this.items.pop();
                };
                this.updateItem = function () {
                    // update the first item.
                    var item = {};
                    item.name = initialData[Math.floor(Math.random() * initialData.length)].name;
                    item.sales = Math.floor(Math.random() * 500);
                    item.price = Math.floor(Math.random() * 200);
                    this.items.replace(this.items()[0], item);
                };
            };
            ko.applyBindings(new GridModel(initialData));
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style="margin-bottom: 10px;">
            <input id="addButton" type="button" data-bind="click: addItem, jqxButton: {theme: getDemoTheme()}" value="Add Item" />
            <input id="removeButton" type="button" data-bind="click: removeItem, jqxButton: {theme: getDemoTheme()}" value="Remove First Item" />
            <input id="updateButton" type="button" data-bind="click: updateItem, jqxButton: {theme: getDemoTheme()}" value="Update First Item" />
            <div data-bind="jqxCheckBox: {checked: disabled, theme: getDemoTheme()}" style='margin-top: 5px;' id="checkBox">Disabled</div>
        </div>
        <div data-bind="jqxGrid: {source: items, disabled: disabled, autoheight: true,
                width: '100%',
                editable: true,
                selectionmode: 'singlecell',
                columns: [
                    { text: 'Name', dataField: 'name', width: 200 },
                    { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
                    { text: 'Price', dataField: 'price', cellsformat: 'c2', cellsalign: 'right' }
                ]}" id="jqxgrid">
        </div>
        <table style="margin-top: 20px;">
            <tbody data-bind="foreach: items">
                <tr>
                    <td data-bind="text: name"></td>
                    <td data-bind="text: sales"></td>
                    <td data-bind="text: price"></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.