Do not need all data rendering in the grid, only selected data bind in the grid

[Rizwan]

Hi,

I need help with the data bind in the grid.

My requirement is to select data bind in the grid.

I am trying (RowDataBound) it working fine.

But (DataBound). does not work.

Do not need all data rendering in the grid, only selected data bind in the grid.

The HTML, script, and image are attached.

Attachment: Selected_data_bind_in_the_grid_do_not_need_all_data_rendering_9ca52942.zip

[Vignesh Sivagnanam]

Hi Rizwan 

Greetings from Syncfusion support 

Before providing solution to your requirement, we need some more information to understand your exact requirement. So please share the below details, 

1. Explain your exact requirement in the grid with video demonstration. 

2. Are you want to filter the particular data and bind the filtered data to the grid at initial rendering? 

3. Are you want to bind the row data to the another grid, while selecting the row in the grid? 

Please get back to us for further assistance, 

Regards 

Vignesh Sivagnanam 

[Rizwan]

My requirement is,

I have multiple grids views and multiple datasources and i want to keep one datasource

the only difference between multiple grids is few targeted data will not view in one grid but will appear in other.

Currently, I created multiple datasource for each grid.

I have highlighted the rows in the attached video and want to filter the particular data and bind the filtered data to the grid at initial rendering.

https://share.vidyard.com/watch/Tr8UGx2GfxHKAubnKgdmn4?

[Thiyagu Subramani]

Hi Rizwan, 

Thanks for your update. 

Based on your shared information we suspect that you want to filter the particular data and bind the filtered data to the grid at initial rendering. To achieve this requirement we suggest you to use below code whatever you want because here we have filtered data using where query and assigned that filtered data to the Grid in dataBound event.  

<div class="control-section"> 

    @Html.EJS().Grid("DefaultPaging").DataBound("DataBound").DataSource(ds => ds.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor").InsertUrl("/Home/Insert").RemoveUrl("/Home/Remove").UpdateUrl("/Home/Update")).Columns(col => 

{ 

    col.Type("checkbox").Width("50").Add(); 

    col.Field("CustomerID").HeaderText("Customer Name").Width("170").Add(); 

    . . . . . . . 

 

}).. . . . ..Render() 

</div> 

 

<script> 

    var flag = true; 

    function DataBound() { 

        if (flag) { 

            flag = false; 

            var predicate = new ej.data.Predicate('CustomerID', 'equal', "ANTON"); 

            new ej.data.DataManager({ url: 'Home/UrlDatasource', adaptor: new ej.data.UrlAdaptor }) 

                .executeQuery(new ej.data.Query().where(predicate)) 

                .then((e) => { 

                    var gridObj = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

                    gridObj.dataSource = e.result; 

                }); 

        } 

    } 

</script> 

 

For information about our DataManger query please refer to the below documentation. 

UG: https://ej2.syncfusion.com/documentation/data/querying/ 

https://ej2.syncfusion.com/documentation/data/querying/#filtering 

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

Regards, 

Thiyagu S 

[Rizwan]

Hi,

Thank you for solving the work on fine in the data-bound.

But in my case, it does not work next time when again grid render.

Can you please provide me the same solution? Created or Load functions.

Because my grids are inside of the Tabs with ajax call in partial view.

[Thiyagu Subramani]

Hi Rizwan, 

Thanks for your update. 

As per you suggestion we have provided filter data solution in load event. Please refer it and use it whatever you want. 

<div class="control-section"> 

    @Html.EJS().Grid("DefaultPaging").Load("Load").. . . . .Render() 

</div> 

 

<script> 

   // This event allows customization of Grid properties before rendering. 

    function Load() {  

            var predicate = new ej.data.Predicate('CustomerID', 'equal', "ANTON");  

            new ej.data.DataManager({ url: 'UrlDatasource', adaptor: new ej.data.UrlAdaptor })  

                .executeQuery(new ej.data.Query().where(predicate))  

                .then((e) => { 

                         var gridObj = document.getElementsByClassName('e-grid')[0].ej2_instances[0];  

                    gridObj.dataSource = e.result;  

                });  

        }  

 

</script> 

API : https://ej2.syncfusion.com/documentation/api/grid/#load 

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

Regards, 

Thiyagu S

[Rizwan]

Thanks, the provided solution is working fine. 

[Thiyagu Subramani]

Hi Rizwan, 

Thanks for the update. 

We are happy to hear that the provided solution works at your end.  

Please get back to us if you need further assistance. 

Regards, 

Thiyagu S