[VladimirParticipant]

Hello Gunjan,

The beforeprocessing callback funciton is deprecated. Please use loadComplete or beforeLoadComplete callbacks.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[VladimirParticipant]

Hello arkgroup,

If the data you are updating in the popups is part of the data in the dataTable you should definetely check this demo. It displays how to create a popup editor for a row, and how to update the values of the dataTable and will also communicate with the server to update the necessery data.

If however the update your sending is not directly related, you probably need to call dataAdapter.dataBind(); which will force the dataAdapter to request the data again, and then update the dataTable, also note you probably want to do this in the success callback of your update, to make sure that it requests the new data after your update has been successful.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[VladimirParticipant]

Hello apelton,

It is not possible to use the dataTable filters in the scenario you are describing. You can however implement your own custom filtering of records before supplying them to the dataTable (probably at the same stage where you seperate your data, or updating them whenever you need by using the stored data from the original request). Remember that the data is basically an array, and arrays filter() method supports custom filtering. Here is a useful filtering explanation.

When you have programatically filtered your data, just call dataAdapter.dataBind() to bind to the filtered data, and it should update as expected. Similarly you can remove the filter.

Best Regards,
Vladimir

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

[VladimirParticipant]

Hello Jens,

Thank you for your report, we will investigate the issue and possibly fix it in future versions.

Best Regards,
Vladimir

jQWidgets team
http://www.jqwidgets.com

[VladimirParticipant]

Hello vv9863,

Yes you can.

You can check this demo for an example on how you can set them.
In short you have minValue and maxValue properties, and you can change the unitInterval.

Best Regards,
Vladimir

jQWidgets team
http://www.jqwidgets.com

[VladimirParticipant]

Hello Dinesh,

Generally why would you even use ribbon if you have just 1 element?

The ribbon does not have such functionality, but you may be able to achieve this effect by toggling a class that would hide the menu when you have just 1 option to display. For example:
$("#jqxRibbon ul.jqx-widget-header").toggleClass('hiddenClass')

and set visiblity: hidden for that class as css rule.

However you are likely to get side effects from this like missing borders that would be attatched to the menu.

You could try to just set the height of the element to 0 instead of hiding it. (Should probably use width for vertical ribbon)

.hiddenClass {
    height: 0;
    min-height: 0;
}

This will keep the border, but the blank space will still be there and you will see missing side borders on that window, so to adjust that you will probably need to move the content.

$("#jqxRibbon .jqx-widget-content").toggleClass('moveContentClass')
and set that moveContentClass with negative margin.
e.g. for top placed ribbon

.moveContentClass { margin-top: -15px; }

Though this is just a suggestion and is entirely up to you on how to implement it.
There are probably others maybe even more efficient methods to achieve this.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[VladimirParticipant]

Hello Jens,

I am sorry for the late reply.

If you haven’t figured it out already. You can place the entire chart logic inside the onLoadComplete() method of the grid’s dataAdapter, and this should solve your synchronization issue. You may still need to keep the rangefinder event handler outside the function, as to prevent duplicate handler initialzations.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[VladimirParticipant]

Hello yuanru,

Unfortunately the jqxDateTimeInput can not be initilized from an <input> tag. However the jqxValidator plugin works with jqxDateTimeInput so you shouldn’t have issues with it as shown in the validator demo page.

Best Regards,
Vladimir

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

[VladimirParticipant]

Hello Alastair,

Since the second panel is taking all the vertical space, the remaining horizontal space for the fifth panel is decreased. If you would like the fifth to take the entire horizontal space (e.g. be equal to the width of the first panel), it should be placed before the second panel in the domtree.

Example:

        <div id='jqxDockPanel'>
            <div id='first' style='background: #486974;'>
                First Div</div>
            <div id='fifth' style='background: #a73600;'>
                Fifth Div</div>
            <div id='second' style='height: 100px; background: #368ba7;'>
                Second Div</div>
            <div id='third' style='background: #df7169;'>
                Third Div</div>
            <div id='fourth' style='background: #a73654;'>
                Fourth Div</div>
        </div>

As I explained – the panels are being placed depending on their order in the dom tree, taking as much space as it is available.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[VladimirParticipant]

Hello eddi0815,

The reason the children do not appear is that you have not included the ‘children’ element in the source dataFields,
change it to:

               dataFields: [
                    { name: 'Id', type: 'number' },
                    { name: 'Key', type: 'string' },
                    { name: 'children', type: 'array' },
                    { name: 'Value', type: 'string' }
                ],

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[VladimirParticipant]

Hello Jens,

You should also create a charDataAdapter and use it as the source.

Here is the modified version of your chart initialization code:

