We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Problem with DropDownList script error

Thread ID:

Created:

Updated:

Platform:

Replies:

126082 Sep 22,2016 08:04 AM Sep 23,2016 07:58 AM JavaScript 1
loading
Tags: ejDropDownList
jinchul oh
Asked On September 22, 2016 08:04 AM

Hello,

Error: ejDropDownList: methods/properties can be accessed only after plugin creation


Bring up the simply dialog dropdownlist cascade error.


webForm.aspx

<div>
        <div class="cols-sample-area">
                <input class="e-btn" id="btnOpen" value="Click to open dialog" />
                <div class="control">
                    <div id="ajaxDialog">
                    </div>
                </div>
            </div>
    </div>
    <script type="text/javascript">
        $(function () {
            // declaration
            $("#ajaxDialog").ejDialog(
               {
                   contentUrl: "Dialog.aspx",
                   contentType: "ajax",
                   title: "Twitter",
                   width: "90%",
                   height: "90%",
                   content: ".cols-sample-area",
                   close: "onDialogClose"
               });
            $("#btnOpen").ejButton({ size: "medium", "click": "onOpen", type: "button", height: 30, width: 150 });

        });
        function onDialogClose(args) {
            $("#btnOpen").show();
        }
        function onOpen() {
            $("#btnOpen").hide();
            $("#ajaxDialog").ejDialog("open");
        }
    </script>


Dialog.aspx
 <div class="row">
            <div class="">
                <div class="padding : 30px;">
<div class="cascadding">
                        <div id="control" >
<span class="txt">Select Group</span>
<input id="groupsList" type="text" />
                        </div> 
                        <div id="binding">
<span class="txt">Select Country</span>
<input id="countryList" type="text" />
                        </div> 
                    </div>
</div>

                </div>
            </div>
    <script type="text/javascript">
        var target;
        $(function () {
            // declaration
            var groups = [
          { parentId: 'a', text: "Group A" },
          { parentId: 'b', text: "Group B" },
          { parentId: 'c', text: "Group C" },
          { parentId: 'd', text: "Group D" },
          { parentId: 'e', text: "Group E" }]
            //first level child
            var countries = [{ value: 11, parentId: 'a', text: "Algeria", sprite: "flag-dz" },
           { value: 12, parentId: 'a', text: "Armenia", sprite: "flag-am" },
           { value: 13, parentId: 'a', text: "Bangladesh", sprite: "flag-bd" },
           { value: 14, parentId: 'a', text: "Cuba", sprite: "flag-cu" },
           { value: 15, parentId: 'b', text: "Denmark", sprite: "flag-dk" },
           { value: 16, parentId: 'b', text: "Egypt", sprite: "flag-eg" },
           { value: 17, parentId: 'c', text: "Finland", sprite: "flag-fi" },
           { value: 18, parentId: 'c', text: "India", sprite: "flag-in" },
           { value: 19, parentId: 'c', text: "Malaysia", sprite: "flag-my" },
           { value: 20, parentId: 'd', text: "New Zealand", sprite: "flag-nz" },
           { value: 21, parentId: 'd', text: "Norway", sprite: "flag-no" },
           { value: 22, parentId: 'd', text: "Poland", sprite: "flag-pl" },
           { value: 23, parentId: 'e', text: "Romania", sprite: "flag-ro" },
           { value: 24, parentId: 'e', text: "Singapore", sprite: "flag-sg" },
           { value: 25, parentId: 'e', text: "Thailand", sprite: "flag-th" },
           { value: 26, parentId: 'e', text: "Ukraine", sprite: "flag-ua" }]
            $('#groupsList').ejDropDownList({
                dataSource: groups,
                fields: { value: "parentId",text:"text" },
                cascadeTo: 'countryList',
                change: "onChange",
width:"100%"
            });
            $('#countryList').ejDropDownList({
                dataSource: countries,
                enabled: false,
width:"100%"
            });
        });
        function onChange() {
            var ctry = $('#countryList').data("ejDropDownList");
            ctry.element.val("");
        }
    </script>


Thank you
Jinchul oh

Attachment: WebApplication1_6a618500.zip

Keerthana Rajendran [Syncfusion]
Replied On September 23, 2016 07:58 AM

Hi Jinchul,   
  
We had checked your shared sample. An issue occurs because you had referred the script files in both web pages (Dialog.aspx and webForm1.aspx) of your application. We suggest you to refer the required scripts and css only in the main page(WebForm1.aspx) where you render the dialog to resolve the issue.   
  
We had prepared a sample for your reference. Kindly refer the below given link:   
  

Regards,  
 
Keerthana.   
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;