Grid - Search - Details

[Sarosh Wadia]

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

[Pavithra Subramaniyam]

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> 

Documentation: https://ej2.syncfusion.com/16.1.24/aspnet/documentation/grid/row.html?syntax=tag#detail-template  

Demo                  : https://aspdotnetcore.syncfusion.com/Grid/DetailTemplate#/material 

Sample               : http://www.syncfusion.com/downloads/support/directtrac/general/ze/detail_template1993435887  

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> 

Documentation: https://ej2.syncfusion.com/16.1.24/aspnet/documentation/grid/searching.html?syntax=tag 

Regards, 

Pavithra S. 

[Sarosh Wadia]

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

[Pavithra Subramaniyam]

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> 

Documentation: https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#rowselected  

                              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> 

Documentation: https://ej2.syncfusion.com/documentation/toolbar/api-item.html?lang=typescript#align  

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> 

Documentation: https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#created  

Sample               : http://www.syncfusion.com/downloads/support/directtrac/general/ze/searching-detail1107903394  

Regards, 

Pavithra S. 

[Sarosh Wadia]

Hi!

Query #1: 

Query #2: 

Query #3: 

Are all working great!

Thanks a lot for the examples.

[Pavithra Subramaniyam]

  

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. 

[Sarosh Wadia]

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

[Pavithra Subramaniyam]

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> 

Documentation: https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#rowselected 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/parent-child-998497043  

Regards, 

Pavithra S. 

[Sarosh Wadia]

Hi!

That worked!

Thanks

[Pavithra Subramaniyam]

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.  

[Sarosh Wadia]

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

[Pavithra Subramaniyam]

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> 

Documentation: https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/api-grid.html#height-string---number 

Regards, 

Pavithra S. 

[Sarosh Wadia]

Hi!

Yes, that worked perfectly!

Thanks

[Mani Sankar Durai]

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.