jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 751 through 765 (of 785 total)

← 1 … 50 51 52 53 →

Author

Posts

September 3, 2014 at 10:16 am in reply to: dropdownlist scrollbar dropdownlist scrollbar #59069

Nadezhda

Participant

Hello aldo86,

You can not take out the horizontal scrollbar. Horizontal scrollbar is showing automatically when it is needed.

Best Regards,
Nadezhda

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

September 3, 2014 at 8:03 am in reply to: Even if selctionmode is checkbox can we able to select a cell Even if selctionmode is checkbox can we able to select a cell #59058

Nadezhda

Participant

Hello rani,

Unfortunately, that type of selection is not supported.

Best Regards,
Nadezhda

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

September 2, 2014 at 7:31 am in reply to: showing tooltip programatically showing tooltip programatically #59022

Nadezhda

Participant

Hello Rares,

Unfortunately, we don’t have API for programatically showing tooltip.

Best Regards,
Nadezhda

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

September 2, 2014 at 6:51 am in reply to: id + value in jqxListBox id + value in jqxListBox #59021

Nadezhda

Participant

Hello Hanen,

Please, find below an example which shows how to get id and label in jqxListBox:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <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>
    <script type="text/javascript" src="../../scripts/demos.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/jqxlistbox.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            var source = [{
                label: "Peppermint Hot Chocolate",
                value: "Chocolate Beverage"                
            }, {
                label: "Salted Caramel Hot Chocolate",
                value: "Chocolate Beverage"                
            }, {
                label: "White Hot Chocolate",
                value: "Chocolate Beverage"               
            }, {
                label: "Caffe Americano",
                value: "Espresso Beverage"                
            }, {
                label: "Caffe Latte",
                value: "Espresso Beverage"                
            }, {
                label: "Caffe Mocha",
                value: "Espresso Beverage"               
            }, {
                label: "Cappuccino",
                value: "Espresso Beverage"                
            }, {
                label: "Caramel Brulee Latte",
                value: "Espresso Beverage"                
            }, {
                label: "Caramel Macchiato",
                value: "Espresso Beverage"
            }, {
                label: "Peppermint Hot Chocolate",
                value: "Espresso Beverage"
            }, {
                label: "Cinnamon Dolce Latte",
                value: "Espresso Beverage"
            }, {
                label: "Eggnog Latte",
                value: "Espresso Beverage"
            }, {
                label: "Espresso",
                value: "Espresso Beverage"
            }, {
                label: "Espresso Con Panna",
                value: "Espresso Beverage"
            }, {
                label: "Espresso Macchiato",
                value: "Espresso Beverage"
            }, {
                label: "Flavored Latte",
                value: "Espresso Beverage"
            }, {
                label: "Gingerbread Latte",
                value: "Espresso Beverage"
            }, {
                label: "White Chocolate Mocha",
                value: "Espresso Beverage"
            }, {
                label: "Skinny Peppermint Mocha",
                value: "Espresso Beverage"
            }, {
                label: "Skinny Flavored Latte",
                value: "Espresso Beverage"               
            }, {
                label: "Pumpkin Spice Latte",
                value: "Espresso Beverage"
            }, {
                label: "Caffe Vanilla Frappuccino",
                value: "Frappuccino Blended Beverage"
            }, {
                label: "Caffe Vanilla Frappuccino Light",
                value: "Frappuccino Blended Beverage"
            }, {
                label: "Caramel Brulee Frappuccino",
                value: "Frappuccino Blended Beverage"
            }, {
                label: "Caramel Brulee Frappuccino Light",
                value: "Frappuccino Blended Beverage"
            }, {
                label: "Eggnog Frappuccino",
                value: "Frappuccino Blended Beverage"                
            }, {
                label: "Mocha Frappuccino",
                value: "Frappuccino Blended Beverage"               
            }, {
                label: "Tazo Green Tea Creme Frappuccino",
                value: "Frappuccino Blended Beverage"                
            }]
            // Create a jqxListBox
            $("#jqxWidget").jqxListBox({ source: source, width: 300, height: 300 });

            // update events.
            $("#jqxWidget").on('select', function (event) {
                if (event.args) {
                    var item = event.args.item;
                    if (item) {
                        var valueelement = $("<div></div>");
                        valueelement.text("Value: " + item.value);
                        var labelelement = $("<div></div>");
                        labelelement.text("Label: " + item.label);
                        $("#selectionlog").children().remove();
                        $("#selectionlog").append(labelelement);
                        $("#selectionlog").append(valueelement);
                    }
                }
            });
        });
    </script>
</head>
<body>
    <div id='content'>
        <div id='jqxWidget'>
        </div>
        <div style="font-size: 13px; font-family: Verdana;" id="selectionlog">
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

September 2, 2014 at 6:15 am in reply to: Linking column values to a java script fuinction Linking column values to a java script fuinction #59019

Nadezhda

