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. Image for the cookie policy date

How to add input text into column table

Hi Everyone,


I have some issue when adding input text into column table. If I trying input some text and try to change next page my value laways back to blank.

anyone have solution

this my code and view





thanks

AH


3 Replies 1 reply marked as answer

SI Santhosh Iruthayaraj Syncfusion Team March 3, 2023 03:58 PM UTC

Hi Agung,


Query: How to add input text into column table


We have checked your query and that you want to make some columns always editable. We achieved your query using Column Template as per your request. We have used the created event to bind the data entered into the input to the Grid. We have attached a code snippet that will help you achieve your requirement.


[app.component.html]

 

<div class="control-section">

    <ejs-grid #grid id="grid" [dataSource]='data' [allowPaging]="true" [pageSettings]="pageSettings" (created)="created($event)">

        <e-columns>

            <e-column field='FirstName' headerText='First Name' width='150' textAlign='Center'>

                <ng-template #template let-data>

                    <input id='' [value]='data.FirstName' class='custemp e-input' type='text' style='width: 100%'>

                </ng-template>

            </e-column>

    .  .  .  .  .


[app.component.ts]

 

export class AppComponent {

   .  .  .  .  .

    created() {

        this.grid.element.addEventListener('keyup', function (e) {

            if ((e.target as any).classList.contains('custemp')) {

                var row = parentsUntil(e.target as any, 'e-row');

                var rowIndex = (row as any).rowIndex;

                var uid = row.getAttribute('data-uid');

                var grid = (document.getElementsByClassName('e-grid')[0] as any).ej2_instances[0];

                var rowData = grid.getRowObjectFromUID(uid).data;

                (rowData as any).FirstName = (e.target as any).value;

                grid.updateRow(rowIndex, rowData);

            }

        });

    }

}


Please find the sample and the documentation for make a Grid column always editable in the links below:


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


Documentation: https://ej2.syncfusion.com/angular/documentation/grid/editing/edit#how-to-make-a-grid-column-always-editable


If you have any further queries or concerns, please do not hesitate to let us know.


Regards,

Santhosh Iruthayaraj


Marked as answer

AH Agung Haryanto Pranyoto March 6, 2023 07:10 AM UTC

Hi Santhosh,


Thank you for the solutions. And how about using ejs-dropdownlist? I'm trying to use basic select options and success. But I want to change to an ejs-dropdownlist. How to use the event change of ejs-dropdownlist to get row info like input text.


Thank you

AH



SI Santhosh Iruthayaraj Syncfusion Team March 8, 2023 04:10 PM UTC

Hi Agung,


Query: How to use the event change of ejs-dropdownlist


We have validated your query and have come up with a solution that uses the change event of the ejs-dropdownlist to bind the changed value of the drop down to the Grid. We have created a code snippet that will help you achieve your requirement. Please find the snippet below:


[app.component.html]

 

<ejs-grid

    #grid

    id="grid"

    [dataSource]="data"

    [allowPaging]="true"

    [pageSettings]="pageSettings"

    (created)="created($event)"

  >

    <e-columns>

      <e-column

        field="EmployeeID"

        headerText="Employee ID"

        width="125"

        textAlign="Right"

        isPrimaryKey='true'

      ></e-column>

      <e-column field="Country" headerText="Country" width="200">

        <ng-template let-data #template>

          <ejs-dropdownlist

            id='Country'

            name='Country'

            [dataSource]="countryDistinctData"

            [popupHeight]="150"

            [popupWidth]="150"

            [fields]="fields"

            value={{data.Country}}

            (change)='onChange($event)'

          >

          </ejs-dropdownlist>

        </ng-template>

      </e-column>

    </e-columns>

  </ejs-grid>


[app.component.ts]

 

export class AppComponent {

    public data: Object[];

    public pageSettings: Object;

    @ViewChild('grid') grid: GridComponent;

    public editSettings: EditSettingsModel;

    public countryDistinctData: Object[];

    public fields: Object = { text: "Country", value: "Country" };

 

    ngOnInit(): void {

        this.countryDistinctData = DataUtil.distinct(

            this.data,

            "Country",

            true

        );

    }

 

    onChange(args) {

        this.grid.setCellValue(this.grid.getSelectedRecords()[0]['EmployeeID'], 'Country', args.value);

    }

}


You can also refer to the sample link we have provided for your reference:


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


If you have any further queries or concerns, please do not hesitate to reach out to us.


Regards,

Santhosh I


Loader.
Up arrow icon