How to add a Combo-Box or a DropDownList to a Grid in a custom view

Sample source code: grid-foreignkey app at https://github.com/CloudDataObject/kendo-ui-builder-samples

Sample demo app:

  • app: http://oemobiledemo.progress.com/static/kuib/grid-foreignkey
  • view: http://oemobiledemo.progress.com/static/kuib/grid-foreignkey/#!/module/customers/customer-view

Introduction

A custom view can be created in Kendo UI Builder by using the Blank View template in the designer.

Kendo UI components such as the Kendo UI Grid can be dragged onto the canvas to create a custom UI.

A combo-box or a drop-down-list can be used in a grid to display and/or edit related data such as a for a foreign key.

This can be done by using the template and editor properties of the Kendo UI Grid.

The template property is used configure the value to display and the editor property is used when editing a record in the grid.

These properties are configuration options for the grid and need to be specified before the grid is instantiated.

These options can be used with all the edit modes: Incell, Inline, and Popup.

See the following items in the documentation for details on the template and editor properties:

Steps

Use the following steps to create a new view and configure the template and editor properties:

  • Add one or more Data Providers to your Kendo UI Builder project.
    • These steps use data sources for Customer and Salesrep resources.
  • Add new module to the app.
  • Use Add View in the designer to create a new view using the Blank template.
    • Name the view CustomerView.
    • Set the Label to "Customers".
  • Use View's Data Sources to add data sources definitions for the resources.
    • Add data source for Customer. Name the data source CustomerDS. Set the Page Size to 15. This page size will be used as the page size for the grid.
    • Add data source for Salesrep. Name the data source SalesrepDS.
  • Drag and drop a grid from the Components panel onto the canvas.
  • Select the containing Column and change the Screen Width from 6 to 12 so that the grid uses the full width of the container as part of responsive design.
  • Configure the grid to use CustomerDS as the Data Source.
  • Change the Edit Mode to Incell.
  • Use Grid Columns to set the columns to show CustNum, Name, State and Salesrep.
  • Set the width of the Salesrep column to 200 so that it can show the Salesrep names using a DropDownList.
    • Note: The width of the other columns would adjust dynamically depending on the width of the web browser's window.
  • Save and Preview.
  • Edit controller.public.js (folder app/src/modules/<module-name>/<view-name>/ ).
    • Add code to the constructor to load the Salesrep records into the SalesrepDS data source:

      this.$ds.SalesrepDS.read();
    • Add code to the constructor to set the template property for the SalesRep column:

      this.$components.grid0.options.columns[3].template = function(dataItem) { ... };
    • Add code to the constructor to set the editor property for the SalesRep column:

      this.$components.grid0.options.columns[3].editor = function(container, options) { ... };
    • The constructor code would look like the following:

      constructor($scope, $injector, stateData) {
          super($scope, $injector);
       
          this.$ds.SalesrepDS.read();
       
          var that = this;
       
          this.$components.grid0.options.columns[3].template = function(dataItem) {
              that.$ds.SalesrepDS.filter(
                  {field: "SalesRep", operation: "eq", value: dataItem.SalesRep}
              );
              var view = that.$ds.SalesrepDS.view();
              return "" + kendo.htmlEncode(view[0].RepName) + "";
          };
       
          this.$components.grid0.options.columns[3].editor = function(container, options) {
              var input = $("");
              input.attr("name", options.field);
       
              // Clear filter to ensure that all values are shown
              that.$ds.SalesrepDS.filter({});
       
              input.appendTo(container);
              input.kendoDropDownList({
                  dataSource: that.$ds.SalesrepDS,
                  dataTextField: "RepName",
                  dataValueField: "SalesRep",               
              })
          };
      }
    • Save controller.public.js. The page in the web browser will reload automatically.
      • You should now see RepName displayed on the SalesRep column.
    • Click on the SalesRep column. A DropDownList component is displayed with the list of Salesreps.
    • At this point you should be able to select from the DropDownList and save the Customer with a new value for Salesrep.