jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 6,511 through 6,525 (of 6,536 total)

Author

Posts

August 17, 2012 at 8:33 am in reply to: How to make a cell in the Grid as non editable based on cell value How to make a cell in the Grid as non editable based on cell value #6827

Dimitar

Participant

Hello DollyB,

Here is an example – if a cell value is less than 5, the cell cannot be edited. You can write a condition of your choice.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Array data.</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.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/jqxgrid.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="jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbutton.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 100; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { }
            });
            $("#jqxgrid").jqxGrid(
            {
                selectionmode: 'singlecell',
                editable: true,
                editmode: 'click',
                width: 670,
                source: dataAdapter,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            $("#jqxgrid").bind('cellbeginedit', function (event) {
               var column = args.datafield;
               var row = args.rowindex;
               var value = args.value;
               // condition follows
               if (value<5) {
                    $("#jqxgrid").jqxGrid('endcelledit', row, column, true);
               }
            });
        });
    </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,
Dimitar

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

August 16, 2012 at 8:57 am in reply to: how to remove selected rows by using knockout how to remove selected rows by using knockout #6804

Dimitar

Participant

Hello cherry,

Here is an example on how to remove a specific row (check the comments for clarification):

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to integrate jqxGrid with knockout.js.
    </title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="knockout-2.1.0.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/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.pager.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">
        $(document).ready(function () {
            var theme = 'classic';
            var initialData = [
                { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
                { name: "Speedy Coyote", sales: 89, price: 190.00 },
                { name: "Furious Lizard", sales: 152, price: 25.00 },
                { name: "Indifferent Monkey", sales: 81, price: 99.95 },
                { name: "Brooding Dragon", sales: 65, price: 63 },
                { name: "Ingenious Tadpole", sales: 394, price: 0.35 },
                { name: "Optimistic Snail", sales: 420, price: 1.50 }
            ];
            // create GridModel.
            var GridModel = function (items) {
                this.items = ko.observableArray(items);
                this.addItem = function () {
                    this.items.push({ name: "New item", sales: Math.round(Math.random() * 100), price: Math.round(Math.random() * 100) });
                };
                this.removeLastItem = function () {
                    this.items.pop();
                };
                this.removeItem = function () {
                    $('#jqxgrid').jqxGrid('deleterow', ($('#numberinput').val())); // removes a row depending on input's value
                };
            };
            var gridModel = new GridModel(initialData);
            ko.applyBindings(gridModel);
          
            var source = {
                localdata: gridModel.items,
                datatype: 'local'
            }
            // create jqxGrid.
            $("#jqxgrid").jqxGrid(
            {
                source: source,
                autoheight: true,
                pageable: true,
                theme: theme,
                columns: [
                  { text: 'Name', dataField: 'name', width: 200 },
                  { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
                  { text: 'Price', dataField: 'price', cellsformat: 'c2', cellsalign: 'right' }
               ]
            });
            $('#addButton').jqxButton({ theme: theme });
            $('#removeLastButton').jqxButton({ theme: theme });
            $('#removeButton').jqxButton({ theme: theme });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
        <div style="margin-top: 10px;">
            <input id="addButton" type="button" data-bind='click: addItem' value="Add Item" />
            <input id="removeLastButton" type="button" data-bind='click: removeLastItem' value="Remove Last Item" />
            <input id="removeButton" type="button" data-bind='click: removeItem' value="Remove Item №:" />
            <input id="numberinput" type="text" value="0" /> <!-- value shows row selected for removal -->
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

August 15, 2012 at 12:06 pm in reply to: column editing and sorting column editing and sorting #6794

Dimitar

Participant

Hello cherry,

Yes, there is a simple way of disabling the sortable or editable feature of a column. Here is a code excerpt which does that (the first column is neither sortable nor editable, all the others are):

$("#jqxgrid").jqxGrid(
{
    source: source,
    sortable: true,
    editable: true,
    columns: [
        { text: 'First Name', datafield: 'firstname', width: 100, sortable: false, editable: false }, // the first column is neither sortable nor editable
        { text: 'Last Name', datafield: 'lastname', width: 100 },
        { text: 'Product', datafield: 'productname', width: 180 },
        { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
        { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
        { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
    ]
});

Best Regards,
Dimitar

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

August 14, 2012 at 1:16 pm in reply to: Issues with modal Popup Issues with modal Popup #6775

Dimitar

Participant

Hello DollyB,

Your second issue is due to the unneeded space in the close tag of textarea. Instead of:

< /textarea>

you should have:

</textarea>

We will have to further consider your first issue.

Best Regards,
Dimitar

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

August 14, 2012 at 10:03 am in reply to: Multiple selection in drop down list Multiple selection in drop down list #6774

Dimitar

Participant

Hello Jqdev,

JqxDropDownList allows selection of only one item. If you use jqxListBox, you will be able to select multiple items by spicifying:

$("#jqxListBox").jqxListBox({multiple: true});

Best Regards,
Dimitar

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

August 13, 2012 at 1:04 pm in reply to: Links inside the Expander Header Links inside the Expander Header #6752

Dimitar

Participant

Hello Sundaresh LN,

Here is an example with a button in the Header. When clicked, there is an alert. The jqxExpander is expanded/collapsed by doubleclicking the Header.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Expander Sample</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxExpander
            $("#jqxexpander").jqxExpander({ width: 200, height: 100, toggleMode: 'dblclick' }); // The jqxExpander expands/collapses when the Header is doubleclicked
            $("#jqxbutton").jqxButton({ width: 75, height: 25 });
            $("#jqxbutton").click(function(){
                alert("Button is clicked!");
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxexpander'>
        <!--Header-->
        <div>
            <button id="jqxbutton">Button</button>
        </div>
        <!--Content-->
        <div>
            Content
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

August 13, 2012 at 12:16 pm in reply to: Move from cell to cell Move from cell to cell #6749

Dimitar

Participant

Hi Falken,

As far as I know, there is no other way. Once you start editing a jqxGrid cell, the arrow keys are used to navigate inside the editor, unlike Microsoft Excel.

Best Regards,
Dimitar

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

August 13, 2012 at 11:10 am in reply to: Move from cell to cell Move from cell to cell #6746

Dimitar

Participant

Hi Falken,

Here is a way of accessing the right or left cell in edit mode by pressing a key / key combination (excerpt from jqxGrid’s documentation):
Tab key is pressed – Selects the right cell. If the Grid is in edit mode, saves the edit cell’s value, closes its editor, selects the right cell and opens its editor.
Shift+Tab keys are pressed – Selects the left cell. If the Grid is in edit mode, saves the edit cell’s value, closes its editor, selects the left cell and opens its editor.

However, this only works for accessing cells on the same row.

Best Regards,
Dimitar

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

August 13, 2012 at 10:45 am in reply to: Dynamic Height for Window Dynamic Height for Window #6743

Dimitar

Participant

Hello rfladebo2,

To set the height of the window dynamicly you need height: ‘auto’ and you also need to set the content of the Content div before you create the jqxWindow. Here is an example with two buttons. The first one sets the content and creates the window and the second one – vice versa. You can clearly see the difference.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Window CSS Styling Sample</title>
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css"/>
<link rel="stylesheet" href="jqwidgets/styles/jqx.summer.css" type="text/css"/>
<style type="text/css">
#cntnt
{
overflow-y: hidden;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
</head>
<body>
<div id='content'>
<script type="text/javascript">
    $(document).ready(function () {
        $("#btn1").click(function(){
            $("#cntnt").html("In this case, the content is set first, then the jqxWindow is created. Height: 'auto' works properly.");
            $("#jqxwindow ").jqxWindow({ height: 'auto', width: 150, theme: 'summer', isModal: true }).css({ "visibility" : "visible" });
        });
        $("#btn2").click(function(){
            $("#jqxwindow ").jqxWindow({ height: 'auto', width: 150, theme: 'summer', isModal: true }).css({ "visibility" : "visible" });
            $("#cntnt").html("In this case, the jqxWindow is created first, then the content is set.");
        });
    });
</script>
<div id="buttons">
<button id="btn1">First case - proper height</button>
<button id="btn2">Second case - improper height</button>
</div>  
<div id='jqxwindow' style="visibility:hidden">
	<div id="hdr"><img src="MyPicture.jpg" width="120" height="30" /></div>
	<div id="cntnt">Initial content - does not show.</div>
</div>
</div>
</body>
</html>

Best Regards,
Dimitar

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

August 13, 2012 at 10:05 am in reply to: Move from cell to cell Move from cell to cell #6741

Dimitar

Participant

Hello Falken,

You can move through cells using the arrow keys and start editing with Enter. When you have finished editing, press Enter again and select another cell. The example below illustrates this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Array data.</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.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/jqxgrid.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">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 100; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { }
            });
            $("#jqxgrid").jqxGrid(
            {
                selectionmode: 'singlecell', // allows selecting a single cell
                editable: true, // allows editing a cell
                width: 670,
                source: dataAdapter,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            $('#jqxgrid').jqxGrid('selectcell', 0, 'firstname'); // selects a cell, optional
        });
    </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,
Dimitar

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

August 13, 2012 at 6:30 am in reply to: cellvaluechanged: args.value is undefined cellvaluechanged: args.value is undefined #6737

Dimitar

Participant

Hello timo75,

Use args.newvalue instead of args.value:

$("#jqxgrid").bind('cellvaluechanged', function (event) {
   var column = args.datafield;
   var row = args.rowindex;
   var value = args.newvalue;
   var oldvalue = args.oldvalue;
});

This should solve the problem.

Best Regards,
Dimitar

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

August 10, 2012 at 12:13 pm in reply to: How can I make a chart with 2 stacked columns ? How can I make a chart with 2 stacked columns ? #6722

Dimitar

Participant

Hello LucianoUY,

The following example may be what you are looking for:

<html lang="en">
<head>
    <title id='Description'>jQuery Chart Column Series Example</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
		
            // prepare chart data
            var departmentData = [
                    { Quarter:'Q1, 2011', Department1:300, Department2:500, Department3:1000},
                    { Quarter:'Q2, 2011', Department1:200, Department2:500, Department3:700},
                    { Quarter:'Q3, 2011', Department1:350, Department2:590, Department3:100},
                    { Quarter:'Q4, 2011', Department1:200, Department2:500, Department3:1000},
                    { Quarter:'Q1, 2012', Department1:700, Department2:200, Department3:1100},
                    { Quarter:'Q2, 2012', Department1:20, Department2:300, Department3:600},
                    { Quarter:'Q3, 2012', Department1:800, Department2:590, Department3:130},
                    { Quarter:'Q4, 2012', Department1:1000, Department2:100, Department3:120}
                ];
            // prepare jqxChart settings
            var settings = {
                title: "Sales by department",
                description: "Sales by department years 2011 and 2012",
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: departmentData,
                categoryAxis:
                    {
                        dataField: 'Quarter',
                        showGridLines: false
                    },
                colorScheme: 'scheme05',
                seriesGroups:
                    [
                        {
                            type: 'stackedcolumn',
                            columnsGapPercent: 30,
                            seriesGapPercent: 0,
                            valueAxis:
                            {
                                minValue: 0,
                                maxValue: 1000,
                                unitInterval: 100,
                                description: 'Sales per quarter'
                            },
                            series: [
                                    { dataField: 'Department1', displayText: 'Department 1'},
                                    { dataField: 'Department2', displayText: 'Department 2'},
                                    { dataField: 'Department3', displayText: 'Department 3'}
                                ]
                        }
                    ]
            };
            
            // select the chartContainer DIV element and render the chart.
            $('#chartContainer').jqxChart(settings);
        });
    </script>
</head>
<body style="background:white;">
	<div id='chartContainer' style="width:600px; height: 400px"/>
</body>
</html>

Best Regards,
Dimitar

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

August 9, 2012 at 8:23 am in reply to: Tab header distorts when hidden then shown Tab header distorts when hidden then shown #6695

Dimitar

Participant

Hello Tim,

Can you provide us with a sample of your code so we can better understand your issue and be able to help?

Best Regards,
Dimitar

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

August 7, 2012 at 2:42 pm in reply to: Background color of a Cell Background color of a Cell #6665

Dimitar

Participant

Hello Alejandro,

You can change the background color of cells by changing the CSS of a number of classes:

jqx-grid-cell – applied to the grid cells.
jqx-grid-cell-sort – applied to the grid cells in the sort column.
jqx-grid-group-cell – applied to the cells in a grouping row.
jqx-grid-details-cell – applied to the cells in a details row.
jqx-grid-cell-alt – alternating cells style. This is applied to the cells in the alternating rows.
jqx-grid-cell-pinned – applied to the cells in a pinned column.
jqx-grid-cell-selected – applied to the cells in a selected row.
jqx-grid-cell-hover – applied to the cells in a hovered row.

In the following example, all cells are green, except for the selected cell, which is teal.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Array data.</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <style type="text/css">
    <!-- applied to all cells: -->
    .jqx-grid-cell
    {
    background-color: Green;
    }
    <!-- applied to selected cells: -->
    .jqx-grid-cell-selected
    {
    background-color: Teal;
    }
    </style>
    <script type="text/javascript" src="jquery-1.7.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/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 100; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { }
            });
            $("#jqxgrid").jqxGrid(
            {
                selectionmode: 'singlecell',
                width: 670,
                source: dataAdapter,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            var cell = $('#jqxgrid').jqxGrid('selectcell', 2, 'firstname'); // selects a cell
        });
    </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,
Dimitar,

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

August 6, 2012 at 1:40 pm in reply to: Problem to set the minimum value after slider widget is initialized Problem to set the minimum value after slider widget is initialized #6626

Dimitar

Participant

Hi Mark,

Here is an example based on yours. A button changes the min and max and also sets the value. We have not encountered any issues in it. It works without the button, too.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Slider Sample</title>
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css"/>
<link rel="stylesheet" href="jqwidgets/styles/jqx.summer.css" type="text/css"/>
<script type="text/javascript" src="jquery-1.7.2.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/jqxslider.js"></script>
</head>
<body>
<div id='content'>
  <script type="text/javascript">
      $(document).ready(function () {
          $("#jqxslider").jqxSlider({ theme: 'summer', width: 370, value: 2, max: 35, min: 10, mode: 'fixed', step: 0.01, tooltip: false});
          $('#jqxslider').bind('change', function (event) {
                $('#jqxsliderValue').html('Value: ' + event.args.value);
          });
          $("#btn").click(function(){
                $("#jqxslider").jqxSlider({min: 10, max: 20});
                $("#jqxslider").jqxSlider('setValue', 15);
          });
      });
  </script>
  <div id="jqxsliderValue">Value:</div>
  <div id='jqxslider'></div>
  <button id="btn">Set min, max and value</button>
</div>
</body>
</html>

Best Regards,
Dimitar,

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

Author

Posts

Viewing 15 posts - 6,511 through 6,525 (of 6,536 total)

← 1 … 434 435 436 →