Filter datagrid

[Tarik]

Regards, i am using Syncfusion DataGrid and i want filter grid content.I am planning to use Search Filtering but i want to send the filter value in my controller and use only the data i want to show from my database. Is that possible and if it is how can i perform that action?

<ejs-grid id="Grid" actionComplete="actionComplete" toolbar="@(new List<string>() {"Search" })"  allowResizing="true">

                <e-grid-filtersettings type="Menu"></e-grid-filtersettings>

                <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editsettings>

                <e-data-manager json="@Model.mentors" updateUrl="/Application/UpdateMentorRecord" removeUrl="/Application/DeleteMentorRecord" insertUrl="/Application/InsertMentorRecord" adaptor="RemoteSaveAdaptor"></e-data-manager>

                <e-grid-columns>

                    <e-grid-column isPrimaryKey="true" field="Id" visible="false" headerText="First Name" width="105"></e-grid-column>

                    <e-grid-column field="FirstName" headerText="First Name" width="105"></e-grid-column>

                    <e-grid-column field="LastName" headerText="Last Name" width="105"></e-grid-column>

                    <e-grid-column field="User.Email" headerText="Email" width="105"></e-grid-column>

                </e-grid-columns>

            </ejs-grid>

[Thiyagu Subramani]

Hi Tarik, 

Thanks for your update. 

Based on your shared information we suspect that you want to send search filter value to the server side.  We have achieved your requirement by sending search filter value to the server side using ajax request. By default when applying search filter in Grid actionBegin will trigger args.requestType as searching and it returns the filter value in its searchString parameter. So using this actionBegin and searchString you can achieve your requirement as per your needs. 

Please refer to the below code and sample link. 

<ejs-grid id="Grid" allowPaging="true" actionBegin="actionBegin"  toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete", "Search" })"> 

    <e-data-manager json="@ViewBag.DataSource.ToArray()" adaptor="RemoteSaveAdaptor"></e-data-manager> 

     

. . . . . . . . 

</ejs-grid> 

 

<script> 

    var SearchValue; 

    function actionBegin(args) { 

        if (args.requestType === 'searching') { 

            SearchValue = args.searchString; 

            var ajax = new ej.base.Ajax({ 

                type: "POST", 

                url: "/Home/SelectRecord", 

                contentType: "application/json; charset=utf-8", 

            }); 

            var data = JSON.stringify({ FilteredValue: SearchValue }); 

            ajax.send(data).then(); 

            ajax.onSuccess = result => { 

 

            }; 

        } 

    } 

<script> 

public ActionResult SelectRecord([FromBody]SelectedModel row) 

        { 

            //perfoerm your action here as per your needs. 

            return Json(row); 

        } 

        public class SelectedModel 

        { 

           public string FilteredValue { get; set; } 

        }  

Sample link: https://www.syncfusion.com/downloads/support/forum/164765/ze/UrlAdaptor-CRUD-NormatEdit1795270890 

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

Regards, 

Thiyagu S. 

[Tarik]

Thanks a lot, i have one more question, when i expand a row i want collapse all other expanded rows except the row i clicked, can you please help me with that?

[Balaji Sekar]

Hi Tarik, 

 

Query:  When i expand a row i want collapse all other expanded rows except the row i clicked 

 

Based on your query we have achieved the collapse the expanded all row except currently expanded row using detailDataBound. In this event, we have found the expanded row and collapse that rows with row index in the collapse method except the currently expanded row. 

 

Please refer the below code example for more information. 

 

[index.cshtml] 

 

<ejs-grid id="Grid" allowPaging="true" detailDataBound="detailDataBound"  toolbar="@(new List<string>() {"Add", "Edit","Update", "Delete", "Search" })">  

      

. . . . . . . .  

</ejs-grid>  

 

function  detailDataBound (args) { 

    var grid = document.getElementById("Grid").ej2_instances[0]; 

    var currentRow = args.detailElement.parentElement.previousElementSibling; 

    var currentRowIndex = parseInt( 

      currentRow.getAttribute("aria-rowindex"), 

      10 

    ); 

    var expandedRows = grid.element.querySelectorAll(".e-detailrowexpand"); 

    [].slice.call(expandedRows).forEach(item => { 

      var row = item.parentElement; 

      var index = parseInt(row.getAttribute("aria-rowindex"), 10); 

      if (currentRowIndex != index) { 

        grid.detailRowModule.collapse(index); 

      } 

    }); 

  }, 

 

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

 

Regards, 

Balaji Sekar