jQuery UI Widgets Forums Lists DropDownList How I can set selected value to jqxdropdownlist on pageload

Tagged: 

This topic contains 10 replies, has 4 voices, and was last updated by  Martin 1 year, 11 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author

  • Narendra
    Participant

    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!


    Dimitar
    Participant

    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/


    Narendra
    Participant

    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……….!


    Narendra
    Participant

    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>

    Dimitar
    Participant

    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/


    Narendra
    Participant

    Even though it is not working….!!!

    Any alternate or efficient way?

    please help me its very urgent to me…


    Dimitar
    Participant

    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/


    Narendra
    Participant

    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?


    Dimitar
    Participant

    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/


    Hello123
    Participant

    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));
    }
    });


    Martin
    Participant

    Hello Hello123,

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

    Best Regards,
    Martin

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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.