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.

How can I use auto-complete and DropDown controls with the OData services?

The LightSwitch HTML is a development environment designed to simplify and shorten the business applications and data services. The LightSwitch makes it easy to create business applications that can consume a variety of DataSources and create clients that can run on a variety of devices.         

Render Autocomplete/Dropdown List with the OData Services:

You can render the Autocomplete and Dropdown List controls with the OData Services.

The steps to render Autocomplete and Dropdown controls with the OData Services in the LightSwitch HTML Application are:

  1. In the Solution Explorer, choose the Data Source node in the Server Project.
  2. Right Click the Data Source Node and Select the Add Data Source. The Attach Data Source Wizard appears.
  3. In the Attach Data Source Wizard, choose the OData Service, and then click Next.
  4. On the Enter Connection Information page in the OData Source Address box, enter a URL, for example. http://mvc.syncfusion.com/Services/Northwnd.svc/
  5. Under Login Information, choose None, and then choose the Next button. Note that the correct setting depends upon the implementation of the service you specified in the previous step.
  6. On the Choose your Entities page, select the entities and then click the Finish button.

The DataSource is added to the project under the DataSources folder and the entities are created. Now, you can create the Autocomplete and DropDown controls with those entities by following the steps mentioned in the following online help document link:

http://help.syncfusion.com/ug/lightswitch/default.htm#!documents/howtouse1.htm

 

Another option is to use the Custom Control option to render the Autocomplete and Dropdown list controls. Use this code example to render the Autocomplete and Dropdown list controls with the Custom Control option.  Paste this code inside the Custom Control render method to render the respective controls.

DropDown List:

myapp.CustomDropDown.ScreenContent_render = function (element, contentItem) {

    // Write code here.

var input = $('<input />');

    input.attr('id', 'Customers');

    input.attr('data-role', 'none');

    input.appendTo($(element));

    if (input.hasClass('e-dropdownlist')) { input.ejDropDownList('destroy'); }

    var dataManger = ej.DataManager({

        url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"

    });

    // Query creation.

    var query = ej.Query()

           .from("Customers").take(6);

        input.ejDropDownList({

            dataSource: dataManger,

            fields: { text: "CustomerID" },

            query: query,

     });

};

Autocomplete:

myapp.CustomAutoComplete.ScreenContent_render = function (element, contentItem) {

    // Write code here.

    var input = $('<input />');

    input.attr('id', 'Employees');

    input.attr('data-role', 'none');

    input.appendTo($(element));

    if (input.hasClass('e-autocomplete')) { input.ejAutocomplete('destroy'); }

    var dataManger = ej.DataManager({

        url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"

    });

    // Query creation.

    var query = ej.Query()

           .from("Customers").take(6);

       input.ejAutocomplete({

             dataSource: dataManger,

             fields: { text: "CustomerID" },

             query: query,

            });

};

 

Syncfusion has prepared a sample for Autocomplete and Dropdown List controls with the OData Services and Custom control options. You can download it from the following location: Sample location

Article ID: Published Date: Last Revised Date: Platform: Control:
4320 03/25/2015 03/25/2015 JavaScript ejAutoCompleteTextBox
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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.