jQWidgets Forums

Forum Replies Created

Viewing 5 posts - 781 through 785 (of 785 total)

← 1 … 52 53

Author

Posts

August 20, 2014 at 10:22 am in reply to: theme grid theme grid #58547

Nadezhda

Participant

Hello sasha02,

I am giving you an example below. I hope it would be helpful.

<!DOCTYPE html>
<html lang="en">
<head>    
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <link href="../../jqwidgets/styles/jqx.darkblue.css" rel="stylesheet" />
    <link href="../../jqwidgets/styles/jqx.metro.css" rel="stylesheet" />
    <link href="../../jqwidgets/styles/jqx.shinyblack.css" rel="stylesheet" />
    <link href="../../jqwidgets/styles/jqx.office.css" rel="stylesheet" />
    <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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(20);

            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failder.
                    commit(true);
                },
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'date', type: 'date' }
                ]
            };

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

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                theme: "darkblue",
                width: 850,
                source: dataAdapter,
                editable: true,
                enabletooltips: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 120 },
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 120 },
                  { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
                  {
                      text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'd',
                      validation: function (cell, value) {
                          if (value == "")
                              return true;

                          var year = value.getFullYear();
                          if (year >= 2015) {
                              return { result: false, message: "Ship Date should be before 1/1/2015" };
                          }
                          return true;
                      }
                  },
                  {
                      text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 150) {
                              return { result: false, message: "Quantity should be in the 0-150 interval" };
                          }
                          return true;
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
                      }
                  },
                  {
                      text: 'Price', datafield: 'price', align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 15) {
                              return { result: false, message: "Price should be in the 0-15 interval" };
                          }
                          return true;
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ digits: 3 });
                      }

                  }
                ]
            });

            // events
            $("#jqxgrid").on('cellbeginedit', function (event) {
                var args = event.args;
                $("#cellbegineditevent").text("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
            });

            $("#jqxgrid").on('cellendedit', function (event) {
                var args = event.args;
                $("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
            });

            var themes = [
                   "darkblue",
                   "metro",
                   "shinyblack",
                   "office"
            ];

            $("#dropDownList").jqxDropDownList({ source: themes, selectedIndex: 0, width: '200', height: '25' });
            $("#dropDownList").on('select', function (event) {
                if (event.args) {
                    var item = event.args.item;
                    if (item) {
                        $('#jqxgrid').jqxGrid({ theme: item.label });
                    }
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
        <div style="font-size: 12px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif; margin-top: 30px;">
            <div id="cellbegineditevent"></div>
            <div style="margin-top: 10px;" id="cellendeditevent"></div>
        </div>
        <div id="dropDownList"></div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

August 19, 2014 at 8:14 am in reply to: jqxWindow & jqxTabs jqxWindow & jqxTabs #58504

Nadezhda

Participant

Hello adarsha,

You can integrate jqxTabs with other widgets (such as jqxGrid) as you add the ‘initTabContent’ callback function of jqxTabs. Please, see the following demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/integration.htm?arctic.

Best Regards,
Nadezhda

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

August 19, 2014 at 6:38 am in reply to: Format number input Format number input #58499

Nadezhda

Participant

Hello Katashov Dima,

For adding some custom parameters to the editor you can use the column ‘createeditor’ callback function. This function is called when the editor is created.
In this case you need to set the ‘groupSeparator’ property:

{
    text: 'Quantity', datafield: 'quantity', width: 200, align: 'right', cellsalign: 'right', columntype: 'numberinput',
      createeditor: function (row, cellvalue, editor) {
        editor.jqxNumberInput({ decimalDigits: 2, digits: 7, groupSeparator: " ", inputMode: 'advanced' });
    }
},

Best Regards,
Nadezhda

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

August 19, 2014 at 5:51 am in reply to: jqxMenu Keyboard Navigation jqxMenu Keyboard Navigation #58497

Nadezhda

Participant

Hello Tri,

Unfortunately, jqxMenu widget doesn’t support keyboard navigation.

Best Regards,
Nadezhda

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

August 14, 2014 at 8:01 am in reply to: jqxcombobox with custom attribute jqxcombobox with custom attribute #58355

Nadezhda

Participant

Hello annfredin,

ComboBox items can have label (displayMember) and value (valueMember) as shown in the demo Binding to JSON Data.

Best Regards,
Nadezhda

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

Author

Posts

Viewing 5 posts - 781 through 785 (of 785 total)

← 1 … 52 53