How I can set selected value to jqxdropdownlist on pageload

[NarendraParticipant]

Hi

I want to set the selected value to jqxdropdownlist on pageload

For suppose I have items a,b,c,d in the dropdownlist, now i want to set ‘c’ as selected value dynamically on page load dynamically.

Don’t give suggestions like  put selected index, I want to set value directly as selected value.

How can i achieve it…..

plz  help me urgent Thanks in advance!

[DimitarParticipant]

Hello narendra.pvnb,

To do this, use the val method:

$("#jqxDropDownList").jqxDropDownList('val', 'c');

Remember to update to version 2.8, too.

Best Regards,
Dimitar

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

[NarendraParticipant]

Hi it’s not working

I am showing a grid with edit column when i click on particular row edit button, a popupwindow will be displayed with row values, in that popup I placed one jqxgropdownlist and when i click on edit button of grid row the particular row value will be set defaultly as selected value of that dropdownlist………

I thought that You could understood my requirement……….!

That is my requirement plz help me as soon as possible

thanks in advance……….!

[NarendraParticipant]

I am sending code check it once and give reply please………………

 <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var data = document.getElementById("ContentPlaceHolder1_hdnUserList").value;
            var source =
            {
                localdata: data,
                datatype: "json",
                datafields:
                [
                    { name: 'Rec_Id', type: 'number' },
                    { name: 'Client_FirstName', type: 'string' },
                     { name: 'Client_LastName', type: 'string' },
                    { name: 'Client_Email', type: 'string' },
                    { name: 'Client_Status', type: 'string' },
                    { name: 'Role_Name', type: 'string' },
                    { name: 'Client_Mobile', type: 'string' }
                ],
                id: 'Rec_Id',
                deleterow: function (rowid, commit) {
                    commit(true);
                },
                updaterow: function (rowid, rowdata, commit) {
                    commit(true);
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var editrow = -1;
            var cellsrenderer = function (row, column, value) {
                return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
            }
            var columnrenderer = function (value) {
                return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
            }
            // initialize jqxGrid
            $("#jqxusersgrid").jqxGrid(
          {
              width: 890,
              source: dataAdapter,
              theme: theme,
              pageable: true,
             columnsresize: true,
              autoheight: true,
              enableanimations: false,
              sortable: true,
             // virtualmode: true,
              columns: [
                  { text: 'Rec_Id', datafield: 'Rec_Id', hidden: true, width: 120, renderer: columnrenderer },
                  { text: 'First Name', datafield: 'Client_FirstName', width: 120, renderer: columnrenderer },
                  { text: 'Last Name', datafield: 'Client_LastName', width: 100, renderer: columnrenderer },
                   { text: 'Email', datafield: 'Client_Email', width: 170, renderer: columnrenderer },
                  { text: 'Status', datafield: 'Client_Status', width: 80, renderer: columnrenderer, cellsrenderer: cellsrenderer },
                  { text: 'Role', datafield: 'Role_Name', width: 100, renderer: columnrenderer, cellsrenderer: cellsrenderer },
                  { text: 'Mobile', datafield: 'Client_Mobile', width: 120, renderer: columnrenderer },
                   {
                       text: 'Edit', datafield: 'Edit', columntype: 'button', width: 90, renderer: columnrenderer, cellsrenderer: function () {
                           return "Edit";
                       }, buttonclick: function (row) {
                           // open the popup window when the user clicks a button.
                           editrow = row;
                           var offset = $("#jqxusersgrid").offset();
                           $("#popupedit").jqxWindow({ position: { x: parseInt(offset.left) + 290, y: parseInt(offset.top) +60 } });
                           // get the clicked row's data and initialize the input fields.
                           var dataRecord = $("#jqxusersgrid").jqxGrid('getrowdata', editrow);
                           $("#txtClient_FirstName").val(dataRecord.Client_FirstName);
                           $("#txtClient_LastName").val(dataRecord.Client_LastName);
                           $("#txtClient_Email").val(dataRecord.Client_Email);
                           $("#txtClient_Email").attr('readonly', true);
                           $("#txtClient_Status").val(dataRecord.Client_Status);
                           var role = dataRecord.Role_Name;
                         //  alert(role);
                          // $("#jqxClient_Role").jqxdropdownlist('val', role);
                           $("#txtClient_Mobile").val(dataRecord.Client_Mobile);
                           // show the popup window.
                           $("#popupedit").jqxWindow('show');
                       }
                   },
                  {
                      text: 'Delete', datafield: 'Delete', columntype: 'button', width: 90, renderer: columnrenderer, cellsrenderer: function () {
                          return "Delete";
                      }, buttonclick: function (rowindex) {
                          // open the popup window when the user clicks a button.
                          deleterow = rowindex;
                          var offset = $("#jqxusersgrid").offset();
                          $("#popupdelete").jqxWindow({ position: { x: parseInt(offset.left) + 290, y: parseInt(offset.top) + 60 } });
                          // show the popup window.
                          $("#popupdelete").jqxWindow('show');
                          // delete row.
                          $("#btndelete").click(function () {
                              //alert();
                              var dataRecord = $("#jqxusersgrid").jqxGrid('getrowdata', deleterow);
                              var id = dataRecord.Rec_Id;
                              document.getElementById("ContentPlaceHolder1_hdndeleteid").value = id;
                              $("#popupdelete").jqxWindow('hide');
                              $("#frm_aftermaster").submit();
                          });
                      }
                  }
              ]
          });
            // update the edited row when the user clicks the 'Save' button.
            $("#btnupdate").click(function () {
                var dataRecord = $("#jqxusersgrid").jqxGrid('getrowdata', editrow);
               // alert(dataRecord);
                var id = dataRecord.Rec_Id;
               // alert(id);
                document.getElementById("ContentPlaceHolder1_hdneditid").value = id;
              //  alert(document.getElementById("ContentPlaceHolder1_hdneditid").value);
                var fname = $("#txtClient_FirstName").val();
                var lname = $("#txtClient_LastName").val();
                var email = $("#txtClient_Email").val();
                var stats = $("#txtClient_Status").val();
                var item = $("#jqxClient_Role1").jqxDropDownList('getSelectedItem');
                var role = item.value;
                //alert(role);
                var mobile = $("#txtClient_Mobile").val();
                document.getElementById("ContentPlaceHolder1_HdnECFName").value = fname;
                document.getElementById("ContentPlaceHolder1_HdnECLName").value = lname;
                document.getElementById("ContentPlaceHolder1_HdnECMail").value = email;
                document.getElementById("ContentPlaceHolder1_HdnEStatus").value = stats;
                document.getElementById("ContentPlaceHolder1_HdnERole").value = role;
                document.getElementById("ContentPlaceHolder1_HdnEMobile").value = mobile;
                $("#popupedit").jqxWindow('hide');
                $("#frm_aftermaster").submit();
            });
        });
    </script>
  <div id="popupedit" class="tblspacermv">
        <div>Edit User:</div>
        <div style="overflow: hidden;">
            <table>
                <tr>
                    <td align="left">First Name:</td>
                    <%--<td align="left"><input id="txtUserName" /></td>--%>
                    <td align="left">
                        <input id="txtClient_FirstName" /></td>
                </tr>
                <tr>
                    <td align="left">Last Name:</td>
                    <td align="left">
                        <input id="txtClient_LastName" /></td>
                </tr>
                <tr>
                    <td align="left">Email:</td>
                    <td align="left">
                        <input id="txtClient_Email" /></td>
                </tr>
                <tr>
                    <td align="left">Status:</td>
                    <td align="left">
                        <input id="txtClient_Status" /></td>
                </tr>
                <tr>
                    <td align="left">Role:</td>
                    <td align="left">
                        <div id="jqxClient_Role1"></div>
                    </td>
                </tr>
                <tr>
                    <td align="left">Mobile:</td>
                    <td align="left">
                        <input id="txtClient_Mobile" /></td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td style="padding-top: 10px;" align="right">
                        <input type="button" value="Update" id="btnupdate" style="margin-right: 5px;" /><input id="Cancel" type="button" value="Cancel" /></td>
                </tr>
                <tr>
                    <td colspan="2"></td>
                </tr>
            </table>
        </div>
    </div>
  <div align="center">
        <h1 class="heading">List of Users </h1>
        <table>
            <tr>
                <td colspan="3" style="border-radius: 10px; border: solid #CECFCE;">
                    <div id="jqxusersgrid"></div>
                </td>
            </tr>
</table>
</div>

[DimitarParticipant]

Hi narendra.pvnb,

You have to initialize the dropdownlist first to be able to call its methods. An example initialization can be seen in the documentation entry Getting Started. Also note that it should be:

$("#jqxClient_Role").jqxDropDownList('val', role);

and not:

$("#jqxClient_Role").jqxdropdownlist('val', role);

Best Regards,
Dimitar

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

[NarendraParticipant]

Even though it is not working….!!!

Any alternate or efficient way?

please help me its very urgent to me…

[DimitarParticipant]

Hi narendra.pvnb,

Have you implemented the widget’s initialization? Please browse the Editing Grid demo section for some useful examples on the matter.

Best Regards,
Dimitar

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

[NarendraParticipant]

I have completely done my side but it’s only the problem to set selected value for dropdown when popup opens a value should be selected already…………..

How?

[DimitarParticipant]

Hi narendra.pvnb,

Here is the solution. The example is based on the demo Popup Editing and uses jQWidgets version 2.8.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In order to enter in edit mode, click any of the 'Edit' buttons.
        To save the changes, click the 'Save' button in the popup dialog. To cancel the
        changes click the 'Cancel' button in the popup dialog.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.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.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.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/jqxinput.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // prepare the data
            var data = generatedata(20);
            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ],
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failder.
                    commit(true);
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            dataAdapter.dataBind();
            var ddlSource = new Array();
            for (var i = 0; i < dataAdapter.records.length; i++) {
                ddlSource.push(dataAdapter.records[i].firstname);
            };
            var editrow = -1;
            // initialize the input fields.
            $("#firstName").jqxDropDownList({ theme: theme, source: ddlSource, width: 150, height: 23 });
            $("#lastName").jqxInput({ theme: theme });
            $("#product").jqxInput({ theme: theme });
            $("#lastName").width(150);
            $("#lastName").height(23);
            $("#product").width(150);
            $("#product").height(23);
            $("#quantity").jqxNumberInput({ width: 150, height: 23, theme: theme, decimalDigits: 0, spinButtons: true });
            $("#price").jqxNumberInput({ symbol: '$', width: 150, height: 23, theme: theme, spinButtons: true });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 190 },
                  { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                 { text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () {
                     return "Edit";
                 }, buttonclick: function (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);
                     $("#firstName").jqxDropDownList('val', dataRecord.firstname);
                     $("#lastName").val(dataRecord.lastname);
                     $("#product").val(dataRecord.productname);
                     $("#quantity").jqxNumberInput({ decimal: dataRecord.quantity });
                     $("#price").jqxNumberInput({ decimal: dataRecord.price });
                     // show the popup window.
                     $("#popupWindow").jqxWindow('open');
                 }
                 },
                ]
            });
            // initialize the popup window and buttons.
            $("#popupWindow").jqxWindow({
                width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01
            });
            //            $("#popupWindow").on('open', function () {
            //                $("#firstName").jqxInput('selectAll');
            //            });
            $("#Cancel").jqxButton({ theme: theme });
            $("#Save").jqxButton({ theme: theme });
            // update the edited row when the user clicks the 'Save' button.
            $("#Save").click(function () {
                if (editrow >= 0) {
                    var row = { firstname: $("#firstName").val(), lastname: $("#lastName").val(), productname: $("#product").val(),
                        quantity: parseInt($("#quantity").jqxNumberInput('decimal')), price: parseFloat($("#price").jqxNumberInput('decimal'))
                    };
                    var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
                    $('#jqxgrid').jqxGrid('updaterow', rowID, row);
                    $("#popupWindow").jqxWindow('hide');
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
        <div style="margin-top: 30px;">
            <div id="cellbegineditevent">
            </div>
            <div style="margin-top: 10px;" id="cellendeditevent">
            </div>
        </div>
        <div id="popupWindow">
            <div>
                Edit</div>
            <div style="overflow: hidden;">
                <table>
                    <tr>
                        <td align="right">
                            First Name:
                        </td>
                        <td align="left">
                            <div id="firstName">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Last Name:
                        </td>
                        <td align="left">
                            <input id="lastName" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Product:
                        </td>
                        <td align="left">
                            <input id="product" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Quantity:
                        </td>
                        <td align="left">
                            <div id="quantity">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Price:
                        </td>
                        <td align="left">
                            <div id="price">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                        </td>
                        <td style="padding-top: 10px;" align="right">
                            <input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel"
                                type="button" value="Cancel" />
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

[Hello123Participant]

hi i am fresher can anyone help me it very urgent in my combobox i have three option a,b,c and a is selected automatically its jqwidgets by default function or anything else if not so please reply me .i want to show when a is selected then b will be show as disable and when b is selected a show as disable.i can try with this code but not work please help me.

$(‘#hello’).on(‘select’, function (event) {
var args = event.args;
//console.log(“it is for selcet the item in box”+JSON.stringify(args));
if (args) {
// index represents the item’s index.
var index = args.index;
var item = args.item;
var label = item.label;
var id = item.id;
console.log(“id:”+index);
if (label === ‘a’)
{
$(“#network_tags”).jqxComboBox(‘disableItem’, ‘b’);
}
if(label === ‘b’)
{
$(“#network_tags”).jqxComboBox(‘disableItem’, ‘a’);
}
$scope.networkTagsSelected.push(label);
console.log(“$scope.networkTagsSelected: ” + JSON.stringify($scope.networkTagsSelected));
}
});

[MartinParticipant]

Hello Hello123,

Your question is duplicated.
Please, refer to the following Topic.

Best Regards,
Martin

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

[Author]

Posts