Mariya's Replies

Forum Replies Created

Viewing 15 posts - 211 through 225 (of 226 total)

← 1 … 14 15 16 →

Author

Posts

June 24, 2013 at 7:45 am in reply to: How to use JQwidgets for textarea input How to use JQwidgets for textarea input #23657

Mariya

Participant

Hi fvalbores,

Thank you for your interest in using jqWidgets. Unfortunately we do not have a textarea widget.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 24, 2013 at 7:42 am in reply to: Add new row to grid in the middle of rows Add new row to grid in the middle of rows #23656

Mariya

Participant

Hi Naresh,

Thank for your interest in jqxGrid. Unfortunately it is not possible to add new row in the middle of the Grid.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 24, 2013 at 7:41 am in reply to: how to use rowclick how to use rowclick #23655

Mariya

Participant

Hi als4e,

The ‘rowclick’ event is triggered when a row is clicked. You can use it as shown in jqxWidgets’s Grid documentation:

$('#jqxGrid').on('rowclick', function (event) 
{
    var args = event.args;
    var row = args.rowindex;
});

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 21, 2013 at 8:41 am in reply to: placeholder does not work in IE9 placeholder does not work in IE9 #23560

Mariya

Participant

Hi snowyl,

If you want to use a placeholder of the jqxValidator you should use at least Internet Explorer 10. Previous versions of IE do not support the placeholder attribute of the tag.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 21, 2013 at 8:35 am in reply to: Pinned vs Hidden Column Pinned vs Hidden Column #23559

Mariya

Participant

Hi nikitaso,

First of all if you want to have a pinned column you can use the ‘pinned’ property set to true. Secondly to hide a column you can use the ‘hidden’ property set to true as well. Please take a look at the following example:

<!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.9.0.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/jqxdropdownlist.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.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var url = "../sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName' },
                    { name: 'QuantityPerUnit' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'UnitsOnOrder', type: 'float' },
                    { name: 'ReorderLevel', type: 'float' },
                    { name: 'CategoryID', type: 'int' }
               ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };
            var categories = {};
            var categoriesurl = '../sampledata/categories.xml';
            $.ajax({
                async: false,
                url: categoriesurl,
                success: function (data, status, xhr) {
                    categories = $("Category", data);
                }
            });
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: source,
                theme: theme,
                sortable: true,
                pageable: true,
                autoheight: true,
                columns: [
                  { text: 'Product Name', datafield: 'ProductName', width: 250, pinned: true, hidden: true },
                  { text: 'Category', datafield: 'CategoryID', width: 80, cellsalign: 'right' },
                  { text: 'Quantity Per Unit', datafield: 'QuantityPerUnit', width: 200, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'UnitPrice', width: 100, cellsformat: 'c2', cellsalign: 'right' },
                  { text: 'Units On Order', datafield: 'UnitsOnOrder', width: 110, cellsalign: 'right' },
                  { text: 'Reorder Level', datafield: 'ReorderLevel', width: 100, cellsalign: 'right' }
               ]
            });
        });
    </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 Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 21, 2013 at 8:30 am in reply to: Make Row Read-Only Make Row Read-Only #23558

Mariya

Participant

Hi Syai,

Please take a look at the provided demo at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/disableeditingofrows.htm?web
If you have any further questions do not hesitate to contact us.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 21, 2013 at 8:14 am in reply to: Dynamic Radio Button Group Dynamic Radio Button Group #23557

Mariya

Participant

Hi rskbuvan,

You can not have radio buttons in the jqxDropDownList. But if you want to have a widget with a similar look you can create a jqxDropDownButton and have jqxRadioButton in it. Take a look at the following example:

<!DOCTYPE html>
<html lang="en">
<head>
    
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
       <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxTooltip
            var theme = getDemoTheme();
            $("#dropDownButton").jqxDropDownButton({ width: 150, height: 25, theme: theme});
            $("#dropDownButton").jqxDropDownButton ("open");
            $("#jqxRadioButton").jqxRadioButton({ width: 250, height: 25, checked: true, theme: theme });
            '<br/>'
            $("#jqxRadioButton2").jqxRadioButton({ width: 250, height: 25, theme: theme });
            $("#jqxRadioButton3").jqxRadioButton({ width: 250, height: 25, checked: true, theme: theme });
            $("#jqxRadioButton4").jqxRadioButton({ width: 250, height: 25, theme: theme });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style='float: left;' id="dropDownButton">
           
          <div style='margin-top: 10px;' id='jqxRadioButton'>
            12 Months Contract</div>
        <div style='margin-top: 10px;' id='jqxRadioButton2'>
            <span>6 Months Contract</span>        </div>
     
             <div style='margin-top: 10px;' id='jqxRadioButton3'>
            3 Months Contract</div>
        <div style='margin-top: 10px;' id='jqxRadioButton4'>
            <span>9 Months Contract</span>
        </div>
       </div>
    </div>
</body>
</html>

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 21, 2013 at 7:53 am in reply to: Set Column Width Dynamically Set Column Width Dynamically #23553

Mariya

Participant

Hi Syai,

In order to show the columns with a different width when the loading of the jqxGrid is complete you can use the ‘ready’ function and the ‘setcolumnproperty’ method as shown:

<!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.9.0.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.selection.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // prepare the data
            var data = {};
            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"
            ];
            var generaterow = function (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;
                return row;
            }
            for (var i = 0; i < 10; i++) {
                var row = generaterow(i);
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "local",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ],
                addrow: function (rowid, rowdata, position, commit) {
                    // synchronize with the server - send insert command
                    // call commit with parameter true if the synchronization with the server is successful 
                    //and with parameter false if the synchronization failed.
                    commit(true);
                },
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                ready: function () {
                    $("#jqxgrid").jqxGrid('setcolumnproperty', 'quantity', 'width', 300);
                },
                width: 500,
                height: 350,
                source: dataAdapter,
                theme: theme,
                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: 100, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
          
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div style="float: left;" id="jqxgrid">
        </div>
        <div style="margin-left: 10px; float: left;">
           
        </div>
    </div>
