How to implement search bar.

Hey I have created one demo project where Student fill all details like first name , last name , address and Student Id is a AutoNumber , I want to develop search bar on home page where student can search by student Id. I have done these using list view but it shows Student Id on home page and I do not want to show student Id but it using student id . If I taken list view on home page then it shows Student Id’s below the search bar.   If I search Id in the search bar it is working fine.   I do not want to show Student Id on home Page below the search bar I just want Search bar on homepage and search using student id. I guess I taken student id in the list view thats why it shows on homepage but if I remove that attribute then it doesent show student id on homepage but if I search Student Id in the search bar then its not showing anything.  If I remove Student Id from list view then its showing blank when we search in the search bar , where student id is already present in my database.   Is there is any wrong or any other way to do it.    
2 answers

Hi Shubam,

First Solution

WHatever you did to search using student id is correct. But inside the listvew, you need to add few attributes to display the student details when you search using student id.

For example,

Add the Student First Name and Last Name inside the listview. Then search using the student ID, you will be displayed with the respective details of student based on the student id entered in search box

Second Solution

For example, you want display student details only when you perform search, instead of using listview, you can use templategrid.

Because, listview directly display the data to the user before search but in templategrid we can control using following options. 

Update the show search bar dropdown and Wait for search radio button option under datasource tab of template grid like below and add Student ID , Student first name and Lastname in templategrid. So Until you search nothing will be displayed. When you perform search you will be displayed with respective student details based on the student id entered in search box


You are welcome. Create one custom class for template grid.Mention the newly created class inside the templategrid as shown below

For example, customtemplategrid

.customtemplategrid .mx-grid-search-input




Add this css in your custom.scss file and then compile the file using Koala complier. After compilation, this css will be added to your custom.css file. This css will help you to change the width of searchbox