jQWidgets Forums

This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 1 month ago.

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

Author

Grid loses cells when hiding row details Posts

May 23, 2013 at 7:38 pm Grid loses cells when hiding row details #21789

mboyle

Member

Hello,

I have a jqxGrid in my page, using Knockout data-binding. However, if the first column has a width set to exactly 100, then when I show the row details and then hide them, the row beneath it loses all cell columns except for the very first field. Here is my initialization code:

              <div id="Grid2"

                    data-bind="jqxGrid: {

                            source: GridData,

                            height: 700,

                            rowdetails: true,

                            showrowdetailscolumn: false,

                            rowdetailstemplate: { rowdetails: '&lt;div&gt;Testing&lt;/div&gt;', rowdetailsheight: 25, rowdetailshidden: true },

                            columns: [

                                { dataField: 'name', text: 'Name', align: 'right', cellsalign: 'right', width: 100 },

                                { dataField: 'valueFloor', columntype: 'number', cellsformat: 'd1', text: 'Value Floor', align: 'right', cellsalign: 'right', width: 150 },

                                { dataField: 'valueFee', columntype: 'number', cellsformat: 'd1', text: 'Value Fee', align: 'right', cellsalign: 'right', width: 150 }

],

                            width: 400

                            }" ></div>

   $(function(){

      var ViewModel = {};

      ViewModel.GridData = ko.observableArray([

              { name: "Test1", valueFloor: 10, valueFee: 30 },

              { name: "Test2", valueFloor: 20, valueFee: 20 },

              { name: "Test3", valueFloor: 30, valueFee: 20.5}

]);

        ko.applyBindings(ViewModel);

});

</script>

Calling “$(‘#Grid2’).jqxGrid(‘showRowDetails’,0)” and then “$(‘#Grid2’).jqxGrid(‘hideRowDetails’,0)” triggers the issue.

Thank you.

May 23, 2013 at 7:41 pm Grid loses cells when hiding row details #21790

Peter Stoev

Keymaster

Hi,

Could you provide more complete code which includes the Grid’s initialization and row details initialization, how and when the “showrowdetails” method is called.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

May 23, 2013 at 7:43 pm Grid loses cells when hiding row details #21791

mboyle

Member

Updated the original post to include the HTML data-bind initialization.

May 23, 2013 at 8:08 pm Grid loses cells when hiding row details #21796

Peter Stoev

Keymaster

Hi,

Here’s a sample code based on your code:

<!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.3.min.js"></script>
    <script type="text/javascript" src="../../scripts/json2.js"></script>
    <script type="text/javascript" src="../../scripts/knockout-2.2.1.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/jqxnumberinput.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 ViewModel = {};
            ViewModel.GridData = ko.observableArray([
                    { name: "Test1", valueFloor: 10, valueFee: 30},
                    { name: "Test2", valueFloor: 20, valueFee: 20},
                    { name: "Test3", valueFloor: 30, valueFee: 20}
            ]);
            ko.applyBindings(ViewModel);
            $('#jqxgrid').jqxGrid('showrowdetails', 0)
            $('#jqxgrid').jqxGrid('hiderowdetails', 0)
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid"
        data-bind="jqxGrid: {source: GridData, height: 700, width: 400, rowdetails: true, showrowdetailscolumn: false, rowdetailstemplate: { rowdetails: '&lt;div&gt;Testing&lt;/div&gt;', rowdetailsheight: 25, rowdetailshidden: true }, columns:[
            { datafield: 'name', text: 'Name', align: 'right', cellsalign: 'right', width: 100 }, 
            { datafield: 'valueFloor', columntype: 'number', cellsformat: 'd1', text: 'Value Floor', align: 'right', cellsalign: 'right', width: 150 },
            { datafield: 'valueFee', columntype: 'number', align: 'right', cellsalign: 'right', width: 150 } 
        ]}">
    </div>
</body>
</html>

However, I cannot reproduce that with the current version – jQWidgets 2.8.3.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

May 23, 2013 at 8:24 pm Grid loses cells when hiding row details #21798

mboyle

Member

I was able to reproduce the issue with the above code by placing the showrowdetails and hiderowdetails calls in timeout functions, like so:

setTimeout( function(){ $('#jqxgrid').jqxGrid('showrowdetails', 0); }, 1000);
setTimeout( function(){ $('#jqxgrid').jqxGrid('hiderowdetails', 0); }, 2000);

May 24, 2013 at 5:09 am Grid loses cells when hiding row details #21818

Peter Stoev

Keymaster

Hi,

Thanks for the update.

I confirm the reported behavior and created a work item about it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.