-1

Not able to getting the result in grid-view after i text enter in text-box in SPFx.

Framework: no-java-script framework selected.

this is my code:

import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './SearchgridviewWebPart.module.scss';
import * as strings from 'SearchgridviewWebPartStrings';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';

export interface ISearchgridviewWebPartProps {
  description: string;
}
export interface ISPLists {
  value: ISPList[];
}
export interface ISPList {
  PR_Number: string;
  Description: string;
  Request_Date: string;
} 

export default class SearchgridviewWebPart extends BaseClientSideWebPart<ISearchgridviewWebPartProps> {

  private _getListData(): Promise<ISPLists> {
    let queryString: string = '';
    let queryStringforPR: string = '';
    let searchboxVal: string=(this.domElement.querySelector('#searchbox') as  HTMLInputElement).value;
    if(searchboxVal!=""){
      queryString="$filter=((substringof('"+searchboxVal+"',PR_Number)))";
      queryStringforPR= searchboxVal;
      console.log("qurery string value is " + queryString);
    }
    return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/GetByTitle('PurchaseRequest')/Items?${queryString}`, SPHttpClient.configurations.v1)
        .then((response: SPHttpClientResponse) => { 
         // debugger;
          return response.json();
        });
  }


  private _renderListAsync(): void {    
    this._getListData()
    .then((response) => {
      console.log("respone is " + this._renderList(response.value))
      this._renderList(response.value);
    });
  }


  private _renderList(items: ISPList[]): void {
    let html: string = '<table class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
    html += `<th>PR_Number</th><th>Description</th><th>Request_Date</th>`;
    items.forEach((item: ISPList) => {
      html += `
          <tr>
          <td>${item.PR_Number}</td>
          <td>${item.Description}</td>
          <td>${item.Request_Date}</td>
          </tr>
          `;
    });
    html += `</table>`;
    const listContainer: Element = this.domElement.querySelector('#spListContainer');
    listContainer.innerHTML = html;
  }


  private _setSearchBtnEventHandlers(): void {
    this.domElement.querySelector('#searchBtn').addEventListener('click', () => {         
        this._renderListAsync();
    }); 
 }  


 public render(): void {
  this.domElement.innerHTML = `
   <div class="${styles.gListItems}">
   <div class="${styles.container}">
     <div class="ms-Grid-row ms-fontColor-white ${styles.row}">
       <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">       
         <p class="ms-font-l ms-fontColor-white" style="text-align: center">Demo : Retrieve Data from SharePoint List</p>
       </div>
     </div>
     <div class="ms-Grid-row ms-fontColor-white ${styles.row}"> 
       <input id="searchbox" type="textbox"/><input id="searchBtn" type="button" value="Search"/>     
       <br>
       <div id="spListContainer" />
     </div>
   </div>
 </div>`;
 this._renderListAsync();
 this._setSearchBtnEventHandlers();
}

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

OutPut:

enter image description here

  • Are you getting any error in browser console?? – Ganesh Sanap Oct 25 at 6:48
  • Response getting undefined at: .then((response: SPHttpClientResponse) => { – Venu Oct 25 at 8:05
  • By the page-load gridview has binding that is fine. But when search the text in textbox not able to getting the result on gridview of text related data – Venu Oct 25 at 8:22
  • Are you sure you have data in your list which has 103 in PR_Number column? – Ganesh Sanap Oct 25 at 9:11
  • I tested the code snippet in my side, the filter "_api/web/lists/GetByTitle('PurchaseRequest')/Items$filter=((substringof('xxx',PR_Number)))" is working in my side, please make sure the value in searchbox existed in the list, it should be able to bind data to table if it is valid. – Jerry_MSFT Oct 25 at 9:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.