Accessing Child Grid Settings

[Stefano Capobianco]

Hi, i've a hierarchical grid and i need to accessing to the parameter of the child.

For the parent grid i can do that $("#Grid").ejGrid("instance").clearFiltering(); to reset the parameter setting and 

how can i set other parameters in a similar way this.model.filterSettings.filteredColumns.push({ field: "EndDate", operator: "equal", value: null, predicate: "and", matchcase: true });.

How can i do the same for the childgrid ?

When i try to set the id for the child grid the browser return me an error like "missing }"

Thanks in advance

Stefano Capobianco

[Farveen Sulthana Thameeztheen Basha]

Hi Stefano, 

Thanks for contacting Syncfusion Support. 

We have checked your query and we are unable to reproduce your reported problem at our end. We have enabled the filtering  for the child Grid at initial Load by using this.model.filterSettings.filterColumns  on Load event of the Grid.  

<input type="text" value=10258 id="textbox" /> 

<ej-grid id="Grid" datasource=ViewBag.orderdata is-responsive="true" allow-filtering="true" enable-responsive-row="true" allow-scrolling="true" allow-paging="true" > 

    <e-columns> 

        <e-column field="EmployeeID" is-primary-key="true" header-text="EmployeeID" text-align="Right" width="30"></e-column> 

        <e-column field="CustomerID" header-text="Title" width="80"></e-column> 

    </e-columns> 

   <ej-grid query-string="EmployeeID" allow-paging="true" allow-filtering="true" load="Load"> 

        <e-datamanager json="(IEnumerable<object>)ViewBag.empdata" adaptor="remoteSaveAdaptor"></e-datamanager> 

        <e-columns> 

            <e-column field="OrderID" header-text="Employee ID" text-align="Right" width="75"></e-column> 

            . . . 

       </e-columns> 

    </ej-grid> 

</ej-grid> 

 

<script> 

    

    function Load(args) {  

        var textboxValue = $("#textbox").val();//get the value from text box which is resides in outside of the Grid 

        this.model.filterSettings.filteredColumns.push({ field: "OrderID", operator: "equal", value: textboxValue }); //apply the filter in filtered column property         

     } 

</script> 

Please refer to the sample:- 

http://www.syncfusion.com/downloads/support/forum/134840/SADCC1~11899746136.ZIP 

After following the above solution, still facing issue please share us the following details  

1. Share Grid code example(both in server and client side). 

2. Screenshot of the issue. 

Regards, 

Farveen sulthana T 

[Stefano Capobianco]

This is my GridLoadChild function

        function GridChildLoad(args) {

            this.model.queryString = "ProvinceId";

            this.model.filterSettings.filteredColumns.push({ field: "EndDate", operator: "equal", value: null, predicate: "and", matchcase: true });

        }

I need, form a js function to do the same as

    <script type="text/javascript">

        $("#showRows").click(function (e) {

            if ($('#optionDropdown > li > a').hasClass('selected')) {

                $('#showRows').removeClass('selected');

            }

            else {

                $('#showRows').addClass('selected');

                $("#Grid").ejGrid("instance").clearFiltering();

                GridRefresh();

            }

            e.preventDefault();

        });

    </script>

and specially to set the query parameter or as default or as new parameters

Thanks

Stefano

[Sathyanarayanamoorthy Eswararao]

Hi Stefano,  

 

Query:  I've a hierarchical grid and I need to accessing to the parameter of the child. 

 

In this query we suspect that you want to access the  parameters for the parent grid and the child grid. But in the given code snippets you have changed the querystring parameter of the childgrid in the load event. Also you have pushed some columns in the filtered columns and cleared the filtering for the click event in the dropdownlist. We could not understand your query clearly so we need some details for further clarification of your query. 

 

Usage of the querystring property for clarification: 

 

The querystring is a property that has to be specified within the Grid within the Grid, which defines the relation between the parent and child grid. The querystring property is used to denote the primaryKey field of the parent grid which is to be mapped with the foreignKey field of the child grid. Based on the mapping, the child grid records are filtered from the table and is bound as datasource for the child grid. 

 

 

Please share the following details for further clarification of your query. 

 

1.What do you want to achieve using querystring parameter of the childgrid. 

 

2.Do you want to filter the columns in the child grid based on the query string parameter of the grid. 

 

3.Complete code snippet of your sample. 

 

 

Regards, 

Sathyanarayanamoorthy 

[Stefano Capobianco]

Hi Sathyanarayanamoorthy i will try to clarify my requirements. Joint to this message you can find my index file and relative grid.

