Adding Custom Text Box with icon in tree grid

[Tan Ken Sing]

Hi,

Is there any example for creating the TextBox with Icon/button (containing event mouseclick) in tree grid using the below method to handle?

Currently, there only the example handle in html but not in the figure provided.

[Shek Mohammed Asiq Abdul Jabbar]

Hi Tan Ken Sing,

Greetings from Syncfusion.

Query #:- Is there any example for creating the TextBox with Icon/button?

As per your request, we have placed the text box in edit template(in ts instead of html) and icon near the textbox by creating a span element. On clicking the span element, we placed the mouse click event.

Please refer to the following code snippet.

App.component.html

<e-column

        field="taskName"

        headerText="Task Name"

        width="200"

        [validationRules]="tasknamerules"

        [edit]="dpParams"

      >

 

App.component.ts

this.dpParams = {

      create: () => {

        this.elem = document.createElement('div');

        return this.elem;

      },

      read: () => {

        return this.editElement.value;

      },

      destroy: () => {},

      write: (args) => {

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

        this.editElement.value = args.rowData[args.column.field];

        this.elem.append(this.editElement);

        this.editElement.style.marginTop = '10px';

 

        //creating span element

        var spanEle = document.createElement('span');

 

        //appending search icon

        spanEle.classList.add('e-input-group-icon', 'e-search-icon', 'e-icons');

        this.elem.appendChild(spanEle);

        spanEle.style.marginLeft = '5px';

        spanEle.addEventListener('click', this.doOpen.bind(this, args.rowData));

      },

    };

  }

  doOpen(args) {

      //trigger on clicking search icon

    alert("search")

  }

 

Please refer to the sample : https://stackblitz.com/edit/angular-ekuybc-p39meu?file=src%2Fapp.component.html

Please refer to the documentation for edit template : https://ej2.syncfusion.com/angular/documentation/treegrid/editing/batch-editing#automatically-update-the-column-based-on-another-column-edited-value-in-batch-mode

Kindly get back to us for further assistance.

Regards,

Shek Mohammed Asiq

[Tan Ken Sing]

Hi,

For the provided sample, it work nicely.

However, Is there any example if we manually create using for example TextBox Component? Currently, performing like the below figure will not allow you to edit the text box.

[Pon Selva Jeganathan]

Hi Tan Ken Sing,

Query: However, Is there any example if we manually create using for example TextBox Component? Currently, performing like the below figure will not allow you to edit the text box.

Based on your query, we understand that you want to syncfusion textbox component while editing. We achieved this requirement by creating a <input> element manually and bind the TextBox component to that input element. This will allow you to edit the textbox.

Please refer to the below code example,

 

 <ejs-treegrid

    ….

  >

    <e-columns>

..

      <e-column

        field="taskName"

        headerText="Task Name"

        width="200"

        [edit]="dpParams"

      >

 

 this.dpParams = {

      create: () => {

        this.elem = document.createElement('div');

        return this.elem;

      },

      read: () => {

        return this.editElement.value;

      },

      destroy: () => {},

      write: (args) => {

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

        this.editElement.id = 'Input_val';

        let inputobj: TextBox = new TextBox({

          placeholder: 'Name',

          floatLabelType: 'Auto',

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

        });

        inputobj.appendTo('#Input_val');

 

        this.elem.append(this.editElement);

        this.editElement.style.marginTop = '10px';

        var spanEle = document.createElement('span');

        spanEle.classList.add('e-input-group-icon', 'e-search-icon', 'e-icons');

        this.elem.appendChild(spanEle);

        spanEle.style.marginLeft = '5px';

        spanEle.addEventListener('click', this.doOpen.bind(this, args.rowData));

      },

    };

  }

  doOpen(args) {

    alert('search');

  }

 

Please refer to the below sample,

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

Kindly get back to us for further assistance.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.