[ivailoParticipant]

Hi cpuin,

In your case this code must work fine.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[ivailoParticipant]

Hi SumitRoy,

In your code the icon property is asociated to glyphicon, but the requirement is to be an image. Cause of this the widget is searching unexisted image, an that explains the error in your screenshot.

So you have two options:
1. Usage of images (as is presented in our examples).
2. Including the glyphicons in into the HTML part – <span class=”glyphicon glyphicon-cog” aria-hidden=”true”></span>

The result code must be:

var elementByID = $('#jqxTree').find("#2")[0];
var data={html: "<span class='glyphicon glyphicon-cog' aria-hidden='true'></span><span style='font-weight: bold;' id='myItem'>Hi <input type='checkbox' /></span>" };
$('#jqxTree').jqxTree('addTo', data, elementByID);

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[ivailoParticipant]

Hi vinodn,

You can find an example how to create custom “colorScheme” in the demo section of plased in our downloads package.
The path to the file is : demos/jqxchart/javascript_chart_pie_series_custom_style.htm.

In short you can create your custom style :
$.jqx._jqxChart.prototype.colorSchemes.push({ name: 'myScheme', colors: ['#000000', '#ff0000', '#00ff00', '#0000ff', '#ffffff'] });

And invoke it in the jqxChart settings:
colorScheme: 'myScheme',

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[ivailoParticipant]

Hi tranen,

You can update your data source first and then to use ‘updateBoundData’ to refresh the data in your table.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[ivailoParticipant]

Hi phpmaven,

Cause of the asynchronous nature of the request you have some delay about loading data from your external source.
You can try to use loadComplete callback function to be sure about your data is successfully loaded. In this function you can insert your alert.

var dataAdapter = new $.jqx.dataAdapter(source, {
              loadComplete: function () {
                  alert(dataAdapter.records[0]);
              },
              formatData: function (data) {
              $.extend(data, {
                  userId: current_user
              });
              return data;
              },
              loadError: function(xhr, status, error)
              {
              alert(error);
              }
});

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[ivailoParticipant]

Hi dragontounge,

Currently this option is not possible, and we don’t have plans to include it in the package.
Also we don’t have experience with ExtJS and don’t offer integration about this framework.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[ivailoParticipant]

Hi cpuin,

This type of error is thrown when some widget is attached to DOM element, but the element with such ID or Class is missing.
From the attached parts of your code until now, is no visible the reason about this error.

The “.printButtons” class, mentioned in the error body, is not in your presented code.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[ivailoParticipant]

Hi cpuin,

There are 2 types of modes about this functionality of the jqxInput.
First – in your case when the input is not associated to data source – .val() returns only the label.
Second – when the input is associated to data source – .val() returns an object with label and value.

To use the second mode you have to associate the widget with data source, valueMember and displayMember.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[ivailoParticipant]

Hi Keshavan,

In the initialization of the radio buttons you have an unauthorized property named “value”. Remove it and the widget must work correct.

$("#jqxRadioButton").jqxRadioButton({ theme: 'ui-sunny', width: 30, height: 10, value: "A", hasThreeStates: true });
$("#jqxRadioButton2").jqxRadioButton({ theme: 'ui-sunny', width: 30, height: 10, value: "B", hasThreeStates: true });
$("#jqxRadioButton3").jqxRadioButton({ theme: 'ui-sunny', width: 30, height: 10, value: "C", hasThreeStates: true });

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[ivailoParticipant]

Hi aakash88,

It’s not possible to have more than one datafield in column, but you can combine the information of 2 or more columns in single one.
You can use cellsrenderer functions of the columns property.

More information about cellrendering you can read here.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[ivailoParticipant]

Hi Keshavan,

You use wrong syntax about your radio buttons:

<input type="radio" id='jqxRadioButton'/>
<input type="radio" id='jqxRadioButton1' />
<input type="radio" id='jqxRadioButton2' />

The right way is:

<div id='jqxRadioButton'></div>
<div id='jqxRadioButton1'></div>
<div id='jqxRadioButton2'></div>

You can see an example here.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[ivailoParticipant]

Hi dragontounge,

If you want Relative Positioning, you can use a separate div about rendering of the Range Selector. You can use renderTo: $('#selectorContainer'),.

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxChart Range Selector Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.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/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.rangeselector.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Date' },
                    { name: 'Open' },
                    { name: 'High' },
                    { name: 'Low' },
                    { name: 'Close' },
                    { name: 'Volume' },
                    { name: 'AdjClose' }
                ],
                url: '../sampledata/TSLA_stockprice.csv'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
            var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
                return 'Index: ' + itemIndex + ", Value: " + value;
            };
            // prepare jqxChart settings
            var settings = {
                title: "Range selector with regular x-axis",
                description: "In this example the range selector works with (non-date) axis",
                enableAnimations: true,
                showLegend: false,
                animationDuration: 1500,
                enableCrosshairs: true,
                padding: { left: 5, top: 5, right: 20, bottom: 5 },
                colorScheme: 'scheme02',
                source: dataAdapter,
                xAxis:
                    {
                        minValue: 175,
                        maxValue: 550,
                        flip: false,
                        valuesOnTicks: true,
                        rangeSelector: {
                            serieType: 'area',
                            padding: { /*left: 0, right: 0,*/ top: 20, bottom: 0 },
                            // Uncomment the line below to render the selector in a separate container
                            renderTo: $('#selectorContainer'),
                            backgroundColor: 'white',
                            size: 110,
                            gridLines: { visible: false },
                        }
                    },
                seriesGroups:
                    [
                        {
                            type: 'line',
                            toolTipFormatFunction: toolTipCustomFormatFn,
                            valueAxis:
                            {
                                flip: false,
                                title: { text: 'Value<br><br>' }
                            },
                            series: [
                                { dataField: 'Close', lineWidth: 1, lineWidthSelected: 1 }
                            ]
                        }
                    ]
            };
            $('#chartContainer').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <p>
        <div id='chartContainer' style="width:800px; height:500px;">
        </div>
    </p>
    <p>
        <!-- you can optionally render the selecor in this container -->
        <div id='selectorContainer' style="width:500px; height:100px; margin-top:200px;">
        </div>
    </p>
</body>
</html>

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[ivailoParticipant]

Hi badera,

You can try to use getrowboundindex method.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[ivailoParticipant]

Hi cpuin,

You are not set any data source about your jqxInput. Try to add source: dataAdapter and if the problem is not solved send a fiddle.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[ivailoParticipant]

Hi mnewnham,

You can invoke the exportLayout method – $('#jqxDocking').jqxDocking('exportLayout');.
It will give you the coordinates of all windows of this widget.

See this fiddle.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts