jQWidgets Forums

This topic contains 4 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 5 months ago.

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

Author

Regarding selecting an item on page load Posts

March 18, 2013 at 9:37 am Regarding selecting an item on page load #17279

shashi

Member

Hi,

I want to select a particular item in dropdown in the pageload. when I use the following code it is now working.
Moreover, I have written a code for submitting the page on dropdown change event. When I try to write the below code, the page is not submitting. What is the problem?
var indexToSelect=0;
$(“#jqxWidget”).jqxDropDownList({ selectedIndex: indexToSelect });

March 18, 2013 at 9:44 am Regarding selecting an item on page load #17280

Peter Stoev

Keymaster

Hi shashi,

Please, provide a small sample demonstrates your issue.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 19, 2013 at 9:22 am Regarding selecting an item on page load #17413

shashi

Member

 $(document).ready(function () {
  var index=document.getElementById("ContentPlaceHolder1_hdnPageTypeStatus").value;
 $("#ddlpagetype").jqxDropDownList({ source: dataAdapter,  displayMember: "Page_Type", valueMember: "Page_Type", width: '150px', height: '25px', theme: 'summer' });
$("#ddlpagetype").jqxDropDownList({ selectedIndex: index });
  });
//The index value will be the selected item before submit

March 19, 2013 at 9:33 am Regarding selecting an item on page load #17422

Peter Stoev

Keymaster

Hi shashi,

Unfortunately, the posted code does not help us, because the dataAdapter definition is missing and also it is not clear what kind of data is loaded, whether it is loaded via Ajax or not Could you post a sample which we will be able to run locally?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 19, 2013 at 9:39 am Regarding selecting an item on page load #17425

Peter Stoev

Keymaster

Hi shashi,

In addition to my previous post:

Below is a working sample:

<!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>
    <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.8.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                var url = "../sampledata/customers.txt";
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'CompanyName' },
                        { name: 'ContactName' }
                    ],
                    id: 'id',
                    url: url,
                    async: false
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                // Create a jqxDropDownList
                $("#jqxWidget").jqxDropDownList({
                    source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25, theme: theme
                });
                $("#jqxWidget").jqxDropDownList({ selectedIndex: 4 });
            
                // subscribe to the select event.
                $("#jqxWidget").on('select', function (event) {
                    if (event.args) {
                        var item = event.args.item;
                        if (item) {
                            var valueelement = $("<div></div>");
                            valueelement.text("Value: " + item.value);
                            var labelelement = $("<div></div>");
                            labelelement.text("Label: " + item.label);
                            $("#selectionlog").children().remove();
                            $("#selectionlog").append(labelelement);
                            $("#selectionlog").append(valueelement);
                        }
                    }
                });
            });
        </script>
        <div id='jqxWidget'>
        </div>
        <div style="font-size: 12px; font-family: Verdana;" id="selectionlog">
        </div>
    </div>
</body>
</html>

Please, make sure that you use jQWidgets 2.7.

If your binding is async, then do the following:

1. Bind to the “bindingcomplete” event of jqxDropDownList.
2. Set the “selectedIndex” property in the “bindingcomplete” event handler of jqxDropDownList.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.