Inside the grid i have a parent and a child grid. At grid startup i set, for the parent and the child i condition. Where the parent and child grid are showed, i can clear the condition when i click:

<ul id="optionDropdown" class="dropdown-menu dropdown-user">

     <li>

          <a rel='nofollow' href="#" id="showRows">

               <i class="fa fa-check"></i>

                    <span class="search-option">Visualizza le righe annullate</span>

          </a>

     </li>

</ul>

So i can activate the following function:

    <script type="text/javascript">

        $("#showRows").click(function (e) {

            if ($('#optionDropdown > li > a').hasClass('selected')) {

                $('#showRows').removeClass('selected');

            }

            else {

                $('#showRows').addClass('selected');

                $("#Grid").ejGrid("instance").clearFiltering();

                GridRefresh();

            }

            e.preventDefault();

        });

    </script>

and i would like that all conditions ( even parent and child ) was canceled. At the moment the only canceled is the condition into the parent grid.

In the same way, when i unchecked the dropdown i would like to re set the initial condition in both parent and child.

I hope that can explain you my requirements.

Thanks

Stefano

Attachment: Regions_bf824e2b.7z

[Farveen Sulthana Thameeztheen Basha]

Hi Stefano, 

We are unable to understood your requirement. Could you please share us the following details to find the cause of the issue. 

1. In which scenario, Did you expect to clear the condition for child and parent Grid. 

2. Have you expect to control the parent and child Grid actions using external dropdown List. 

3. Elaborate your requirement. 

4.Graphical Representation of your requirement. 

The provided information will be helpful to provide you response as early as possible. 

Regards, 

Farveen sulthana T 

[Stefano Capobianco]

Hi Farveen i will try to aswer at your queries:

1. In which scenario, Did you expect to clear the condition for child and parent Grid. 

In my scriptyou can find the following code:

    <script type="text/javascript">

        $("#showRows").click(function (e) {

            if ($('#optionDropdown > li > a').hasClass('selected')) {

                $('#showRows').removeClass('selected');

Here i need to set newly the startup condition for the child and parent grids

            }

            else {

                $('#showRows').addClass('selected');

                $("#Grid").ejGrid("instance").clearFiltering();

                GridRefresh();

Here i need to clear all condition for both parent and child. At the moment i can clear only the parent grid. I don't know how can manipulate the child grid and in help have not found any suggestion.

            }

            e.preventDefault();

        });

    </script>

The showRows is defined as following:

<ul id="optionDropdown" class="dropdown-menu dropdown-user">

     <li>

          <a rel='nofollow' href="#" id="showRows">

               <i class="fa fa-check"></i>

                    <span class="search-option">Visualizza le righe annullate</span>

          </a>

     </li>

</ul>

2. Have you expect to control the parent and child Grid actions using external dropdown List. 

No and to programmatically accessing to the method and function of the child grid ( the same remarks for the st question, in help i haven't found any information about that)

3. Elaborate your requirement. 

I hope after the first answer the requirements was clarified

Thanks in advance

Stefano

[Farveen Sulthana Thameeztheen Basha]

Hi Stefano, 

We have checked your query and you need to apply clear filtering option to child Grid. We have achieved your requirement by finding the child Grid id by using clicking on the corresponding headercell and stored the id value and access the id value on external button click and clear the Filtering values. 

 

Please refer to the code example:- 

 

<input type="button" value="clearFilter" onclick="myFunction()" /> 

      $(function () { 

<ej-grid id="Grid" datasource=ViewBag.orderdata is-responsive="true" allow-filtering="true" enable-responsive-row="true" allow-scrolling="true" allow-paging="true" > 

    <e-columns> 

        <e-column field="EmployeeID" is-primary-key="true" header-text="EmployeeID" text-align="Right" width="30"></e-column> 

        .  . 

    </e-columns> 

   <ej-grid query-string="EmployeeID" allow-paging="true" allow-filtering="true" load="Load"> 

        <e-datamanager json="(IEnumerable<object>)ViewBag.empdata" adaptor="remoteSaveAdaptor"></e-datamanager> 

        <e-columns> 

            <e-column field="OrderID" header-text="Employee ID" text-align="Right" width="75"></e-column> 

            . . . 

       </e-columns> 

    </ej-grid> 

</ej-grid> 

 

       <script type="text/javascript"> 

                   var id = null; 

                  $(".e-grid").on('click','.e-grid', function(e){ 

                      var id = $(e.target).closest('[id]').attr("id"); 

                               

                  }); 

                  function myFunction(){ 

                      var grid = $("#"+id).ejGrid("instance");  

                      grid.clearFiltering(); 

                  } 

           </script> 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T