1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Grid - Search - Details

Grid - Search - Details

Hi!

I have a Customer View with a J2 (ejs-grid) "Grid" a "Search TextBox" and a "Detail's Panel". The Grid shows only the Customer Name (like a List) when the user clicks on a row I would like the "Details Panel" to show that customer's details (other columns i.e. Address, phone, etc.)

1] What is the best way to refresh the panel without refreshing the whole page (View) as the user navigates in the grid.
2] When the user types something in the search box the grid should filter rows that match that condition.

Thanks


13 Replies
PS Pavithra Subramaniyam Syncfusion Team April 3, 2018 03:47 PM UTC

Hi Sarosh, 

Query #1: 

We have checked your query and you can achieve your requirement by using the Detail template feature of Essential JavaScript 2 Grid component. By using Detail template you can refresh the detail panel on navigate the grid without refreshing the whole page. Please refer to the below code example , documentation link and demo link. 

[view] 
<ejs-grid id="Grid" dataSource="ViewBag.datasource"  detailTemplate="#detailtemplate"> 
            <e-grid-columns>                 
                <e-grid-column field="FirstName" headerText="First Name" width="110"></e-grid-column> 
                <e-grid-column field="LastName" headerText="Last Name" width="110"></e-grid-column> 
                <e-grid-column field="Title" headerText="Title" width="150"></e-grid-column>                 
                <e-grid-column field="Country" headerText="Country" width="110"></e-grid-column> 
            </e-grid-columns> 
</ejs-grid>  
 
<script type="text/x-template" id="detailtemplate"> 
    <table class="detailtable" width="100%"> 
        <colgroup> 
            <col width="35%" /> 
            <col width="35%" /> 
            <col width="30%" /> 
        </colgroup> 
        <tbody> 
            .      .      . 
             <tr> 
                <td> 
                    <span style="font-weight: 500;">Address: </span> ${Address} 
                </td> 
                <td> 
                    <span style="font-weight: 500;">Phone: </span> ${HomePhone} 
                </td> 
            </tr> 
        </tbody> 
    </table> 
</script> 





Query #2: 

You can search the grid column by using search feature of the Grid. If you want to search the grid based on the field in the detail panel then you can add that field to the grid column and set the visible property as false. Please refer to the below code example and documentation link. 

[view] 
<ejs-grid id="Grid" dataSource="ViewBag.datasource"  toolbar="@(new List<string>() {"Search" })" detailTemplate="#detailtemplate"> 
            <e-grid-columns>                 
                <e-grid-column field="FirstName" headerText="First Name" width="110"></e-grid-column>  
               // to search the based on the Address field which is present in the detail panel 
                <e-grid-column field="Address"  visible = false></e-grid-column>     
            </e-grid-columns>                                                                  
 </ejs-grid>  
 
<script type="text/x-template" id="detailtemplate"> 
    <table class="detailtable" width="100%"> 
        <tbody> 
            .      .      . 
             <tr> 
                <td> 
                    <span style="font-weight: 500;">Address: </span> ${Address} 
                </td> 
                <td> 
                    <span style="font-weight: 500;">Phone: </span> ${HomePhone} 
                </td> 
            </tr> 
        </tbody> 
    </table> 
</script> 



Regards, 
Pavithra S. 



SW Sarosh Wadia April 5, 2018 03:02 AM UTC

Hi!

>>1] What is the best way to refresh the panel without refreshing the whole page (View) as the user navigates in the grid.
What you have show is ok but that's not exactly what I am looking for:
I would like to have the Customer Grid on the left half of the page/view with only the Name Column and a separate container outside the grid (with the details for that Customer) on the right half of the page but always open and as the user navigates in the grid the container with the details on the right should refresh.

>>2] When the user types something in the search box the grid should filter rows that match that condition.
This is working great! 
1] Is it possible to left align the search text box and button?
2] Is it possible to start the search as soon as the user starts typing rather than wait for the user to type and then click the button?

Thanks



PS Pavithra Subramaniyam Syncfusion Team April 5, 2018 11:57 AM UTC

Hi Sarosh, 

Query #1: 

You can achieve your requirement by using rowSelected event which will trigger after row selected. In that event you can get the selected row details and can show the data on the container. While navigating to the next page you can refresh the container value in the action complete event. Please refer to the below code example and documentation link. 
 
[index.xchtml] 
<ejs-grid id="Grid" allowPaging=true rowSelected="select" created='created' actionComplete="complete" toolbar="toolbarItems "> 
            .   .   . 
       </ejs-grid> 
 
<div> 
<B>Details:</B> 
Address : <input class="add" /></br> 
Phone     : <input class="ph" /></br> 
</div> 
     
<script> 
    // triggers after rowselected 
    function select(args) { 
        document.querySelector('.add').value = args.data.Address; 
        document.querySelector('.ph').value = args.data.HomePhone; 
    } 
     
    function complete(args) { 
          // triggers while paging 
        if (args.requestType == 'paging') { 
            document.querySelector('.add').value = ''; 
            document.querySelector('.ph').value = ''; 
        } 
    } 
</script> 

                              https://ej2.syncfusion.com/documentation/grid/api-grid.html#actioncomplete  

Query #2: 

