jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 16 through 30 (of 90 total)

← 1 2 3 … 6 →

Author

Posts

September 27, 2013 at 12:16 pm in reply to: How to load data from JSON data source in jqxChart? How to load data from JSON data source in jqxChart? #29709

Apeksha Singh

Participant

Hi Peter Stoev,

Can you tell me if it the right way to load JSON sampledata in charts.

Thanks & Regards,
Apeksha

September 27, 2013 at 11:30 am in reply to: How to load data from JSON data source in jqxChart? How to load data from JSON data source in jqxChart? #29702

Apeksha Singh

Participant

Hi Peter Stoev,

Can we load JSON sampledata for charts like we have for grids?
I am adding a code below for sampledata that I am using for a grid.This sampledata is a seperate .php file(sampledata/test_tab_sampledata.php) and I am using it for my chart sample data too :-

<?php
	$Country = array("Luxembourg","Singapore","Norway","USA","Austria","Germany","Canada");
	$GDP = array("10000","15000","20000","25000","30000","35000","40000","45000","50000","55000","60000","65000","70000");
	$DebtPercent = array("2.25", "1.5", "3.0", "3.3", "4.5", "3.6","2.25", "1.5", "3.0", "3.3", "4.5", "3.6","2.25");
	$Debt = array("10000","15000","20000","25000","30000","35000","40000","45000","50000","55000","60000","65000","70000");
		
	$data = array();
	$i=0;
	while($i < 20)
	{    
	  $row = array();
	  $row["Country"]=$Country[$i];	
	  $row["GDP"]=$GDP[$i];	
	  $row["DebtPercent"]=$DebtPercent[$i];
	  $row["Debt"]=$Debt[$i]
	  $data[$i] = $row;
	  $i++;
	}
	 
	header("Content-type: application/json"); 
	echo "{\"data\":" .json_encode($data). "}";
?>

And below is the code for charts that I am using :-

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css">
    <link rel="stylesheet" href="jqwidgets/styles/jqx.ui-redmond.css" type="text/css">
    <script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="scripts/gettheme.js"></script>
    <script type="text/javascript" src="jqwidgets/jqx-all.js"></script>
    <script type="text/javascript">
       $(document).ready(function () {
            // prepare chart data as an array            
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Country' },
                    { name: 'GDP' },
                    { name: 'DebtPercent' },
                    { name: 'Debt' }
                ],
                url: 'sampledata/test_tab_sampledata.php'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error);} });
            // prepare jqxChart settings
            var settings = {
                title: "Economic comparison",
                description: "GDP and Debt in 2010",
                showLegend: true,
                enableAnimations: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                categoryAxis:
                    {
                        dataField: 'Country',
                        showGridLines: true
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 50,
                            valueAxis:
                            {
                                unitInterval: 5000,
                                displayValueAxis: true,
                                description: 'GDP & Debt per Capita($)'
                            },
                            series: [
                                    { dataField: 'GDP', displayText: 'GDP per Capita'},
                                    { dataField: 'Debt', displayText: 'Debt per Capita' }
                                ]
                        },
                        {
                            type: 'line',
                            valueAxis:
                            {
                                unitInterval: 10,
                                displayValueAxis: false,
                                description: 'Debt (% of GDP)'
                            },
                            series: [
                                    { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)', opacity:0.3 }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
	<div style='height: 600px; width: 682px;'>
    <div id='host' style="margin: 0 auto; width:680px; height:400px;">
		<div id='jqxChart' style="width:680px; height:400px; position: relative; left: 0px; top: 0px;">
		</div>
	</div>
    </div>
</body>
</html>

Using this is showing an error :-

Error loading “sampledata/test_tab_sampledata.php” : Internal Server Error
Please guide me regarding this as soon as possible.

Thanks & Regards,
Apeksha

September 27, 2013 at 11:10 am in reply to: How to increase the width of combobox dropdown div? How to increase the width of combobox dropdown div? #29696

Apeksha Singh

Participant

Hi Dimitar,

This solution is not working within the grid.
If I have a combobox column in a grid , I want to increase the width of it in the same manner as above.

Please guide me regarding this as soon as possible.

Thanks & Regards,
Apeksha

September 27, 2013 at 9:35 am in reply to: Issue in applying toolbar in grid. Issue in applying toolbar in grid. #29688

Apeksha Singh

Participant

Hi Dimitar,

Thanks a lot this is the solution I was searching for.
Now I am able to filter date column, but in this after deleting every value from input fields I am not getting the original grid data.
The above code to get the original data is working fine for other columns except date.
Also while I filter any data for a particular column, the whole column get selected by grey shade but if I change the column for filtering. The previous column is not getting deselected.
Now I have two columns in the grid displayed as selected.

Please guide me regarding this as sson as possible.

Thanks & Regards,
Apeksha

September 26, 2013 at 5:08 am in reply to: Issue in applying toolbar in grid. Issue in applying toolbar in grid. #29595

Apeksha Singh

Participant

Hi Dimitar,

I have already implemented this format but not able to search date in this format using filter.
Please guide me regarding this as soon as possible.

Thanks & Regards,
Apeksha

September 25, 2013 at 8:30 am in reply to: Issue in applying toolbar in grid. Issue in applying toolbar in grid. #29541

Apeksha Singh

Participant

Hi Dimitar,

Is it not possible to do it in year-month-day ?

Regards,
Apeksha

September 25, 2013 at 7:19 am in reply to: Issue in applying toolbar in grid. Issue in applying toolbar in grid. #29534

Apeksha Singh

Participant

Hi Dimitar,

It resolved one of my issue that is :-

1) If we have a blank row in any column then search for that column is not working properly. For example :-

1- If there is 4 rows in a column and only one row has data “abc”.
2- I searched for abc it removed all the blank rows and display me only this row.
3- Then after removing this word from search input I am not getting the original list back.

Thanks a lot for helping me in resolving one issue, but still not able to search date column as the format is “2013-08-25” after “2013” when I enter “-” it is not able to filter it.

Please tell me what can resolve this issue as soon as possible.

Thanks & Regards,
Apeksha

September 12, 2013 at 10:02 am in reply to: How to increase the width of combobox dropdown div? How to increase the width of combobox dropdown div? #28843

Apeksha Singh

Participant

Hi Dimitar,

Thanks for the quick response it resolved my issue.

Regards,
Apeksha

September 5, 2013 at 12:07 pm in reply to: Issue in applying toolbar in grid. Issue in applying toolbar in grid. #28397

Apeksha Singh

Participant

Hi Dimitar,

This code was really helpful it solved my requirements but I am facing some issues with this code as :-
1) If we have a blank row in any column then search for that column is not working properly. For example :-

Please tell me what is the issue behind it.

2) This search is not working for dates of format like “2013-09-12”.

Please reply me back as soon as possible.

Thanks & Regards,
Apeksha

September 2, 2013 at 11:49 am in reply to: Issue in applying toolbar in grid. Issue in applying toolbar in grid. #28161

Apeksha Singh

Participant

Hi Dimitar,

This code was really helpful. But as you have implemented input here can I add a combobox too so that user can select “searchDatafield” from the combobox.

I am adding my code below :-

$("#selectSearchField").jqxComboBox({
                //source: contacts,
                selectedIndex: -1,
                promptText: "Select Column",
                width: '75.5%',
                height: '20',
                theme: 'ui-start'
});
var all_initGrid = function () {
                gridid = "#all_invoicetable"; //update gridid...
                //var url = "sampledata/invoice_maindata.php";
                //$('#all_invoicetable').jqxGrid('updatebounddata');
                var source = {
                    datatype: "json",
                    localdata: all_invoice_data,
                    datafields: [
                        {
                            name: 'id',
                            type: 'number'
                        }, {
                            name: 'number',
                            type: 'string'
                        }, {
                            name: 'reference',
                            type: 'string'
                        }, {
                            name: 'contact_name',
                            type: 'string'
                        }, {
                            name: 'contact_id',
                            type: 'number'
                        }, {
                            name: 'date',
                            type: 'string'
                        }, {
                            name: 'due_date',
                            type: 'string'
                        }, {
                            name: 'paid',
                            type: 'float'
                        }, {
                            name: 'due',
                            type: 'float'
                        }, {
                            name: 'workflow_status_id',
                            type: 'number'
                        }, {
                            name: 'workflow_status_status',
                            type: 'string'
                        }, {
                            name: 'transaction_type_id',
                            type: 'number'
                        },
                    ],
                    //id: 'id',
                    //url: url,
                    //root: 'data'
                };
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    async: false,
                    loadError: function (xhr, status, error) {
                        alert('Error loading "' + source.url + '" : ' + error);
                    }
                });
                columnCheckBox = null;
                var updatingCheckState = false;
                // initialize jqxGrid
                $("#all_invoicetable").jqxGrid({
                    width: '97.7%',
                    autoheight: true,
                    source: dataAdapter,
                    //sortable: true,
                    //enabletooltips: true,
                    altrows: true,
                    pageable: true,
                    pagesizeoptions: ['10', '20', '30', '40', '50'],
                    editable: false,
                    selectionmode: 'none',
                    theme: 'metro',
showtoolbar: true,
                    rendertoolbar: function (toolbar) {
                        var me = this;
                        var container = $("<div style='margin: 5px;'></div>");
                        toolbar.append(container);
                        var combobox = $("#selectSearchField");
                        var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: right; width: 150px;' />");
                        container.append(combobox);
                        container.append(input);
                        var searchDatafield = "number";
                        input.on('keyup', function (event) {
                            var searchText = input.val();
                            var filtergroup = new $.jqx.filter();
                            var filter_or_operator = 1;
                            var filtervalue = searchText;
                            var filtercondition = 'contains';
                            var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                            filtergroup.addfilter(filter_or_operator, filter);
                            $("#all_invoicetable").jqxGrid('addfilter', searchDatafield, filtergroup);
                            $("#all_invoicetable").jqxGrid('applyfilters');
                        });
                    },
                    columns: [
                        {
                            text: 'Id',
                            datafield: 'id',
                            width: '12%',
                            hidden: true
                        }, {
                            text: 'Number',
                            datafield: 'number',
                            width: '12%'
                        }, {
                            text: 'Ref',
                            datafield: 'reference',
                            width: '12%'
                        }, {
                            text: 'To_id',
                            datafield: 'contact_id',
                            width: '12%',
                            hidden: true
                        }, {
                            text: 'To',
                            datafield: 'contact_name',
                            width: '12%'
                        }, {
                            text: 'Date',
                            datafield: 'date',
                            width: '15%'
                        }, {
                            text: 'Due Date',
                            datafield: 'due_date',
                            width: '15%'
                        }, {
                            text: 'Paid',
                            cellsformat: 'f2',
                            datafield: 'paid',
                            width: '8%'
                        }, {
                            text: 'Due',
                            cellsformat: 'f2',
                            datafield: 'due',
                            width: '8%'
                        }, {
                            text: 'Status_id',
                            datafield: 'workflow_status_id',
                            width: '18%',
                            hidden: true
                        }, {
                            text: 'Status',
                            datafield: 'workflow_status_status',
                            width: '18%'
                        }, {
                            text: 'transaction Type',
                            datafield: 'transaction_type_id',
                            width: '18%',
                            hidden: true
                        }
                    ]
                });

