[ChristopherParticipant]

Hi gregorm,

The way you initialize the second grid is incorrect. You shoudn’t re-create the “jqxSubGrid” every time you click on the “move2second” button. That’s the root of your issue. Instead you should just reload the data and refresh the jqxGrid. This is done trough the “updatebounddata” method of the jqxGrid. If you want to hide the 2nd jqxGrid, just set it’s visibility to hidden using CSS.
Here’s how it should look:
http://jsfiddle.net/dRbAE/404/

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi vishnu216,

I used your jqxGrid settings and made an example with my data. Here’s what I was able to test:
https://www.jseditor.io/?key=xb-jqxgrid-test

I noiced that you have editmode set to “selectedrow” and then you bind to the cellbeginedit. This will cause the event to be fired multiple times for every cell present in that row. That might be the root of your problem. Change the editmode to selectedcell and the event will be fired properly.
If the problem persists, check the console if your code throws any errors. If it does, post the console log here so I can see what they are.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi ryosuke,

You can’t have half sorting functionality. The jqxGrid can be either sorted or not depending on the sortable property and whether or not you’ve called the sortBy function.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi vishnu216,

Please provide the HTML code as well and some sample data so we can test your code and see what’s failing. It might be easier for you to just create a JsFiddle and post the link here so we can review the full code.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi AliMajed,

jqxListBox is the equivalent of the ASP.NET’s ListView control. Check out our demos to find something that fits your needs. For example:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxlistbox/rendering.htm?light

jqxRibbon also provides good capabilities for online shop items showcase. Take a look at this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxribbon/defaultfunctionality.htm?light

We also offer ASP.NET Tag Helpers which could be find usefull in your case.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi JellyRaptor,

You can check which key is pressed in the handlekeyboardnavigation function which is part of the jqxGrid API. Here’s how to disable Pasting in jqxGrid cells:

http://jsfiddle.net/1ah9ph8g/17/

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi swarren,

Yes, the API of the jqxChart allows lots of style customizations of the labels. For example you could use the offset and padding properties to adjust the position of the lines of the labels. Here is an example:
http://jsfiddle.net/k469n2hs/7/

These are the properties which are used to configure the style of the labels:

labels – object describing the labels properties of the axis

• visible – true/false/’custom’ determining the visibility. When ‘custom’ is set, displays only custom values/offsets.
• offset – labels offset, e.g {x: -5, y: 0}
• angle – text rotation angle
• horizontalAligment – horizontal labels alignment
• verticalAligment – vertical labels alignment
• class – CSS class of the labels
• backgroundColor – labels background color
• backgroundOpacity – labels background opacity
• borderColor – labels border line color
• borderOpacity – labels border line opacity
• padding – object describing the padding of the labels
• left – left padding
• right – right padding
• top – top padding
• bottom – bottom padding
• autoRotate – boolean determining if auto rotation is enabled
• formatSettings – object describing the format settings of the labels
• formatFunction – callback function used to format the labels.
• radius – radius of the labels in pie/donut series
• linesEnabled – determines whether to use lines for the labels in pie/donut series
• linesAngles – determines whether to use direct lines for the labels in pie/donut series
• custom – an array of custom values/offsets where a label/tickmark/gridline will be displayed

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi cvv,

That behavior is normal. The filter menu is a popup that shows on top of the jqxWindow and it’s not part of the window. That’s why you need to close it before closing the window. If you want to close the popup when closing the window a simple approach would be to call the destroy method of the jqxGrid on jqxWindow’s close event. Like so:
https://jsfiddle.net/h24ckqs6/4/

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi swarren,

labelRadius is the solution. What issues does it create in your case? I tried applying it to the jqxChart in your jsFiddle example and it works great.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi ettemlevest,

Please share the rest of the code along with the jqxGrid initialization so we can investigate thoroughly.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi PabloLMartinez,

I fixed your mapping issue, but the JSON array that you’re using can’t show all of the periods for each rows, because the structure of the JSON doesn’t allow that. The way the JSON is now, you can only show a particular record of the periods( in the example below, the first).
Here is how to map the JSON:

var objectTree = {
                "metrics": [
                    {
                        "id": 1, "name": "P&L", "period_type": "QUARTER", "denomination_type": "MILLIONS", "currency": "USD",
                        "rows": [
                            {
                                "id": 1, "name": "Revenue", "type": "numeric",
                                "periods": [
                                    { "id": 1, "month": "", "year": "2015", "quarter": "1", "value": "5449000" },
                                    { "id": 5, "month": "", "year": "2015", "quarter": "2", "value": "10367000" },
                                    { "id": 2, "month": "", "year": "2015", "quarter": "3", "value": "6307000" },
                                    { "id": 3, "month": "", "year": "2015", "quarter": "4", "value": "7509000" },
                                    { "id": 4, "month": "", "year": "2016", "quarter": "1", "value": "8862000" }
                                ]
                            },
                            {
                                "id": 2, "name": "Cost of Revenue", "type": "numeric",
                                "periods": [
                                    { "id": 6, "month": "", "year": "2015", "quarter": "1", "value": "900000" },
                                    { "id": 10, "month": "", "year": "2015", "quarter": "2", "value": "1633000" },
                                    { "id": 7, "month": "", "year": "2015", "quarter": "3", "value": "1019000" },
                                    { "id": 8, "month": "", "year": "2015", "quarter": "4", "value": "1291000" },
                                    { "id": 9, "month": "", "year": "2016", "quarter": "1", "value": "1573000" }
                                ]
                            },
                            {
                                "id": 3, "name": "Gross Profit", "type": "numeric", "formula": "",
                                "periods": [
                                    { "id": 41, "month": "", "year": "2015", "quarter": "1", "value": "" },
                                    { "id": 65, "month": "", "year": "2015", "quarter": "2", "value": "" },
                                    { "id": 47, "month": "", "year": "2015", "quarter": "3", "value": "" },
                                    { "id": 53, "month": "", "year": "2015", "quarter": "4", "value": "" },
                                    { "id": 59, "month": "", "year": "2016", "quarter": "1", "value": "" }
                                ]
                            }
                        ]
                    }
                ]
            };

            var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: "name", type: 'string' },
                        { name: "year", type: 'number', map: 'periods>0>year' }, // trying to take the value of the year
                        { name: "quarter", type: 'string', map: 'periods>0>quarter' },
                    ],
                    localData: objectTree,
                    root: "metrics>0>rows",
                    //record:
                    id: "id"
                };

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

            $("#treeGrid-pl").jqxTreeGrid(
                {
                    width: '90%',
                    pageable: false,
                    source: dataAdapter,
                    showAggregates: true,
                    showSubAggregates: true,
                    aggregatesHeight: 70,
                    sortable: true,
                    ready: function () {
                        $("#treeGrid-pl").jqxTreeGrid('expandRow', '34');
                    },
                    columns:
                        [

                            { text: 'name', cellclassname: 'first-column', datafield: 'name', width: '20%' },
                            { text: 'year', datafield: 'year', width: '10%' },
                        { text: 'Quarter', datafield: 'quarter', width: '10%' }

                        ]
                });

What exactly do you mean by “building columns dynamically” ? Please clearify that point so we can propose a solution.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi pablosym,

We tested your code and we are not facing the issue you’re having. Check if “fechaSistema” returns correct date. Also by default when you’re in “monthview” and you set a new appointment the “All day” checkbox might be checked which will set the start time of the appointment to 00:00:00. You need to uncheck it and set the time you want.

Here is a demo of you your code, working the way you expect to:

https://www.jseditor.io/?key=xb-scheduler

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi AliMajed,

I see you want to use a value from the jqxGrid as a selection criteria for your jqxTree. In order to do that you have to take the following steps:

– In your “UpdateLaw()” method you need to get all of the elements of the jqxTree. You can do that using the getItems method from the jqxTree API.
– Iterate through them and check if the value is present.
– If it is, get the a reference to the element and using selectItem select that element. Every item that is returned from the getItems method, contains properties like “label” and “element”. “label” represents the actual text of the <li> of the current item(this will be compared to “CategoryINT” value that you get from the jqxGrid). “element” represents a reference to the </li><li> tag.

Here is a demo:
http://jsfiddle.net/W4NZw/144/

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi gsoares,

We followed the steps you wrote in an attempt to reproduce this behavior but we were unable to. The jqxInput val() method always returns the value you’ve chosen from the autocomplete list or the new value that you’ve entered and isn’t present there. Perhaps the issue is in the way you validate the form. Please provide a demo or a code sample so we can see where is the root of the problem.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[ChristopherParticipant]

Hi swarren,

Please provide a demo of the issue you’re having using JSFiddle or JSEditor so we can give you a solution.

If the values of the chart are too low it’s normal for the labels to overlap. You can change the range of the values using the minValue, maxValue
properties to make the chart columns look bigger and the labels won’t overlap.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts