[HristoParticipant]

Hello Alastair,

You need to include the jqxdragdrop.js file.
Please, take a look at this demo.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello rr_187,

Please, take a look at this code snippet:

<template>
    <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns"
             :columnsresize="true" :sortable="true">
    </JqxGrid>
</template>
<script>
    // import { JqxGrid, jqx } from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
	import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
	
    export default {
        components: {
            JqxGrid
        },
        data: function () {
            return {
                getWidth: 650,	// getWidth('grid'),
				// eslint-disable-next-line
                dataAdapter: new jqx.dataAdapter(this.source),
                columns: [
                    { text: 'Company Name', datafield: 'CompanyName', width: 200 },
                    { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                    { text: 'Contact Title', datafield: 'Title', width: 100 },
                    { text: 'Address', datafield: 'Address', width: 100 },
                    { text: 'City', datafield: 'City', width: 100 },
                    { text: 'Country', datafield: 'Country' }
                ]
            }
        },
        beforeCreate: function () {
            this.source = {
                localdata: [
                    ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
                    ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
                    ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico'],
                    ['Around the Horn', 'Thomas Hardy', 'Sales Representative', '120 Hanover Sq.', 'London', 'UK'],
                    ['Berglunds snabbkp', 'Christina Berglund', 'Order Administrator', 'Berguvsvgen 8', 'Lule', 'Sweden'],
                    ['Blauer See Delikatessen', 'Hanna Moos', 'Sales Representative', 'Forsterstr. 57', 'Mannheim', 'Germany'],
                    ['Blondesddsl pre et fils', 'Frdrique Citeaux', 'Marketing Manager', '24, place Klber', 'Strasbourg', 'France'],
                    ['Blido Comidas preparadas', 'Martn Sommer', 'Owner', 'C/ Araquil, 67', 'Madrid', 'Spain'],
                    ['Bon app', 'Laurence Lebihan', 'Owner', '12, rue des Bouchers', 'Marseille', 'France'],
                    ['Bottom-Dollar Markets', 'Elizabeth Lincoln', 'Accounting Manager', '23 Tsawassen Blvd.', 'Tsawassen', 'Canada'],
                    ['B\'s Beverages', 'Victoria Ashworth', 'Sales Representative', 'Fauntleroy Circus', 'London', 'UK'],
                    ['Cactus Comidas para llelet', 'Patricio Simpson', 'Sales Agent', 'Cerrito 333', 'Buenos Aires', 'Argentina'],
                    ['Centro comercial Moctezuma', 'Francisco Chang', 'Marketing Manager', 'Sierras de Granada 9993', 'Mxico D.F.', 'Mexico'],
                    ['Chop-suey Chinese', 'Yang Wang', 'Owner', 'Hauptstr. 29', 'Bern', 'Switzerland'],
                    ['Comrcio Mineiro', 'Pedro Afonso', 'Sales Associate', 'Av. dos Lusadas, 23', 'Sao Paulo', 'Brazil'],
                    ['Consolidated Holdings', 'Elizabeth Brown', 'Sales Representative', 'Berkeley Gardens 12 Brewery', 'London', 'UK'],
                    ['Drachenblut Delikatessen', 'Sven Ottlieb', 'Order Administrator', 'Walserweg 21', 'Aachen', 'Germany'],
                    ['Du monde entier', 'Janine Labrune', 'Owner', '67, rue des Cinquante Otages', 'Nantes', 'France'],
                    ['Eastern Connection', 'Ann Devon', 'Sales Agent', '35 King George', 'London', 'UK'],
                    ['Ernst Handel', 'Roland Mendel', 'Sales Manager', 'Kirchgasse 6', 'Graz', 'Austria']
                ],
                datafields: [
                    { name: 'CompanyName', type: 'string', map: '0' },
                    { name: 'ContactName', type: 'string', map: '1' },
                    { name: 'Title', type: 'string', map: '2' },
                    { name: 'Address', type: 'string', map: '3' },
                    { name: 'City', type: 'string', map: '4' },
                    { name: 'Country', type: 'string', map: '5' }
                ],
                datatype: 'array'
            };
        }
    }
</script>

<style>
</style>

<style src='./assets/styles/jqwidgets/jqx.base.css'></style>
<style src='./assets/styles/jqwidgets/jqx.material-green.css'></style>

Also, I would like to suggest you look at this tutorial (there you could find a lot of useful information).
Please, let me know if you have trouble with this.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello Gav,

I am not sure what exactly you searching for.
But I would like to suggest you look at this demo.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello rr_187,

Could you clarify your case?
Also, you could read my previous post where is provided a code snippet.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello youngmehran,

You could try to bind to the click event in the renderCallbacks object.
Please, take a look at this code snippet:

renderCallbacks: {
                    '*': (element, value) => {
						element.click(function () {
							console.log("Click on:", element[0]);
						});
                    }
                }

After that, you could use the native React approaches to redirect to a specific page.
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello Oleg,

Please, take a look at this example:

<!DOCTYPE html>
<html lang="en">

<head>
    <title id="Description">jqxScheduler Recurring appointments example
    </title>
    <meta name="description" content="Javascript Scheduler Recurring Appointments example" />
    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>

    <script type="text/javascript" src="../../../jqwidgets/jqxcore.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/jqxdata.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdate.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxscheduler.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxscheduler.api.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/globalization/globalize.culture.de-DE.js"></script>
    <script type="text/javascript" src="../../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var appointments = new Array();

            var appointment1 = {
                id: "id4",
                description: "",
                style: "#AA4643",
                location: "",
                subject: "New Projects Planning",
                calendar: "Room 2",
                from: new Date(2017, 10, 22, 8, 0, 0),
                to: new Date(2017, 10, 22, 13, 0, 0)
            }

            var appointment2 = {
                id: "id5",
                description: "",
                style: "#89A54E",
                location: "",
                subject: "Interview with James",
                calendar: "Room 1",
                from: new Date(2017, 10, 25, 13, 0, 0),
                to: new Date(2017, 10, 25, 15, 0, 0)
            }

            var appointment3 = {
                id: "id6",
                description: "",
                style: "#71588F",
                location: "",
                subject: "Interview with Nancy",
                calendar: "Room 2",
                from: new Date(2017, 10, 26, 14, 0, 0),
                to: new Date(2017, 10, 26, 16, 0, 0)
            }

            var appointment4 = {
                id: "id7",
                description: "",
                style: "#307DD7",
                location: "",
                subject: "Daily Meeting",
                calendar: "Room 1",
                recurrenceRule: "FREQ=DAILY;",
                recurrenceException: "2017-11-24 09:00:00,2017-11-26 12:00:00",
                from: new Date(2017, 10, 23, 10, 0, 0),
                to: new Date(2017, 10, 23, 11, 0, 0)
            }

            appointments.push(appointment1);
            appointments.push(appointment2);
            appointments.push(appointment3);
            appointments.push(appointment4);

            // prepare the data
            var source = {
                dataType: "array",
                dataFields: [{
                    name: "id",
                    type: "string"
                }, {
                    name: "description",
                    type: "string"
                }, {
                    name: "location",
                    type: "string"
                }, {
                    name: "subject",
                    type: "string"
                }, {
                    name: "calendar",
                    type: "string"
                }, {
                    name: "recurrenceRule",
                    type: "string"
                }, {
                    name: "recurrenceException",
                    type: "string"
                }, {
                    name: "style",
                    type: "string"
                }, {
                    name: "from",
                    type: "date"
                }, {
                    name: "to",
                    type: "date"
                }],
                id: "id",
                localData: appointments
            };
            var adapter = new $.jqx.dataAdapter(source);
            $("#scheduler").jqxScheduler({
                date: new $.jqx.date(2017, 11, 23),
                width: getWidth("Scheduler"),
                height: 600,
                source: adapter,
                ready: function() {
                    $("#scheduler").jqxScheduler("ensureAppointmentVisible", "id7");
                },
                editDialogCreate: function(dialog, fields, editAppointment) {
                    // hide repeat option
                    fields.repeatContainer.hide();
                    // hide status option
                    fields.statusContainer.hide();
                    // hide timeZone option
                    fields.timeZoneContainer.hide();
                    // hide color option
                    fields.colorContainer.hide();

                    fields.subjectLabel.html("Title");
                    fields.locationLabel.html("Where");
                    fields.fromLabel.html("Start");
                    fields.toLabel.html("End");
                    fields.resourceLabel.html("Calendar");

                    var deleteButton = fields.deleteButton;
                    deleteButton.click(function() {
                        var appointments = $("#scheduler").jqxScheduler("getAppointments");
                        var appointmentsData = $("#scheduler").jqxScheduler("getDataAppointments");
                        appointments.forEach((element, index) => {
                            if (element.recurrenceException) {
                                console.log("index:", index, "exception:", element.recurrenceException, "exception as in DataAdapter:", appointmentsData[index].recurrenceException);
                            }
                        });

                    });
                },
                appointmentDataFields: {
                    from: "from",
                    to: "to",
                    id: "id",
                    description: "description",
                    location: "place",
                    style: "style",
                    subject: "subject",
                    resourceId: "calendar",
                    recurrencePattern: "recurrenceRule",
                    recurrenceException: "recurrenceException"
                },
                view: "monthView",
                views: [
                    "dayView",
                    "weekView",
                    "monthView"
                ]
            });
        });
    </script>
