Forum Replies Created

Viewing 12 posts - 1,351 through 1,362 (of 1,362 total)
  • Author
    Posts

  • ivailo
    Participant

    Hi cpuin,

    Right now we can offer you 2 solutions.

    1. To add strict filtering of the clients option, that can be used in this input.
    2. To add additional button, used if the client wants to change the value. The button will set the input’s property (“readonly”, false) untill the change of the value happens.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    in reply to: Template on jqxButtonGroup Template on jqxButtonGroup #70270

    ivailo
    Participant

    Hi Pribadi Pamungkas,

    You can add some CSS styles to detect when some button is pressed and then change the style.

    Here is an example.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>The jqxButtonGroup widget creates a set of buttons that can work as normal buttons, radio buttons or checkboxes.</title>
        <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttongroup.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
    
        <style>
            .jqx-group-button-pressed.jqx-success {
               background-color: #ff0000 !important;
                color: #aaaaaa !important;
                background-image: none !important;
            }
        </style>
    
    </head>
    <body class='default'>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    // Create jqxButtonGroup.
                    $("#jqxWidget").jqxButtonGroup({ mode: 'checkbox' });
                    // Add templates to the jqxButtons.
                    $("#Left").jqxButton({ template: "success" });
                    $("#Center").jqxButton({ template: "success" });
                    $("#Right").jqxButton({ template: "success" });
                });
            </script>
            <div id='jqxWidget'>
                <button style="padding:4px 16px;" id="Left">
                    Left
                </button>
                <button style="padding:4px 16px;" id="Center">
                    Center
                </button>
                <button style="padding:4px 16px;" id="Right">
                    Right
                </button>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Ivaylo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com


    ivailo
    Participant

    Hi cpuin,

    You can add this code after the presented part of your code

    $("#company").on("select",
    function () {
        $("#company").prop("readonly", true);
    });

    After selecting, the input goes “readonly”.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com


    ivailo
    Participant

    Hi cpuin,

    Try to use inline in the input “readonly” attribute.

    <input type="text" id="input" value="Test Value" readonly/>

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com


    ivailo
    Participant

    Hi ravishankar.knln,

    Unfortunately we cannot reproduce this type of behavior.
    Try to update to the last version 3.7.1.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com


    ivailo
    Participant

    Hi Ajit,

    Can you send the part of the code, that does not work correct.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    in reply to: Paging modes in jQxGrid Paging modes in jQxGrid #70106

    ivailo
    Participant

    Hi Vishnu,

    You can combine these 2 modes, and also create whatever you want like custom design of the pager.
    The way to do this is using “pagerrenderer” function.
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/custompager.htm

    In the below post also you can see the solution about similar problem.
    http://www.jqwidgets.com/community/topic/jqxgrid-pagerrenderer-code-to-recreate-go-to-page-and-show-rows-type-pager/#post-70048

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    in reply to: Error: Invalid structure! Error: Invalid structure! #70097

    ivailo
    Participant

    P.S.

    Here is the sample of code, with needed structure.

    <!--Start of the first window-->
            <div id="window0">
                <div id="windowHeader"><span>Pesquisa de MunicĂ­pios</span></div>
                <div>
                    <div style="width: 100%; height: 110px; ">
                        <table id="filter" style=" width: 100%; margin: auto; empty-cells: show; border-collapse: separate; border-spacing: 3px; ">
                            <tr>
                                <td class="TL" style=" width: 15%; "><label for="filcodmun">Cod. Mun: </label></td>
                                <td class="TL" style=" width: 55%; ">
                                    <input name="filcodmun" id="filcodmun" type="text" style=" width: 150px; " maxlength="5" value=""
                                           onblur="Javascript: UpperCaseField( this );" />
                                </td>
                                <td class="TL" style=" width: 30%; vertical-align: mmiddle; " rowspan="3">
                                    <input type="button" id="filtrar" value="Filtrar" />
                                </td>
                            </tr>
                            <tr>
                                <td class="TL"><label for="filestado">Estado: </label></td>
                                <td class="TL">
                                    <input name="filestado" id="filestado" type="text" style=" width: 150px; " maxlength="2" value=""
                                           onblur="Javascript: UpperCaseField( this );" />&nbsp;&nbsp;EX: RS
                                </td>
                            </tr>
                            <tr>
                                <td class="TL"><label for="filestado">Nome: </label></td>
                                <td class="TL">
                                    <input name="filnome" id="filnome" type="text" style=" width: 320px; " maxlength="60" value=""
                                           onblur="Javascript: UpperCaseField( this );" />
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div style=" margin-top: 5px; overflow: hidden;" id="windowContent">
                    </div>
                </div>
                
            </div>
    <!--End of the first window-->
    
    <!--Start of the second window-->
            <div id="window1">
                <div id="window1Header"><span>Mensagem</span></div>
                <div>
                    <div id="window1Content" style=" margin-top: 5px; overflow: hidden;"></div>
                </div>
            </div>
    <!--End of the second window-->

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    in reply to: Error: Invalid structure! Error: Invalid structure! #70094

    ivailo
    Participant

    Hi amichelins,

    In your structure the second window (window1) is nested. This raises the error.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com


    ivailo
    Participant

    Hi Ajit,

    Unfortionatly with curent version of jqWidgets we can not reproduce your problem.
    In current demo version this feauture works fine:
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/cellediting.htm
    Please try to upgrade to version 3.7.1

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    in reply to: Wait for incoming data Wait for incoming data #70064

    ivailo
    Participant

    Right now we don’t have that kind of feauture, but we can give you acceptable solution.

    You can try this work around:
    Set a hiddein div (display:none) with loading gif for image.
    When you select some ComboBox, the div goes visible, also with absolute position in top of the loading ComboBox (higher zIndex). It hides when the data is loaded. Then stays not visible and waits until next changes.

    Here is an example.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>In this sample is illustrated how to create a Grid with column which displays values from foreign data source. The ComboBox editor associated to the column is populated from the foreign data source.</title>
        <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcombobox.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var countries = [
                     { value: "AF", label: "Afghanistan" },
                     { value: "AL", label: "Albania" },
                     { value: "DZ", label: "Algeria" },
                     { value: "AR", label: "Argentina" },
                     { value: "AM", label: "Armenia" },
                     { value: "AU", label: "Australia" },
                     { value: "AT", label: "Austria" },
                     { value: "AZ", label: "Azerbaijan" },
                     { value: "BS", label: "Bahamas" },
                     { value: "BH", label: "Bahrain" },
                     { value: "BD", label: "Bangladesh" },
                     { value: "BB", label: "Barbados" },
                     { value: "BY", label: "Belarus" },
                     { value: "BE", label: "Belgium" },
                     { value: "BZ", label: "Belize" },
                     { value: "BJ", label: "Benin" },
                     { value: "BM", label: "Bermuda" },
                     { value: "BR", label: "Brazil" },
                     { value: "BN", label: "Brunei" },
                     { value: "BG", label: "Bulgaria" },
                     { value: "CM", label: "Cameroon" },
                     { value: "CA", label: "Canada" },
                     { value: "CL", label: "Chile" },
                     { value: "CN", label: "China" },
                     { value: "CO", label: "Columbia" },
                     { value: "CR", label: "Costa Rica" },
                     { value: "HR", label: "Croatia (Hrvatska)" },
                     { value: "CU", label: "Cuba" },
                     { value: "CY", label: "Cyprus" },
                     { value: "CZ", label: "Czech Republic" },
                     { value: "DK", label: "Denmark" },
                     { value: "TP", label: "East Timor" },
                     { value: "EC", label: "Ecuador" },
                     { value: "EG", label: "Egypt" },
                     { value: "ER", label: "Eritrea" },
                     { value: "EE", label: "Estonia" },
                     { value: "ET", label: "Ethiopia" },
                     { value: "FI", label: "Finland" },
                     { value: "FR", label: "France" },
                     { value: "DE", label: "Germany" },
                     { value: "GR", label: "Greece" },
                     { value: "HK", label: "Hong Kong" },
                     { value: "HU", label: "Hungary" },
                     { value: "IS", label: "Iceland" },
                     { value: "IN", label: "India" },
                     { value: "ID", label: "Indonesia" },
                     { value: "IR", label: "Iran" },
                     { value: "IQ", label: "Iraq" },
                     { value: "IE", label: "Ireland" },
                     { value: "IL", label: "Israel" },
                     { value: "IT", label: "Italy" },
                     { value: "JM", label: "Jamaica" },
                     { value: "JP", label: "Japan" },
                     { value: "MX", label: "Mexico" },
                     { value: "MC", label: "Monaco" },
                     { value: "MA", label: "Morocco" },
                     { value: "NL", label: "Netherlands" },
                     { value: "NZ", label: "New Zealand" },
                     { value: "NE", label: "Niger" },
                     { value: "NG", label: "Nigeria" },
                     { value: "KP", label: "North Korea" },
                     { value: "NO", label: "Norway" },
                     { value: "PA", label: "Panama" },
                     { value: "PE", label: "Peru" },
                     { value: "PH", label: "Philippines" },
                     { value: "PL", label: "Poland" },
                     { value: "PT", label: "Portugal" },
                     { value: "RO", label: "Romania" },
                     { value: "RU", label: "Russia" },
                     { value: "SA", label: "Saudi Arabia" },
                     { value: "SK", label: "Slovak Republic" },
                     { value: "SI", label: "Slovenia" },
                     { value: "ZA", label: "South Africa" },
                     { value: "KR", label: "South Korea" },
                     { value: "ES", label: "Spain" },
                     { value: "SE", label: "Sweden" },
                     { value: "CH", label: "Switzerland" },
                     { value: "TN", label: "Tunisia" },
                     { value: "TR", label: "Turkey" },
                     { value: "UA", label: "Ukraine" },
                     { value: "AE", label: "United Arab Emirates" },
                     { value: "UK", label: "United Kingdom" },
                     { value: "US", label: "United States" }
                ];
                var countriesSource =
                {
                    datatype: "array",
                    datafields: [
                        { name: 'label', type: 'string' },
                        { name: 'value', type: 'string' }
                    ],
                    localdata: countries
                };
                var countriesAdapter = new $.jqx.dataAdapter(countriesSource, {
                    autoBind: true
                });
                // prepare the data
                var gridSource =
                {
                    datatype: "array",
                    localdata:
                    [
                        { countryCode: "UK" },
                        { countryCode: "US" },
                        { countryCode: "DE" },
                        { countryCode: "FR" },
                        { countryCode: "IN" },
                        { countryCode: "HK" }
                    ],
                    datafields: [
                        // name - determines the field's name.
                        // value - the field's value in the data source.
                        // values - specifies the field's values.
                        // values.source - specifies the foreign source. The expected value is an array.
                        // values.value - specifies the field's value in the foreign source.
                        // values.name - specifies the field's name in the foreign source.
                        // When the adapter is loaded, each record will have a field called "Country". The "Country" for each record comes from the countriesAdapter where the record's "countryCode" from gridAdapter matches to the "value" from countriesAdapter.
                        { name: 'Country', value: 'countryCode', values: { source: countriesAdapter.records, value: 'value', name: 'label' } },
                        { name: 'countryCode', type: 'string' }
                    ]
                };
                var gridAdapter = new $.jqx.dataAdapter(gridSource);
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 600,
                    source: gridAdapter,
                    selectionmode: 'singlecell',
                    autoheight: true,
                    editable: true,
                    columns: [
                        {
                            text: 'Country', datafield: 'countryCode', displayfield: 'Country', columntype: 'combobox', 
                            createeditor: function (row, value, editor) {
    
                              var offset = $(editor).offset();
                              $("#ajaxLoader").show();
                              $('#ajaxLoader').css({
                                  position: 'absolute',
                                  zIndex: 8888888,
                                  top: offset.top+'px',
                                  left: offset.left+'px'
                              });
    
                              
    
                              editor.jqxComboBox({ source: countriesAdapter, displayMember: 'label', valueMember: 'value' });
    
                              $(editor).on('bindingComplete', function (event) {
                                  $('#ajaxLoader').css({
                                      zIndex: -8888888
                                  });
                              });
                            }
                        }
                    ]
                });
    
                $("#jqxgrid").on('cellselect', function (event) {
       
    
                    var column = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield);
                    var value = $("#jqxgrid").jqxGrid('getcellvalue', event.args.rowindex, column.datafield);
                    var displayValue = $("#jqxgrid").jqxGrid('getcellvalue', event.args.rowindex, column.displayfield);
    
                    $("#eventLog").html("<div>Selected Cell<br/>Row: " + event.args.rowindex + ", Column: " + column.text + ", Value: " + value + ", Label: " + displayValue + "</div>");
                });
                $("#jqxgrid").on('cellendedit', function (event) {
                    var column = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield);
                    if (column.displayfield != column.datafield) {
                        $("#eventLog").html("<div>Cell Edited:<br/>Index: " + event.args.rowindex + ", Column: " + column.text + "<br/>Value: " + event.args.value.value + ", Label: " + event.args.value.label
                            + "<br/>Old Value: " + event.args.oldvalue.value + ", Old Label: " + event.args.oldvalue.label + "</div>"
                            );
                    }
                    else {
                        $("#eventLog").html("<div>Cell Edited:<br/>Row: " + event.args.rowindex + ", Column: " + column.text + "<br/>Value: " + event.args.value
                            + "<br/>Old Value: " + event.args.oldvalue + "</div>"
                            );
                    }
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid">
            </div>
            <div style="font-size: 13px; margin-top: 20px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;" id="eventLog"></div>
    
            <div id="ajaxLoader" style="display: none; z-index:'8888888'; background-color: white; width:200px; margin-top:3px; margin-left: 3px;">
                <img height="15" width="15" src="http://images.all-digitall.com/pages/General/loading.gif" />
            </div>
    
          </div>
    </body>
    </html>

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    in reply to: Template on jqxButtonGroup Template on jqxButtonGroup #70043

    ivailo
    Participant

    You can access all the buttons via their IDs.
    If the buttons don’t have IDs You must create them.

    Below is shown the way to make the relation betwen IDs and templates.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>The jqxButtonGroup widget creates a set of buttons that can work as normal buttons, radio buttons or checkboxes.</title>
        <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttongroup.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
    
    </head>
    <body class='default'>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    // Create jqxButtonGroup.
                    $("#jqxWidget").jqxButtonGroup({ mode: 'default' });
                    // Add templates to the jqxButtons.
                    $("#Left").jqxButton({ template: "info" });
                    $("#Center").jqxButton({ template: "success" });
                    $("#Right").jqxButton({ template: "warning" });
                });
            </script>
            <div id='jqxWidget'>
                <button style="padding:4px 16px;" id="Left">
                    Left
                </button>
                <button style="padding:4px 16px;" id="Center">
                    Center
                </button>
                <button style="padding:4px 16px;" id="Right">
                    Right
                </button>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Ivaylo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 12 posts - 1,351 through 1,362 (of 1,362 total)