Grid filter shows database field value instead of code modified grid field

[John Fleet]

I have a grid which has a code modified field as follows:

<script>

                function queryCellInfo(args){

                if (args.column.field == "Fixture_Cup")

                    {var value = args.cell.textContent

                        if (value == 1) {args.cell.textContent = "Brinton Cup"}

                        else if (value == 2) { args.cell.textContent = "Woodbine Cup" }

                        else if (value == 3) { args.cell.textContent = "Glass Competition" }

                        else if (value == 4) { args.cell.textContent = "Plate Competition" }}}

</script>

This works fine but the filter shows database field value instead of the value(s) above.

Is it possible to get the filter to show modified value instead of actual field value ?

Screenshot shows my dilemma.

Regards,

John

Attachment: filter_7a9db8e2.zip

[Pon Selva Jeganathan]

Hi John,

Thanks for contacting syncfusion forum

Query: Is it possible to get the filter to show modified value instead of actual field value ?

Based on your query, we understand you need to change the excel filter popup. We achieved your query, by using the actionBegin event of the Grid. In which we have changed the datasource dynamically to rendering the checkbox list.

Please refer to the below code snippet,

    <script type="text/javascript">

 

     <ej:Grid ID="OrdersGrid" runat="server" AllowPaging="true" AllowSelection="true" AllowFiltering ="true">

…

                <FilterSettings FilterType="Excel" />         

    <ClientSideEvents ActionBegin="begin" QueryCellInfo="querycellinfo" />

 

    </ej:Grid>

   <script type="text/javascript">

       function begin(args) {

           if (args.requestType == "filterchoicerequest"  && args.filterModel.fName == "EmployeeID") {

               args.filterModel._dataSource = [{ EmployeeID: "Brinton Cup" }, { EmployeeID: "Woodbine Cup" }, { EmployeeID: "Glass Competition" }, { EmployeeID: "Plate Competition" }];

           }

                    }

Please refer to the below screenshot,

And we have discussed same in the knowledge base documentation.  Please refer to the below KB documentation:

https://www.syncfusion.com/kb/7580/how-to-change-the-datasource-for-the-checkbox-list-in-excel-filtering

Note: By default, all the Grid actions like Filtering, Sorting, Grouping, etc., are performed based on the values in the dataSource.

Kindly get back to us for further assistance.

Regards,
Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[John Fleet]

Hi Pon, thank you for your reply. Unfortunately this is not what I need. 

There are 4 competitions only involved in this query and they are as follows:

 "Brinton Cup", "Woodbine Cup", "Glass Competition" and "Plate Competition".

 

The datasource field "Fixture_Cup" contains a value of 1,2,3 or 4 which is modified by  QueryCellInfo="querycellinfo" for display to become "Brinton Cup" or "Woodbine Cup" or "Glass Competition" or "Plate Competition" for the viewer.

The grid filter shows the datasource field value of 1,2,3 or 4 instead of  "Brinton Cup" or "Woodbine Cup" or "Glass Competition" or "Plate Competition".

Also, your script seems to hard code the filter to show all 4 items when less than 4 of the competitions may actually exist on the database.

Basically what I need  if possible is to see the grid filter (and the displayed grid field) to show  "Brinton Cup" instead of "1",  "Woodbine Cup" instead of "2" etc etc.

Hope this helps,

Regards .. John

[Pon Selva Jeganathan]

Hi John,

Thanks for the update.

Query Basically what I need  if possible is to see the grid filter (and the displayed grid field) to show  "Brinton Cup" instead of "1",  "Woodbine Cup" instead of "2" etc etc.

Based on your query, we understand you need to change the excel filter popup datasource based on your database value.

Please refer to the below code snippet,

    <script type="text/javascript">

 

     <ej:Grid ID="OrdersGrid" runat="server" AllowPaging="true" AllowSelection="true" AllowFiltering ="true">

…

                <FilterSettings FilterType="Excel" />         

    <ClientSideEvents ActionBegin="begin" QueryCellInfo="querycellinfo" />

 

    </ej:Grid>

   <script type="text/javascript">

function begin(args) {

            

            

             //initially popup open

             if (args.requestType == "filterchoicerequest" && args.filterModel.fName == "EmployeeID" && flag == false) {

                 filpopdaata = [];

                 flag = true;

                 var val = this.model.dataSource;// here you can set the database value

 

 

                   //here we get the unique value

                 const unique = [...new Set(val.map(item => item.EmployeeID))];

                 for (var i = 0; i < unique.length; i++) {

                     if (unique[i] == 1) {

                         filpopdaata.push({ EmployeeID: "Brinton Cup" });

                     }

 

                     else if (unique[i] == 2) { filpopdaata.push({ EmployeeID: "Woodbine Cup" }); }

 

                     else if (unique[i] == 3) { filpopdaata.push({ EmployeeID: "Glass Competition" }); }

 

                     else if (unique[i] == 4) { filpopdaata.push({ EmployeeID: "Plate Competition" }); }

                 }

                 args.filterModel._dataSource = filpopdaata;

 

             }

                    }