</head>

<body class="default">
    <div id="scheduler"></div>
</body>

</html>

You could try to delete one occurrence and after that, you could find in the console one message with all deleted/missed occurrences.
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello dan123,

Could you clarify it?
You do customization over the groupsrenderer callback on the groups.
The methods related to the grouping and paging features will be useful here.
More details about them you could find on the API Documentation page.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello youngmehran,

Please, clarify it.
As I understand you need to understand how to implement this tooltip.
One option is to check the native JavaScript demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreemap/defaultfunctionality.htm?light
Another option is to find the demo in the download package in the \demos\React-TSX\treemap\defaultfunctionality path.
There you could find the source code of this demo.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello rmzq,

The idea of using this callback is to fill the gaps.
You could choose suitable for you logic to do this.
For example, you could add additional logic to check the next point (recursively).
Add all empty points in one array and get the average value to fill them.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello jgarcias,

You could use the begincelledit method to start editing a specific cell.
More details about this and other methods could find on the API Documentation page.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello ad-lightbeam,

I tested this example and it seems to work fine:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this example is demonstrated the auto-complete feature of jqxComboBox. Suggestions are displayed when at least two characters are entered into the field.</title>
    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
    <script type="text/javascript" src="../../../scripts/jquery-1.12.4.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/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "jsonp",
                datafields: [
                    { name: "countryName" },
                    { name: "name" },
                    { name: "population", type: "float" },
                    { name: "continentCode" },
                    { name: "adminName1" }
                ],
                url: "http://api.geonames.org/searchJSON",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    username: "jqwidgets"
                }
            };

            var dataAdapter = new $.jqx.dataAdapter(source,
                {
                    formatData: function (data) {
                        if ($("#jqxcombobox").jqxComboBox("searchString") != undefined) {
                            data.name_startsWith = $("#jqxcombobox").jqxComboBox("searchString");
                            return data;
                        }
                    }
                }
            );

            $("#jqxcombobox").jqxComboBox(
            {
                width: 250,
                height: 25,
                source: dataAdapter,
                remoteAutoComplete: true,
                autoDropDownHeight: true,               
                selectedIndex: 0,
                displayMember: "name",
                valueMember: "countryName",
                renderer: function (index, label, value) {
                    var item = dataAdapter.records[index];
                    if (item != null) {
                        var label = item.name + "(" + item.countryName + ", " + item.adminName1 + ")";
                        return label;
                    }
                    return "";
                },
                renderSelectedItem: function(index, item)
                {
                    var item = dataAdapter.records[index];
                    if (item != null) {
                        var label = item.name;
                        return label;
                    }
                    return "";   
                },
                search: function (searchString) {
                    dataAdapter.dataBind();
                }
            });
        });
    </script>
</head>
<body class="default">
    <div id="jqxWidget" style="font-size: 13px; font-family: Verdana; float: left;">
        <span>Search for a City:</span>
        <div style="margin-top: 7px; margin-bottom: 5px;" id="jqxcombobox"></div>
        <span>ex: be</span>
    </div>

	<div style="position: absolute; bottom: 5px; right: 5px;">
		<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
	</div>
</body>
</html>

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello jasperdd,

I would like to ask you for more details or one simple example that demonstrates your case.
Meanwhile, I remember similar cases and I would like to suggest you try to change the days (the first day of the week) from the localization property.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello rmzq,

Thank you for this example.
I would like to suggest you try to use the beforeLoadComplete callback to handle this.
Please, take a look at this example:
http://jsfiddle.net/txhi/c78x9jht/
Also, you could try to use a smarter approach (as you add additional datafield as a meta-data and when there is marked with value for “NaN” item then set the desired color).

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello user2513,

This is an incorrect use of our library.
Please, try to use the mentioned methods.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello jgarcias,

Please, take a look at this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customwidgetscolumn.htm?light
You could update the widget in this callback.
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts