How to add ComboBox in Grid for inline editing

[Srinivas]

Hi,

Generally add Dropdownlist in grid for inline editing.

Can I add ComboBox instead of Dropdownlist.

Actual reason of requirement of ComboBox in inline editing is as following:

1. I can filter the list as I type which is not possible with Dropdownlist

2. I can fetch the data and render the list items as user type.

Exmple:

HTML

<!-- Select Drop Down List - Manufacturer -->
<kendo-textbox-container style="text-align: left;">
  <kendo-label text="Manufacturer">
    <kendo-combobox formControlName="manufacturerId" [data]="ddlManufacturerId | async" [textField]="'name'"
      [valueField]="'id'" [valuePrimitive]="true" [filterable]="true"
      (filterChange)="onSearchManufacturerId($event)" required>
    </kendo-combobox>
  </kendo-label>
</kendo-textbox-container>
<!-- Select Drop Down List - Manufacturer -->

 

Typescript:

  onSearchManufacturerId (value) {
    const pSearch: ACSelectModel = {
      SearchText: value,
      SearchColumn: 'Manufacturer',
      TableName: 'vwTXManufacturerList',
      DisplayColumns: 'Manufacturer',
      IndexColumn: 'MTXManufacturerId',
      WhereClause: 'CompanyId=' + this.auth.getLoggedInCompanyId(),
      OrderByClause: 'name',
      IsNoneRecordRequired: true
    };
    this.ddlManufacturerId = this.mySelect.acSelect(pSearch).pipe(
      map((results: SelectModel[]) => {
        return results;
      })
    );
  }

 

Definitely "kendo-textbox-container" and "kendo-label" I'm not going to use in grid but just running sample code I attached here for reference.

I hope my requirement is clear.

[Dimiter Topalov]

Hi Srinivas,

Any Kendo UI component or custom UI can be used within the Grid Edit template:

https://www.telerik.com/kendo-angular-ui/components/grid/api/EditTemplateDirective/

The following runnable example demonstrates how to add custom controls for editing purposes, and one of the custom controls is a DropDownList:

https://www.telerik.com/kendo-angular-ui/components/grid/editing/custom-reactive-editing/

It can be seamlessly replaces with a ComboBox instead:

https://stackblitz.com/edit/angular-ntzvxu?file=app/app.component.ts

The templates in the example contain code allowing to display a custom validation popup, but if this is not necessary, it can be safely removed. The main points of interest are to bind the ComboBox component to the FormControl, created for the respective field, and to provide the necessary data list for the ComboBox.

All desired ComboBox functionalities like the filtering one can be applied in the same manner as with a stand-alone ComboBox component.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Srinivas]

Hi Dimiter Topalov,

Thank you for your response.
I saw number of your responses resolving many-many issues.
My issues also resolved with those responses.

 

Coming my current issue. I resolved my issue. As of now I solved my problem with Dropdownlist:
My issue is filtering and fetching data from database as user types.

 

Following code solving my problem but correct me if you find any defect. SQL Injection handled in myselect service 😊

HTML

<kendo-grid-column field="deliveryUnitId" title="Delivery Unit">
  <ng-template kendoGridCellTemplate let-dataItem>
    {{displayDeliveryUnitId(dataItem.deliveryUnitId)?.name}}
  </ng-template>
  <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column" let-formGroup="formGroup">
    <kendo-dropdownlist [defaultItem]="{id: 1, name: 'NONE'}" [data]="ddlDeliveryUnitId" textField="name"
      valueField="id" [valuePrimitive]="true" [formControl]="formGroup.get('deliveryUnitId')" required
      (filterChange)="onSearchDeliveryUnitId($event)" [filterable]="true" width="auto">
    </kendo-dropdownlist>
  </ng-template>
</kendo-grid-column>

 

(filterChange)="onSearchDeliveryUnitId($event)" onSearchDeliveryUnitId method populate dropdownlist item as user types

[filterable]="true" as you already know filterable=true enables a filter option in dropdownlist

 

 

 

TypeScript

ddlDeliveryUnitId: SelectModel[] = [];

ngOnInit () {
  this.ddlDeliveryUnitId = this.mySelect.ddlSelectClearNormal();
}

public displayDeliveryUnitId (id: number): any {
  return this.ddlDeliveryUnitId.find(x => x.id === id);
}
onSearchDeliveryUnitId (value) {
  const pSearch: ACSelectModel = {
    SearchText: value,
    SearchColumn: 'Unit',
    TableName: 'vwTXUnitList',
    DisplayColumns: 'Unit',
    IndexColumn: 'MTXUnitId',
    WhereClause: 'CompanyId=' + this.auth.getLoggedInCompanyId(),
    OrderByClause: 'name',
    IsNoneRecordRequired: false
  };
  if (value.length > 0) {
    this.mySelect.acSelect(pSearch).subscribe((res: SelectModel[]) => {
      this.ddlDeliveryUnitId = res;
    });
  }
}

 

I made one dynamic API which return me data from SQL view based on passed parameters.
this.mySelect.acSelect not exploring this service because it is internal and non-disclosable code of the app.

 

 

 

 

Service 

ddlSelectClearNormal (): SelectModel[] {
  let pSelect: SelectModel[] = [{ id: 1, name: 'NONE' }];
  return pSelect;
}

 

 

 

Regards,
Srinivas

 

 

[Dimiter Topalov]

Hi Srinivas,

Good job on finding a solution based on a DropDownList. I did not suggest its filtering functionality in the first place, because I was left with the impression you already had a DropDownList, but wanted to use a ComboBox instead as it does not need to be opened and configured for filtering before the end user could start typing the value the data would be filtered by.

The solution looks perfectly fine. As far as a potential SQL injection goes, this is more of a generic topic that is not specifically related to the DropDownList (or other Kendo UI for Angular components). Typically, the best practices suggest that all user-entered input should be validated/sanitized both on the client and on the server:

https://stackoverflow.com/a/44488534/7009923

In the specific use case for example, the filter value could be validated for and/or stripped from certain symbols before the request is sent. This could happen either before passing the pSearch object to the service:

const validatedValue = validate(value) // custom function returning the validated string, potentially stripped from all suspicious symbols
const pSearch: ACSelectModel = {
    SearchText: validatedValue,
...

... or in the mySelect.acSelect code before performing the actual remote server HTTP request.

Alternatively, the developer could not issue the HTTP request at all, if the user input contains suspicious symbols - just show a meaningful error/notification instead, prompting the end user to correct their search term so that it conforms with certain criteria (for example - The search term cannot contain ... - list of forbidden symbols).

When the chosen steps are performed on the client, another set of similar steps that check the received request should be performed on the server before performing the actual SQL query.

Regards,
Dimiter Topalov
Progress Telerik