var chartDataAdapter = new $.jqx.dataAdapter(sourceChart);

            //console.info(sourceChart);
            var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'];

            var actDay = new Date();
            var minValDate = new Date();
            var maxValDate = new Date();
            minValDate.setFullYear(actDay.getFullYear() - 1);
            minValDate.setDate(1);
            maxValDate.setMonth(actDay.getMonth() + 1);
            maxValDate.setDate(1);

            // prepare jqxChart settings
            var settings = {
                title: "Entwicklung",
                description: "(...)",
                backgroundColor: '#3E3E42',
                enableAnimations: true,
                animationDuration: 1500,
                enableCrosshairs: true,
                padding: { left: 5, top: 5, right: 30, bottom: 5 },
                titlePadding: { left: 30, top: 5, right: 0, bottom: 10 },
                source: chartDataAdapter,
                xAxis:
                {
                    dataField: 'Datum',
                    type: 'date',
                    dateFormat: 'dd.MM.yyyy',
                    minValue: minValDate,
                    maxValue: maxValDate,
                    //tickMarks: { step: 12 },
                    //unitInterval: 900,
                    labels: { step: 1 },
                    gridLines: {visible: true},
                    rangeSelector: {
                        //renderTo: $('#jqxChartSelector'),
                        size: 80,
                        padding: { left: 0, right: 0, top: 10, bottom: 0 },
                        backgroundColor: '#3E3E42',
                        dataField: 'Betrag',
                        dateFormat: 'dd.MM.yyyy',
                        baseUnit: 'month',
                        minValue: new Date(2014, 0, 1),
                        gridLines: { visible: true },
                        snapToTicks: true,
                        majorTicksInterval: { year: 1 },
                        minorTicksInterval: { month: 1 },
                    }
                },
                colorScheme: 'scheme01',
                seriesGroups:
                        [
                            {
                                type: 'line',
                                valueAxis: {
                                    title: { text: 'Betrag' },
                                    labels: {
                                        horizontalAlignment: 'right',
                                        formatSettings: {
                                            sufix: ' €',
                                            decimalPlaces: 0,
                                            decimalSeparator: ',',
                                            thousandsSeparator: '.',
                                        },
                                    }
                                },
                                toolTipFormatSettings: {
                                    sufix: ' €',
                                    decimalPlaces: 0,
                                    decimalSeparator: ',',
                                    thousandsSeparator: '.',
                                    dateFormat: 'dd.MM.yyyy',
                                    negativeWithBrackets: false
                                },
                                series: [
                                    { dataField: "Betrag", displayText: "Betrag", lineWidth: 2},
                                    { dataField: "Ziel", displayText: "Ziel", lineWidth: 2}
                                ]
                            }
                        ]
            };

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[VladimirParticipant]

Hello Reva,

I am glad that you were able to solve your issue.

Also note that in your case the map parameter is not necessary, because the name of the field is the same as the mapping.

In general you would need to map your data if you want to rename the field, or if it is nested inside another object e.g. { employee: { name: ‘somename’, position: ‘somePosition’}}

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[VladimirParticipant]

Hello Reva,

Change the line:

            var dataAdapter = new $.jqxgrid.dataAdapter(source);

to

             var dataAdapter = new $.jqx.dataAdapter(source);

Also is your data in format:

{ 
   '0': 'someName',
   '1': 'someType',
   '2': 'someUri',
   '3': 'some riginator'
   '4': 'some createor'
}

Because this is what mapping you have applied. If not you should check what your data format is, and use it as appropriate.
If you are still having issues please provide a sample of your data as contained in the ret variable. And also check to see what if any errors are displayed in the developer console.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[VladimirParticipant]

Hello Alastair,

Not exactly.

The quoted selector says: Select all <div> elements that have a <div> element as parent, and that <div> element has an element as his parents that has an id jqxDockPanel.

Regarding your question:
a) In general you wouldn’t want to have invisible div elements, unless they have a specific purpose. Normally you would just delete them from your DOM. In the demo in order to provide easier switch between the layouts in some cases the 4th element is left invisible (outside of panel), but not removed. So no – it is not necessery, but generally you would want to.
b) Any number of panels should be possible. The selection and naming of the tags is entirely up to you.
c) I am not aware of any limitations aside from the fact that since the panel will take the entire available space in one direction, you are likely to run out of space pretty soon, and I can’t think of particular reason to place too many of them, unless you want to create a drawing with divs.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[VladimirParticipant]

Hello Nishchaljain,

I have updated the fiddle using your data.
As you can see the labels of the fields are with dd/mm/yyyy format, and the value is the actual date object.

Note that if you want to use the value for other purposes – it is a date object which will get printed by your local computer settings unless you specifically print it in another way.

Best Regards,
Vladimir

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

[Author]

Posts