Participant

Hello Vaibhav,

In the following demo you can learn how to use custom function and link in column value: http://www.jqwidgets.com/jquery-widgets-demo/mobiledemos/jqxgrid/editing.htm?(android)&=fullscreen.

Best Regards,
Nadezhda

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

September 1, 2014 at 12:48 pm in reply to: Field DataType in Request.QueryString Field DataType in Request.QueryString #59007

Nadezhda

Participant

Hello cainellin,

In the following help topic you can learn how to set additional variables to your server: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-extra-http-variables.htm. Such variables could be “datatype of filter” or something else.

Best Regards,
Nadezhda

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

September 1, 2014 at 11:09 am in reply to: Hide vertical lines Hide vertical lines #59002

Nadezhda

Participant

Hello Robert,

Please, find below an example which shows how to hide vertical lines:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting. 
    </title>
    <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>
    <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/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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> 
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <style>
       .jqx-grid-cell
       {
            border-right-color: transparent !important;
       } 
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/products.xml";

            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };

            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }

            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,                
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
     </div>
</body>
</html>

Best Regards,
Nadezhda

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

August 29, 2014 at 12:00 pm in reply to: Filter date calendar not displaying Filter date calendar not displaying #58940

Nadezhda

Participant

Hi mr_putersmit,

You may download again the last version of jQWidgets and begin with our demo.

Best Regards,
Nadezhda

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

August 29, 2014 at 10:32 am in reply to: Filter date calendar not displaying Filter date calendar not displaying #58935

Nadezhda

Participant

Hi mr_putersmit,

Did you include “globalize.js” because it is not included in “jqx-all.js” file?

Best Regards,
Nadezhda

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

August 29, 2014 at 10:10 am in reply to: rowselect event grid details row rowselect event grid details row #58934

Nadezhda

Participant

Hello hf,

Please, add IF check within your “rowselect” event handler. The event.target.id should be equal to your main Grid’s ID.
The event is raised when you select a row in the nested grid due to the JavaScript event bubbling concept.

Best Regards,
Nadezhda

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

August 29, 2014 at 8:42 am in reply to: Filter date calendar not displaying Filter date calendar not displaying #58927

Nadezhda

Participant

Hi mr_putersmit,

Could you, please, check the implementation on our demo and check again if you include all necessary scripts? It would be good to clear your browsing data like Browsing history and Cache.

Best Regards,
Nadezhda

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

August 29, 2014 at 6:30 am in reply to: cascaded filtering in Jqx Grid cascaded filtering in Jqx Grid #58923

Nadezhda

Participant

Hello aneeshmm,

Unfortunately, cascade filtering is not supported in jqxGrid.

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

August 29, 2014 at 6:13 am in reply to: Filter date calendar not displaying Filter date calendar not displaying #58922

Nadezhda

Participant

Hello mr_putersmit,

It is better to use the last version of jQWidgets. The features that you want to use are supported in our demo’s with version 3.4.0 so I suggest you to update your jQWidgets version and use widgets in the same way as in the demo’s and documentation.

Best Regards,
Nadezhda

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

August 28, 2014 at 12:24 pm in reply to: change row color after render change row color after render #58897

Nadezhda

Participant

Hello aldo86,

Here is an example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
    <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/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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../demos/sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };

            var highlightedRow = 1;
            var cellclass = function (row, columnfield, value) {
                var id = $('#jqxgrid').jqxGrid('getrowid', row);
                if (id == highlightedRow) {
                    return 'red';
                }
            }
            $("#jqxbutton").click(function () {
                highlightedRow = $("#inputField").val();
                $('#jqxgrid').jqxGrid('refresh');

            })
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250, cellclassname: cellclass },
                  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200, cellclassname: cellclass },
                  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200, cellclassname: cellclass },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100, cellclassname: cellclass },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', cellclassname: cellclass }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });
        });
    </script>
    <style>
        .red {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana;">
        <div id="jqxgrid">
        </div>
    </div>
    <input type="text" style="margin: 10px;" id="inputField" value="1" />
    <input type="button" style="margin: 10px;" id="jqxbutton" value="change highlighted row" />
</body>
</html>

I hope it would be helpful.

Best Regards,
Nadezhda

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

August 28, 2014 at 10:46 am in reply to: Filter date calendar not displaying Filter date calendar not displaying #58894

Nadezhda

Participant

Hello mr_putersmit,

For the first issue, please check if you include all necessary scripts (i.e jqxDateTimeInput,jqxCalendar and globalize.js) or you don’t use the last version of jQWidgets. In your code you are using “columntype: ‘DateTime’ “, which is incorrect, the correct value is ‘datetimeinput’.

For the second issue could you, please, provide us with some sample data in jsfiddle?

Best Regards,
Nadezhda

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

Author

Posts

Viewing 15 posts - 751 through 765 (of 785 total)

← 1 … 50 51 52 53 →