Disable an item in DropDownList when it's present in grid

[Charles]

Hi,

I have a grid with a drop down list column which is populated with data from the database. So when l select a particular item from the Drop Down List, it should be in disable state when i click on the DropDownList property again. In other words, all the items in the DropDownList that are present in the grid should be in disable state so that it would not allow duplicate. Kindly assist. see my codes below

this.productParams = {

create: () => {

this.itemElem = document.createElement('input');

return this.itemElem;

},

read: () => {

return this.itemObj.text;

},

destroy: () => {

this.itemObj.destroy();

},

write: (args) => {

this.itemObj = new DropDownList({

dataSource: new DataManager({

url: 'api/Product',

adaptor: new ODataV4Adaptor(),

}),

query: new Query().take(10000),

fields: { value: 'Id', text: 'ProductName' },

text: args.rowData[args.column.field],

change: (args) => {

this.detailgrid.editModule.formObj.element.querySelector("#" + this.detailgrid.element.id + "Category" as any).ej2_instances[0].value = args.itemData.Category;

this.detailgrid.editModule.formObj.element.querySelector("#" + this.detailgrid.element.id + "UnitPrice" as any).ej2_instances[0].value = args.itemData.UnitPrice;

this.detailgrid.editModule.formObj.element.querySelector("#" + this.detailgrid.element.id + "CostPrice" as any).ej2_instances[0].value = args.itemData.CostPrice;

},

placeholder: 'Item',

floatLabelType: 'Always',

});

this.itemObj.appendTo(this.itemElem);

},

};

<ejs-grid #grid id="grid" [dataSource]='data' allowSorting="true"

allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' allowResizing='true' >

<e-columns>

<e-column field='Id' headerText='ID' isPrimaryKey='true' width='110' > e-column>

<e-column field='ProductName' headerText='Product Name' width='170' [edit]='productParams' [validationRules]='itemrules' defaultValue="Select Item">e-column>

<e-column field='Category' headerText='Category' width='0' isIdentity="true" allowEditing="true">e-column>

<e-column field='UnitPrice' headerText='Unit Price' width='120' textAlign="right" format='N2'>e-column>

<e-column field='CostPrice' headerText='Unit Cost' width='120' textAlign="right" format='N2' defaultValue="0.00">e-column>

e-columns>

ejs-grid>

Regards

Charles

[Pavithra Subramaniyam]

Hi Charles,

You can achieve your requirement by adding the “e-disabled” class for the required items inside the “open” event of DropDownList component. Please refer to the below code example, API, and sample link for more information.

write: (args) => {

  this.itemObj = new DropDownList({

    .  .  .

      open: (args) => {

    // getting the current view CustomerID for comparison

    var disabledItem = this.grid

      .getCurrentViewRecords()

      .map((e) => e['CustomerID']);

    // get the component popup list element

    let lis = (

      this.itemObj as any

    ).popupObj.element.getElementsByTagName('li');

    for(let li of lis) {

      let value = li.getAttribute('data-value');

      if (disabledItem.indexOf(value) > -1) {

        li.classList.add('e-disabled');

        li.style.pointerEvents = 'none';

        if (disabledItem.indexOf(this.itemObj.value as string) > 0) {

          // if you enter the input value as same as disabled value then reset the value.

          this.itemObj.value = null;

        }

      }

    }

  },

  });

this.itemObj.appendTo(this.itemElem);

},

 

API        : https://ej2.syncfusion.com/documentation/api/drop-down-list/#open

Sample : https://stackblitz.com/edit/angular-xmthdn?file=src%2Fapp.component.ts

Please get back to us if you need further assistance on this.

Regards,

Pavithra S

[Charles]

Hi Pavithra,

Thank you for your efforts. The code you have provided work for local data binding. I tried it with remote binding but it didn't work . See codes below that l've tried.

this.productParams = {

create: () => {

this.itemElem = document.createElement('input');

return this.itemElem;

},

read: () => {

return this.itemObj.text;

},

destroy: () => {

this.itemObj.destroy();

},

write: (args) => {

this.itemObj = new DropDownList({

dataSource: new DataManager({

url: 'api/Product',

adaptor: new ODataV4Adaptor(),

}),

query: new Query().take(10000),

fields: { value: 'Id', text: 'ProductName' },

text: args.rowData[args.column.field],

change: (args) => {

this.detailgrid.editModule.formObj.element.querySelector("#" + this.detailgrid.element.id + "Category" as any).ej2_instances[0].value = args.itemData.Category;

this.detailgrid.editModule.formObj.element.querySelector("#" + this.detailgrid.element.id + "UnitPrice" as any).ej2_instances[0].value = args.itemData.UnitPrice;

this.detailgrid.editModule.formObj.element.querySelector("#" + this.detailgrid.element.id + "CostPrice" as any).ej2_instances[0].value = args.itemData.CostPrice;

},

placeholder: 'Item',

floatLabelType: 'Always',

open: (args) => {

var disabledItem = this.grid

.getCurrentViewRecords()

.map((e) => e['ProductName']);

// get the component popup list element

let lis = (

this.itemObj as any

).popupObj.element.getElementsByTagName('li');

for (let li of lis) {

let value = li.getAttribute('data-value');

if (disabledItem.indexOf(value) > -1) {

li.classList.add('e-disabled');

li.style.pointerEvents = 'none';

if (disabledItem.indexOf(this.itemObj.value as string) > 0) {

// if you enter the input value as same as disabled value then reset the value.

this.itemObj.value = null;

}

}

}

},

});

this.itemObj.appendTo(this.itemElem);

},

};

<ejs-grid #grid id="grid" [dataSource]='data' allowSorting="true"

allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' allowResizing='true' >

<e-columns>

<e-column field='Id' headerText='ID' isPrimaryKey='true' width='110' > e-column>

<e-column field='ProductName' headerText='Product Name' width='170' [edit]='productParams' [validationRules]='itemrules' defaultValue="Select Item">e-column>

<e-column field='Category' headerText='Category' width='0' isIdentity="true" allowEditing="true">e-column>

<e-column field='UnitPrice' headerText='Unit Price' width='120' textAlign="right" format='N2'>e-column>

<e-column field='CostPrice' headerText='Unit Cost' width='120' textAlign="right" format='N2' defaultValue="0.00">e-column>

e-columns>

<ejs-grid

Regards

Charles

[Pavithra Subramaniyam]

Hi Charles,

Since you are setting different fields (Id & ProductName) for the value and text properties in your drop down list, we suggest the “innerText” to get the list value to compare instead of the “data-value” attribute. Please refer to the below code example in which we highlighted the modified code.

open: (args) => {

  var disabledItem = this.grid

    .getCurrentViewRecords()

    .map((e) => e['ProductName']);

  // get the component popup list element

  let lis = (

    this.itemObj as any

  ).popupObj.element.getElementsByTagName('li');

  for (let li of lis) {

    let value = li.innerText;

    if (disabledItem.indexOf(value) > -1) {

      li.classList.add('e-disabled');

      li.style.pointerEvents = 'none';

      if (disabledItem.indexOf(this.itemObj.value as string) > 0) {

        // if you enter the input value as same as disabled value then reset the value.

        this.itemObj.value = null;

      }

    }

  }

},

 

[Charles]

Hi Pavithra,

Thank you for your response. I have tried the code you had suggested but it didn't work. see my sample below. Kindly assist.

https://stackblitz.com/edit/angular-xmthdn-qxbtlh?file=src%2Fapp.component.ts,src%2Fapp.component.html

Regards

Charles

[Pavithra Subramaniyam]

Charles,

We have tried to run the given sample, but the Grid is not loaded with data since the given URL is not working. So, we have replaced the URL and tried to reproduce the issue, but the DropDownList items have been disabled as expected. Please refer to the below screenshot sample link for more information.

https://stackblitz.com/edit/angular-xmthdn-xbrdvr?file=src%2Fapp.component.ts

To validate further please share a sample with proper URL which would load the Grid and DropDownList with data which will be helpful.

[Charles]

Hi Pavithra,

Thank you for the assist. The solution you had provided work fine on other grids except Master/Detail grid. I had also tried it on Master grid to test and it works fine. It doesn't work on Detail grid. My main problem is the detail grid. Kindly assist  https://stackblitz.com/edit/angular-xmthdn-2oyasu?file=src%2Fapp.component.ts,src%2Fapp.component.html

this.customerParams = {

create: () => {

this.itemElem = document.createElement('input');

return this.itemElem;

},

read: () => {

return this.itemObj.text;

},

destroy: () => {

this.itemObj.destroy();

},

write: (args) => {

this.itemObj = new DropDownList({

dataSource: new DataManager({

url: 'api/ProductAPI',

adaptor: new WebApiAdaptor(),

}),

query: new Query(),

fields: { value: 'Name', text: 'Name' },

text: args.rowData[args.column.field],

change: (args) => {

this.detailgrid.editModule.formObj.element.querySelector("#" + this.detailgrid.element.id + "Category" as any)

.ej2_instances[0].value = args.itemData.Category;

},

placeholder: 'Item',

floatLabelType: 'Always',

open: (args) => {

var disabledItem = this.grid

.getCurrentViewRecords()

.map((e) => e['Name']);

// get the component popup list element

let lis = (

this.itemObj as any

).popupObj.element.getElementsByTagName('li');

for (let li of lis) {

let value = li.innerText;

if (disabledItem.indexOf(value) > -1) {

li.classList.add('e-disabled');

li.style.pointerEvents = 'none';

if (disabledItem.indexOf(this.itemObj.value as string) > 0) {

// if you enter the input value as same as disabled value then reset the value.

this.itemObj.value = null;

}

}

}

},

});

this.itemObj.appendTo(this.itemElem);

},

};

Regards

Charles

[Pavithra Subramaniyam]

Charles,

In the shared sample, we could see that you are using the Master Grid instance instead of the details Grid instance inside the “open” event. So, we suggest using the “this.detailgrid” to achieve your requirement. Please refer to the below code example for more information.

write: (args) => {

  this.itemObj = new DropDownList({

      .   .   .

      open: (args) => {

         var disabledItem = this.detailgrid.getCurrentViewRecords().map((e) => e['Name']);

         .  .  .

         }

  });

  this.itemObj.appendTo(this.itemElem);

},

 

[Charles]

Hi Pavithra,

Thank you for the solution. I have been through many documentations and my project look this link https://www.boldreports.com/blog/create-report-viewer-component-in-angular-app-with-aspnet-core  but l have not seen any where on how to pass a grid row data to report viewer i.e. for printing. If a grid that populates data from the remote server (database) how would l call the report viewer which is in the Resources folder at my web API (asp,net core) to display the content of a row? 

The below sample is local data binding. this is how my grid look like. So when l click on print button (on any grid row) it should display the report view for that row. I will be glad if l can get a sample for this. Kindly assist https://stackblitz.com/edit/angular-xmthdn-exxgry?file=src%2Fapp.component.html,src%2Fapp.component.ts

Regards

Charles

[Pavithra Subramaniyam]

Hi Charles,

For the query regarding the Report-Viewer, we have created a new forum under your account. So please follow that forum for more updates.

Regards,

Pavithra S