</body>
</html>

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 20, 2013 at 1:37 pm in reply to: text align left text align left #23503

Mariya

Participant

Hi shardik,

In order to set the text align to left in the jqxNumberInput you can use the ‘textAlign’ property as shown:

$("#jqxNumberInput").jqxNumberInput({ textAlign: "left" });

If you have any further questions do not hesitate to contact us.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 20, 2013 at 12:44 pm in reply to: "sortable" crashes my Grid "sortable" crashes my Grid #23499

Mariya

Participant

Hi swisspen,

In case you miss some references in the future, you may open your Browser’s Console to see the thrown errors or warnings.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 20, 2013 at 11:04 am in reply to: Radio Button Group | Get Value Radio Button Group | Get Value #23492

Mariya

Participant

Hi rskbuvan,

Please take a look at the following example:

<!DOCTYPE html>
<html lang="en">
<head>
    
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
     <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            $("#jqxRadioButton").jqxRadioButton({ width: 250, height: 25, checked: true, theme: theme });
            $("#jqxRadioButton2").jqxRadioButton({ width: 250, height: 25, theme: theme });
            $("#Button").jqxButton({ theme: theme });
            $('#Button').on('click', function () {
                var checked = $('#jqxRadioButton').jqxRadioButton('checked');
                var checked2 = $('#jqxRadioButton2').jqxRadioButton('checked');
                if (checked == true) {
                    alert("12 months is checked");
                }
                else if (checked2 == true) {
                    alert("6 months is checked");
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style='font-family: Verdana Arial; font-size: 12px; width: 400px;'>
        <h3>
            House Contract</h3>
        <div style='margin-top: 10px;' id='jqxRadioButton'>
            12 Months Contract</div>
        <div style='margin-top: 10px;' id='jqxRadioButton2'>
            <span>6 Months Contract</span></div>
        <div style='margin-top: 10px;' id='Button'>
            <span>Click Me!</span></div>
    </div>
</body>
</html>

In the click event of the button you test whether the first radiobutton is checked or not by using the ‘checked’ property. If it is the alert is shown. The case for the next radiobutton is similar.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 20, 2013 at 10:32 am in reply to: Grid With popup with link renderer edit and delete Grid With popup with link renderer edit and delete #23491

Mariya

Participant

Hi rajeshnv,

You can use the buttonclick event in a button column. In other cases you should use the cellclick event.

<!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.9.0.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/jqxwindow.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // prepare the data
            var url = "../sampledata/feed.xml";
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'title', type: 'string' },
                    { name: 'link', type: 'string' },
                    { name: 'pubDate', type: 'date' },
                    { name: 'creator', map: 'dc\\:creator', type: 'string' },
               ],
                root: "channel",
                record: "item",
                url: url
            };
            var linkrenderer = function (row, column, value) {
                if (value.indexOf('#') != -1) {
                    value = value.substring(0, value.indexOf('#'));
                }
                var format = { target: '"_blank"' };
                var html = $.jqx.dataFormat.formatlink(value, format);
                return html;
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create jqxGrid.
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                columns: [
                  
                  { text: 'Title', datafield: 'title', width: 200 },
                  { text: 'Publish Date', datafield: 'pubDate', width: 250, cellsformat: "D" },
                  { text: 'Creator', datafield: 'creator', width: 100 },
                  { text: 'Link', datafield: 'link', width: 200, cellsrenderer: function (row) {
                      return "<a onclick=buttonclick(" + row + ") href='#" + row + "'>Edit</a>";
                  }
                  },
                ]
            }); 
              
            });
        
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
            <script>
                function buttonclick(row) {
                    // open the popup window when the user clicks a button.
                    editrow = row;
                    var offset = $("#jqxgrid").offset();
                    $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
                    // get the clicked row's data and initialize the input fields.
                    var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                
                    // show the popup window.
                    $("#popupWindow").jqxWindow('show');
                    return false;
                }
            </script>
         </div>
         <div id="popupWindow">
            <div>Title</div>
            <div>Edit</div>
    </div></div>
</body>
</html>

The example shows how to use a link with a pop up window. The pop up window is opened when the link is clicked.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 20, 2013 at 9:06 am in reply to: Selection stuff does not work. Selection stuff does not work. #23483

Mariya

Participant

Hi Magicloud,

In order to make a selection you should have a # sign in front of the jqxPages. If you have any further questions do not hesitate to contact us.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 20, 2013 at 9:01 am in reply to: "sortable" crashes my Grid "sortable" crashes my Grid #23481

Mariya

Participant

Hi swisspen,

Please make sure that you have added all of the needed files and especially the jqxgrid.sort.js. Here is a sample:http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/sorting.htm?web
If you have any further questions do not hesitate to contact us.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 20, 2013 at 8:53 am in reply to: Charts to PDF Charts to PDF #23479

Mariya

Participant

Hi Rodrigo,

Unfortunately it is not possible to export charts to a pdf document. You can save them as JPEG or PNG, as shown:

$('#jqxChart').jqxChart('saveAsJPEG', 'myChart.jpeg');

$('#jqxChart').jqxChart('saveAsPNG', 'myChart.png');

If you have any further questions do not hesitate to contact us.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 15 posts - 211 through 225 (of 226 total)

← 1 … 14 15 16 →