You can set the alignment to the Search box by using align property of the toolbar items. Please refer to the below code example. 

[index.chtml] 
@{ 
 
    List<object> toolbarItems = new List<object>(); 
    toolbarItems.Add(new { text = "Search", align = "left", tooltipText = "Search", prefixIcon = "e-expand", id = "expandall" }); 
} 
 
<ejs-grid id="Grid" allowPaging=true toolbar="toolbarItems "> 
    .   .   . 
</ejs-grid> 


Query #3: 

You can achieve your requirement by adding keyup event to the search box in the created event of Grid component. Please refer to the below code example , documentation link and sample link. 

[index.chtml] 
<ejs-grid id="Grid" allowPaging=true created='created'  toolbar="toolbarItems "> 
            .   .   . 
       </ejs-grid> 
 
<script> 
     //triggers after grid created 
    function created(args) { 
        document.querySelector('#Grid_searchbar').addEventListener('keyup', function (e) { 
           var grid = document.getElementById('Grid').ej2_instances[0] 
            // Sends a search request to the Grid 
            grid.search(this.value); 
        }); 
    } 
    </script> 



Regards, 
Pavithra S. 



SW Sarosh Wadia April 6, 2018 03:17 AM UTC

Hi!

Query #1: 
Query #2: 
Query #3: 

Are all working great!

Thanks a lot for the examples.



PS Pavithra Subramaniyam Syncfusion Team April 7, 2018 04:38 AM UTC

  
Hi Sarosh, 

Thanks for your update. 

We are glad to hear that the provided solution helped you. 

Please contact us if you have any queries. 

Regards, 
Pavithra S. 


SW Sarosh Wadia April 8, 2018 12:57 AM UTC

Hi!

One more question!

What is the best/optimized way to show a parent grid and a child grid in the same view? 

When I navigate rows in the parent grid it should use the parent grid's selected row's ID and retrieve the child rows and show then in the child grid

I want both grids to be shown at the same time. Can the child grid be shown in a partial view or directly in the main view?

Thanks

PS Pavithra Subramaniyam Syncfusion Team April 9, 2018 01:12 PM UTC

Hi Sarosh, 

You can achieve your requirement by using rowSelected event in that event you can get the selected row data and using this details we can refresh the child grid datasource. We have prepared a sample in which we have shown the child grid from the selected row in parent grid. Please refer to the below code example and Sample link. 

[index.chtml] 
//Parent Grid 
<ejs-grid id="Grid" allowPaging=true rowSelected='created'> 
        <e-grid-pagesettings pageSize="4"> </e-grid-pagesettings> 
        .   .   .   
    </ejs-grid> 
// child Grid 
    <ejs-grid id="ChildGrid" allowPaging=true> 
        <e-grid-pagesettings pageSize="4"> </e-grid-pagesettings> 
       .   .   . 
   </ejs-grid> 
<script> 
    // triggers after rowselected 
function select(args) { 
         // instance for Child grid 
         var grid = document.getElementById('ChildGrid').ej2_instances[0] 
            new ej.data.DataManager({ 
                 url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders', 
                 adaptor: new ej.data.ODataAdaptor(), 
                 crossDomain: true 
             }).executeQuery(new ej.data.Query().where('EmployeeID', 'equal', args.data.EmployeeID).take(5)).then((e) => { 
                  
                 grid.dataSource = e.result;  // filterd data based on the EmployeeID of selected row 
             }); 
         }     
     
</script> 



Regards, 
Pavithra S. 


SW Sarosh Wadia April 16, 2018 01:21 AM UTC

Hi!

That worked!

Thanks

PS Pavithra Subramaniyam Syncfusion Team April 16, 2018 10:57 AM UTC

Hi Sarosh,  
 
Thanks for your update.  
 
We are glad to hear that the provided solution helped you.  
 
Please contact us if you have any queries.  
 
Regards,  
Pavithra S.  


SW Sarosh Wadia April 20, 2018 07:32 PM UTC

Hi!

How can I fix the Grid Height?

What I want is the Grid to always be of a fixed Height e.g. 300px and not shrink and grow based on the rows in it.

Thanks



PS Pavithra Subramaniyam Syncfusion Team April 23, 2018 12:06 PM UTC

Hi Sarosh, 

You can set the Grid content height by using the height property of Essential JavaScript 2 Grid component. Please Refer to the below code example and documentation link. 

[index.chtml] 
<ejs-grid id="Grid" height="300"> 
    <e-datamanager url='http://js.syncfusion.com/demos/ejservices//Wcf/Northwind.svc/Employees/' adaptor="ODataAdaptor" crossdomain="true"></e-datamanager> 
    <e-grid-columns> 
      .    .    . 
    </e-grid-columns> 
</ejs-grid> 


Regards, 
Pavithra S. 


SW Sarosh Wadia April 23, 2018 12:53 PM UTC

Hi!

Yes, that worked perfectly!

Thanks

MS Mani Sankar Durai Syncfusion Team April 24, 2018 04:29 AM UTC

Hi Sarosh,

 

We are happy to hear that your problem has been solved.

Please let us know if you need further assistance.

 

Regards,
Manisankar Durai. 


Loader.
Up arrow icon