jQWidgets Forums

This topic contains 10 replies, has 2 voices, and was last updated by ulao 12 years, 3 months ago.

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

Author

cant see all items? Posts

March 11, 2013 at 3:22 pm cant see all items? #16711

ulao

Member

————JS———–
var source =
{
datatype: “xml”,
datafields: [
{ name: ‘Country’, map: ‘COUNTRY’ },
{ name: ‘City’, map: ‘ID’ },
{ name: ‘CompanyName’, map: ‘COMPANY’ },
{ name: ‘ContactTitle’, map: ‘PERCENT’ },
{ name: ‘ContactName’, map: ‘SPEED’ },
],
root: “DataBase”,
url: “api/DB/”,
async: false
};

var dataAdapter = new $.jqx.dataAdapter(source); // create data adapter.

dataAdapter.dataBind(); // perform Data Binding.

var records = dataAdapter.getGroupedRecords([‘City’],
‘items’,
‘label’,
[{ name: ‘CompanyName’, map: ‘label’ }]);

$(‘#jqxTree’).jqxTree({ source: records, height: ‘300px’, width: ‘300px’, theme: theme });

————xml———–

GMC
usa
1100
fast

FORD
usa
2
100
slowest

————output————

1
GMC
2
FORD

I would have expected

1
GMC
usa
1
100
slowest

etc…

My xml layout is static.

March 11, 2013 at 3:27 pm cant see all items? #16712

Dimitar

Participant

Hello ulao,

Please re-post your code and format it as explained in the forum topic Code Formatting.

Best Regards,
Dimitar

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

March 11, 2013 at 4:09 pm cant see all items? #16715

ulao

Member

var source =
{
datatype: “xml”,
datafields: [
{ name: 'Country', map: 'COUNTRY' },
{ name: 'City', map: 'ID' },
{ name: 'CompanyName', map: 'COMPANY' },
{ name: 'ContactTitle', map: 'PERCENT' },
{ name: 'ContactName', map: 'SPEED' },
],
root: “DataBase”,
url: “api/DB/”,
async: false
};
var dataAdapter = new $.jqx.dataAdapter(source); // create data adapter.
dataAdapter.dataBind(); // perform Data Binding.
var records = dataAdapter.getGroupedRecords(['City'],
‘items’,
‘label’,
[{ name: 'CompanyName', map: 'label' }]);
$(‘#jqxTree’).jqxTree({ source: records, height: ’300px’, width: ’300px’, theme: theme });

March 11, 2013 at 4:23 pm cant see all items? #16717

Dimitar

Participant

Hi ulao,

The provided sample cannot help us identify the source of the issue. Please post the source code of the whole page and include the XML in the same manner, too.

Best Regards,
Dimitar

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

March 11, 2013 at 4:29 pm cant see all items? #16718

ulao

Member

————-source————-

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ASP.NET Web API</title>
@section scripts 
{
    <link rel="stylesheet" href=       "../../www/jQWidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../www/jQWidgets/scripts/jquery-1.9.1.min.js" ></script>
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxdata.export.js"></script> 
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxgrid.edit.js"></script>  
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../www/jQWidgets/jqwidgets/jqxtree.js"></script> 
    <script type='text/javascript' src='../../www/javascript/spreadSheet.js'></script>
    <script type='text/javascript' src='../../www/javascript/dataLoader.js'></script>
    <script type='text/javascript' src='../../www/javascript/windowMaker.js'></script>
    <script type='text/javascript' src='../../www/javascript/mouseEvents.js'></script>
    <script type="text/javascript" src="../../www/jQWidgets/scripts/gettheme.js"></script>
    <link href="../../www/window.css" rel="stylesheet" />
    <script type="text/javascript">
        loadData()//loads in the DB
        function init( inLoadedDated)//this is called after the data is loaded. So hult all other action untill its read. 
        {
            //this will make the scheet and setup the field names form the data passed in.
            //all data will be populated int he cells
            makeSheetWindow($(demo_box),$(jqxgrid), 30, 30, 500, 500, inLoadedDated)
            makeSheetWindow($(demo1_box), $(jqxgrid1), 130, 130, 500, 500, inLoadedDated)
            //add mouse events to sheet
            setSheetMouseEvents($(jqxgrid));
            setSheetMouseEvents($(jqxgrid1));
            // Create jqxTree
            var theme = getDemoTheme();
            var source =
               {
                   datatype: "xml",
                   datafields: [
                       { name: 'Country', map: 'COUNTRY' },
                       { name: 'City', map: 'ID' },
                       { name: 'CompanyName', map: 'COMPANY' },
                       { name: 'ContactTitle', map: 'PERCENT' },
                       { name: 'ContactName', map: 'SPEED' },
                   ],
                   root: "DataBase",
                   url: "api/DB/",
                   async: false
               };
           
            var dataAdapter = new $.jqx.dataAdapter(source); // create data adapter.
           
            dataAdapter.dataBind(); // perform Data Binding.
            var records = dataAdapter.getGroupedRecords(['City'],
                'items',
                'label',
               [{ name: 'CompanyName', map: 'label' }]);
            $('#jqxTree').jqxTree({ source: records, height: '300px', width: '300px', theme: theme });
            //setInterval( afterTests, 5000);
        }
        function afterTests()
        {
        }
    </script>
    </head>
}
    <body  class='default'>
        <div style='float: right;'>
            <div id='jqxTree' style='float: right; margin-left: 400px;'>
        </div>
    </div>
        <div id="demo_box" class="box message" draggable="true" data-minwidth="75" data-minheight="50" >
            <div id="bar" class="handle bar"><h2> window1</h2></div>
            <div id="content" class="contents">    
                <div id='jqxWidget'> 
                    <div id="jqxgrid"></div>
                </div>
            </div>
            <div id="slider" class="handle resize">//</div>
        </div> 
        <div id="demo1_box" class="box message"  data-minwidth="75" data-minheight="50" >
            <div id="bar1" class="handle bar"><h2> window2</h2></div>
            <div id="content1" class="contents">    
                <div id='jqxWidget1'> 
                    <div id="jqxgrid1"></div>
                </div>
            </div>
            <div id="slider1" class="handle resize">//</div>
        </div> 
        <canvas id="canvas1" width="500" height="500"></canvas>
    </body>
</html>

——-xml——–

<ArrayOfDataBase><DataBase><COMPANY>GMC</COMPANY><COUNTRY>usa</COUNTRY><ID>1</ID><PERCENT>100</PERCENT><SPEED>fast</SPEED></DataBase><DataBase><COMPANY>FORD</COMPANY><COUNTRY>usa</COUNTRY><ID>2</ID><PERCENT>100</PERCENT><SPEED>slowest</SPEED></DataBase><DataBase><COMPANY>DODGE</COMPANY><COUNTRY>usa</COUNTRY><ID>3</ID><PERCENT>100</PERCENT><SPEED>slow</SPEED></DataBase><DataBase><COMPANY>LEMON</COMPANY><COUNTRY>NOWHERE</COUNTRY><ID>4</ID><PERCENT>0</PERCENT><SPEED>broke</SPEED></DataBase></ArrayOfDataBase>

March 11, 2013 at 4:49 pm cant see all items? #16719

ulao

Member

this xml format may be easier to read

<ArrayOfDataBase xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.datacontract.org/2004/07/MvcApplication1.Models">
<DataBase>
<COMPANY>GMC</COMPANY>
<COUNTRY>usa</COUNTRY>
<ID>1</ID>
<PERCENT>100</PERCENT>
<SPEED>fast</SPEED>
</DataBase>
<DataBase>
<COMPANY>FORD</COMPANY>
<COUNTRY>usa</COUNTRY>
<ID>2</ID>
<PERCENT>100</PERCENT>
<SPEED>slowest</SPEED>
</DataBase>
<DataBase>
<COMPANY>DODGE</COMPANY>
<COUNTRY>usa</COUNTRY>
<ID>3</ID>
<PERCENT>100</PERCENT>
<SPEED>slow</SPEED>
</DataBase>
<DataBase>
<COMPANY>LEMON</COMPANY>
<COUNTRY>NOWHERE</COUNTRY>
<ID>4</ID>
<PERCENT>0</PERCENT>
<SPEED>broke</SPEED>
</DataBase>
</ArrayOfDataBase>

March 12, 2013 at 1:04 pm cant see all items? #16802

Dimitar

Participant

Hello ulao,

To achieve what you require, you need to apply a workaround. Here it is:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ASP.NET Web API</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.1.min.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/jqxdata.export.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.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source =
               {
                   datatype: "xml",
                   datafields: [
                       { name: 'Country', map: 'COUNTRY' },
                       { name: 'City', map: 'ID' },
                       { name: 'CompanyName', map: 'COMPANY' },
                       { name: 'ContactTitle', map: 'PERCENT' },
                       { name: 'ContactName', map: 'SPEED' },
                   ],
                   root: "ArrayOfDataBase",
                   record: "DataBase",
                   url: "XMLFile1.xml",
                   async: false
               };
            var dataAdapter = new $.jqx.dataAdapter(source); // create data adapter.
            dataAdapter.dataBind(); // perform Data Binding.
            var records = dataAdapter.getRecordsHierarchy(['City'],
                'items',
                'label',
               [{ name: 'CompanyName', map: 'label'}]);
            var src = [];
            for (var i = 0; i < 4; i++) {
                src.push({});
                src[i].label = i.toString();
                src[i].items = [];
                var item = src[i].items;
                var j = 0;
                for (var key in records[i]) {
                    item.push({});
                    item[j].label = records[i][key];
                    j++;
                    if (j == 5) {
                        break;
                    }
                };
            };
            $('#jqxTree').jqxTree({ source: src, height: '300px', width: '300px' });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxTree">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

March 12, 2013 at 3:30 pm cant see all items? #16839

ulao

Member

Perfect thx! Also noticed a minor bug, not sure if this is on my side or not? Once the tree view is expanded it can not collapse.

March 12, 2013 at 3:50 pm cant see all items? #16843

ulao

Member

Sorry I missed the edit timer. I also get this d.panel is undefined error on the jqxTree line, can you point me to where that is coming from ? Says its in jqxtree line 7

March 13, 2013 at 10:35 am cant see all items? #16944

Dimitar

Participant

Hi ulao,

The example we provided you has no collapse issues on our side.

As for the panel issue – please make sure you have included the file jqxpanel.js.

Best Regards,
Dimitar

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

March 13, 2013 at 11:38 am cant see all items? #16954

ulao

Member

the jqxpanel.js include fixed both issues.

Author

Posts

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

You must be logged in to reply to this topic.