Kindly get back to us for further assistance.

Regards,
Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[John Fleet]

Hi  again ... I cannot get this to work, maybe I have coded it wrong ... not sure what to do with this.model.datasource. The filter contains nothing.

Here is my script :

   <script type="text/javascript">

       function begin(args) {

           //initially popup open

           if (args.requestType == "filterchoicerequest" && args.filterModel.fName == "Fixture_Cup" && flag == false) {

               filpopdaata = [];

               flag = true;

               var val = this.model.dataSource;// here you can set the database value

               //here we get the unique value

               const unique = [...new Set(val.map(item => item.Fixture_Cup))];

               for (var i = 0; i < unique.length; i++) {

                   if (unique[i] == 1) {

                       filpopdaata.push({ Fixture_Cup: "Brinton Cup" });

                   }

                   else if (unique[i] == 2) { filpopdaata.push({ Fixture_Cup: "Woodbine Cup" }); }

                   else if (unique[i] == 3) { filpopdaata.push({ Fixture_Cup: "Glass Competition" }); }

                   else if (unique[i] == 4) { filpopdaata.push({ Fixture_Cup: "Plate Competition" }); }

               }

               args.filterModel._dataSource = filpopdaata;

           }

       }

   </script>

Does this look right ? Another screenshot enclosed.

Many thanks, John

Attachment: screenshot_17536066.zip

[Pon Selva Jeganathan]

Hi John,

Thanks for the update.

We are working on this query with high priority. And we need time to find a feasible solution of your issue. We will update further details on or before 23^rd August 2022. Until then we value your patience.

Regards,  

Pon selva   

[Pon Selva Jeganathan]

Hi John,

Thanks for your patience.

Query : not sure what to do with this.model.datasource.

In the previously shared code example, the this.model.dataSource is referred the grid dataSource value. You can get the grid datasource value using grid instance.

Please refer to the below code snippet,

function begin(args) {

             var obj = $("#Grid").ejGrid("instance");// grid instance

 

            

            

             //initially popup open

             if (args.requestType == "filterchoicerequest" && args.filterModel.fName == "EmployeeID" && this.getFilteredRecords().length == 0) {

                 debugger;

                 filpopdaata = [];

                 flag = true;

                 var val = obj.model.dataSource;

                 const unique = [...new Set(val.map(item => item.EmployeeID))];//get the unique value

                 for (var i = 0; i < unique.length; i++) {

                     if (unique[i] == 1) {

                         filpopdaata.push({ EmployeeID: "Brinton Cup" });

                     }

 

                     else if (unique[i] == 2) { filpopdaata.push({ EmployeeID: "Woodbine Cup" }); }

 

                     else if (unique[i] == 3) { filpopdaata.push({ EmployeeID: "Glass Competition" }); }

 

                     else if (unique[i] == 4) { filpopdaata.push({ EmployeeID: "Plate Competition" }); }

                 }

                 args.filterModel._dataSource = filpopdaata;

 

             }

             // if grid is already filtered any column

             else if (args.requestType == "filterchoicerequest" && args.filterModel.fName == "EmployeeID"  && this.getFilteredRecords().length>0) {

                 var filpopupdaata = [];

               

                 var val1 = this.getFilteredRecords();

                 const unique = [...new Set(val1.map(item => item.EmployeeID))];

                 for (var i = 0; i < unique.length; i++) {

                     if (unique[i] == 1) {

                         filpopupdaata.push({ EmployeeID: "Brinton Cup" });

                     }

 

                     else if (unique[i] == 2) { filpopupdaata.push({ EmployeeID: "Woodbine Cup" }); }

 

                     else if (unique[i] == 3) { filpopupdaata.push({ EmployeeID: "Glass Competition" }); }

 

                     else if (unique[i] == 4) { filpopupdaata.push({ EmployeeID: "Plate Competition" }); }

                 }

…

                 args.filterModel._dataSource = filpopupdaata;

             }

 

         }

In the above code example, we initially open the filter popup of the employeeID column(i.e., cell value is changed using the querycellinfo event), then we get the grid’s datasource value and get the unique value from that field. Based on the field value, we change the filterpopup value and assign this value into the filterModel’s dataSource. Otherwise, we will collect the unique value from the filtered records using the getFilteredRecords method. And use this value into the filterModel’s dataSource.

Kindly get back to us for further assistance.

Regards,
Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[John Fleet]

Hi , thank you for your reply.

Unfortunately this just shows an empty filter. I have abandoned this so will seek another way to get the filter working.

Thank you for all your help.

Warm regards, John

[Pon Selva Jeganathan]

Hi John,

Thanks for the update.

Please get back to us if you need any further assistance. We are happy to assist you.

Regards,

Pon selva