Please guide me regarding this as soon as possible.

Thanks & Regards,
Apeksha

August 29, 2013 at 7:05 am in reply to: Issue in applying toolbar in grid. Issue in applying toolbar in grid. #27920

Apeksha Singh

Participant

Hi Dimitar,

Statusbar opens a new popup window that’s why I don’t want to use it.
Please guide me how I can make toolbar work in my code as it fulfill all my requirements.

Please reply me as soon as possible.

Thanks & Regards,
Apeksha

August 28, 2013 at 11:35 am in reply to: Issue in applying toolbar in grid. Issue in applying toolbar in grid. #27851

Apeksha Singh

Participant

Hi Dimitar,

Is it not possible to use toolbar in the code I have shared above.
As I want to apply search on only one column and other columns should also get updated according to the new order not only one column.

Thanks & Regards,
Apeksha

August 28, 2013 at 9:02 am in reply to: Issue in applying toolbar in grid. Issue in applying toolbar in grid. #27840

Apeksha Singh

Participant

Hi Dimitar,

I am adding my code below please have a look:-

var all_invoice_data = new Array();
all_invoice_data.push(voucher_item); //To have data of all invoices...
  /*START :Function to display grid for all account*/
            var all_initGrid = function () {
                gridid = "#all_invoicetable"; //update gridid...
                var source = {
                    datatype: "json",
                    localdata: all_invoice_data,
                    datafields: [
                        {
                            name: 'id',
                            type: 'number'
                        }, {
                            name: 'number',
                            type: 'string'
                        }, {
                            name: 'reference',
                            type: 'string'
                        }, {
                            name: 'contact_name',
                            type: 'string'
                        }, {
                            name: 'contact_id',
                            type: 'number'
                        }, {
                            name: 'date',
                            type: 'string'
                        }, {
                            name: 'due_date',
                            type: 'string'
                        }, {
                            name: 'paid',
                            type: 'float'
                        }, {
                            name: 'due',
                            type: 'float'
                        }, {
                            name: 'workflow_status_id',
                            type: 'number'
                        }, {
                            name: 'workflow_status_status',
                            type: 'string'
                        }, {
                            name: 'transaction_type_id',
                            type: 'number'
                        },
                    ],
                    //id: 'id',
                    //url: url,
                    //root: 'data'
                };
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    async: false,
                    loadError: function (xhr, status, error) {
                        alert('Error loading "' + source.url + '" : ' + error);
                    }
                });
                // initialize jqxGrid
                $("#all_invoicetable").jqxGrid({
                    width: '97.7%',
                    autoheight: true,
                    source: dataAdapter,
                    altrows: true,
                    pageable: true,
                    pagesizeoptions: ['10', '20', '30', '40', '50'],
                    editable: false,
                    selectionmode: 'none',
                    theme: 'metro',
                    columns: [
                        {
                            text: 'Id',
                            datafield: 'id',
                            width: '12%',
                            hidden: true
                        }, {
                            text: 'Number',
                            datafield: 'number',
                            width: '12%'
                        }, {
                            text: 'Ref',
                            datafield: 'reference',
                            width: '12%'
                        }, {
                            text: 'To_id',
                            datafield: 'contact_id',
                            width: '12%',
                            hidden: true
                        }, {
                            text: 'To',
                            datafield: 'contact_name',
                            width: '12%'
                        }, {
                            text: 'Date',
                            datafield: 'date',
                            width: '15%'
                        }, {
                            text: 'Due Date',
                            datafield: 'due_date',
                            width: '15%'
                        }, {
                            text: 'Paid',
                            cellsformat: 'f2',
                            datafield: 'paid',
                            width: '8%'
                        }, {
                            text: 'Due',
                            cellsformat: 'f2',
                            datafield: 'due',
                            width: '8%'
                        }, {
                            text: 'Status_id',
                            datafield: 'workflow_status_id',
                            width: '18%',
                            hidden: true
                        }, {
                            text: 'Status',
                            datafield: 'workflow_status_status',
                            width: '18%'
                        }, {
                            text: 'transaction Type',
                            datafield: 'transaction_type_id',
                            width: '18%',
                            hidden: true
                        }
                    ]
                });
                $("#all_invoicetable").bind('rowclick', function (event) {
                    var datafield = event.args.datafield;
                    var editrow = event.args.rowindex;
                    var offset = $("#all_invoicetable").offset();
                    // get the clicked row's data and initialize the input fields.
                    var dataRecord = $("#all_invoicetable").jqxGrid('getrowdata', editrow);
                    var statusvalue = $('#all_invoicetable').jqxGrid('getcellvalue', editrow, 'workflow_status_id');
                    var transactionType = $('#all_invoicetable').jqxGrid('getcellvalue', editrow, 'transaction_type_id');
                    if (transactionType !== undefined) //have only correct value...
                    {
                        if (parseInt(transactionType) == 5) //for Customer Invoice transaction_type_id...
                        {
                            if (parseInt(statusvalue) == 4) {
                                self.goToThisRoute('non_editable_invoice_detail/' + dataRecord.id + '/' + item_type_id, dataRecord);
                            } else if (parseInt(statusvalue) == 3) {
                                self.goToThisRoute('non_editable_invoice_detail/' + dataRecord.id + '/' + item_type_id, dataRecord);
                            } else {
                                self.goToThisRoute('editable_invoice_detail', dataRecord);
                            }
                        } else if (parseInt(transactionType) == 6) //remaining invoices are of Credit Note type.....
                        {
                            if (statusvalue == "4") {
                                $("#invoice_main").css('display', 'none');
                                self.goToThisRoute('non_editable_credit_note_detail/' + dataRecord.id, dataRecord);
                                $("#invoice_form_label").text("Paid");
                            } else if (statusvalue == "3") {
                                $("#invoice_main").css('display', 'none');
                                self.goToThisRoute('non_editable_credit_note_detail/' + dataRecord.id, dataRecord);
                            } else {
                                $("#invoice_main").css('display', 'none');
                                self.goToThisRoute('editable_credit_note_detail', dataRecord);
                            }
                        }
                    } //end if...applied for undefined
                });
            }

Here I am using localdata to display data in the grid that is stored in an array.
How I can use this for searching?

Thanks & Regards,
Apeksha

August 27, 2013 at 12:30 pm in reply to: Issue in applying toolbar in grid. Issue in applying toolbar in grid. #27792

Apeksha Singh

Participant

Hi Dimitar,

I am using localdata to display grid data.
What should I use in url now.

Thanks & Regards,
Apeksha

August 27, 2013 at 12:25 pm in reply to: Query regarding grid column. Query regarding grid column. #27790

Apeksha Singh

Participant

Hi Dimitar,

This code is helpful to me after I make these changes :-

var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
if(row == 1) {
return ”;
}
else {
return ”;
}
};

But its creating an issue in respect of my requirement.

I want to get the count for checked checkboxes in the grid and the row id of all the checked checkboxes.
Is it possible to do so ?

Thanks & Regards,
Apeksha

Author

Posts

Viewing 15 posts - 16 through 30 (of 90 total)

← 1 2 3 … 6 →