Exposure Count/Column Issue

[Frankie Moran]

Hi there,

Needing a bit of help with the Grid MVC.

We have a grid which renders a column called 'Exposure' which has a template on it, where if the Exposure is <= 5 it displays a div, >= 6 and <=12 a different div, and > 12 a different div. These divs look like these:

Just before the grid we have an Exposure Count which counts all the colour ranges. (green 0-5, orange 6-12, and red >12) and displays these like this:

I am using Javascript to loop through the number of rows and calculate the totals for red, orange, and green by using

$("#RiskGrid").ejGrid("model").currentViewData[i].Exposure;

The first issue is that it only shows the the totals of the first pages data, rather than the first page and second page's totals. I would use .Datasource but if the user filters any of the columns then it will still display the total number in the datasource rather than the filtered data. I also need the totals to be added when the columns. Basically the exposure count should match what the number of items on the grid, i.e. Red (3), Orange (9), Green (7) would match 19 items on the bottom of the grid.

Is there any way of doing this?

Thanks,

Frankie

[Farveen Sulthana Thameeztheen Basha]

Hi Frankie, 

Thanks for contacting syncfusion support. 

We have analyzed your query and according to your requirement we have used the template column bound with different colors based on condition. If you want to perform  filtering operation on Template column, you need to define the “field” property for that particular column. Because in Grid, these operations are performed based on the field name.  

 

If you want to get the filtered records, you can use the getFilteredRecords method in the Grid. By using “ej.sum” you can get the sum of the respective Column by giving its fieldname as like below. Whereas when you sum the datasource it will display the total sum of the EmployeeID column. 

 

Please refer to the API and code example:- 

 

https://help.syncfusion.com/api/js/ejgrid#methods:getfilteredrecords 

  

https://help.syncfusion.com/aspnetmvc/grid/columns#column-template 

 

 

<input type="button" value="getFilteredRecords" id="getFilterrecords" /> 

 

@(Html.EJ().Grid<object>("FlatGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

        .AllowPaging() 

        .AllowFiltering() 

        .PageSettings(page => page.PageSize(7)) 

        .Columns(col => 

        { 

            col.Field("EmployeeID").HeaderText("Template Column").Template("#columnTemplate").Width(100).Add(); 

            .  .  . 

        }) 

        

   ) 

     <script type="text/x-jsrender" id="columnTemplate">  

            {{if EmployeeID > 4}}  

            <span class="label label-warning">{{:EmployeeID}}</span>  

            {{else}}  

            <span class="label label-success">{{:EmployeeID}}</span>  

            {{/if}}  

    </script> 

   

      <script> 

           $("#getFilterrecords").ejButton({ 

               text: "getFilteredRecords", click: function () { 

                   var obj = $("#FlatGrid").ejGrid("instance") 

                   Filterdata = ej.sum(obj.getFilteredRecords(), "EmployeeID"); //For Filtered records 

                   datasource = ej.sum(obj.model.dataSource, "EmployeeID")   // For whole datasource 

                   alert(Filterdata)                 

              } 

          })  

                  

     </script> 

 

 

        

 

Refer to the sample:- 

http://www.syncfusion.com/downloads/support/forum/130977/ze/Sample145862957680361.zip 

Regards, 

Farveen sulthana T 

[Frankie Moran]

Hi Farveen,

Thank you for your response. I have managed to get this working now! 

I have another question which is related to this scenario. 

Would it be possible to filter this column like this? 

So green would show you Exposures <= 5, orange would show you >= 6 and <=12, and red would show you exposures >= 13? 

Currently we are using the Excel type filter

Let me know if this would be possible

Thanks,
Frankie

[Prasanna Kumar Viswanathan]

Hi Frankie, 

To achieve your requirement, use filteredColumns property and refreshContent method of ejGrid. In change event of dropdown we check the condition of text and update the filtercolumn details in the filteredColumns property. Once we update the filtercolumn details we call the refreshContent method to get the filtered data in Grid.  

Find the code example and sample : 

@Html.EJ().DropDownList("selectCar").TargetID("carsList").Width("300").WatermarkText("Select a Car").ClientSideEvents(e => e.Change("drpvaluechange")) 

<div id="carsList"> 

    <ul> 

        <li>Green</li> 

        <li>Orange</li> 

        <li>Red</li> 

    </ul> 

</div> 

         

<br /> 

@(Html.EJ().Grid<object>("FlatGrid") 

                // .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource).UpdateURL("CellEditUpdate").InsertURL("CellEditInsert").RemoveURL("CellEditDelete").Adaptor(AdaptorType.RemoteSaveAdaptor)) 

            .Datasource((IEnumerable<object>)ViewBag.datasource) 

            ------------------------------ 

 

<script> 

    function drpvaluechange(args) { 

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

 

        if (args.text == "Green") { 

            grid.model.filterSettings.filteredColumns = [{ field: "EmployeeID", operator: "lessthanorequal", value: "5", predicate: "and", matchcase: true }]; 

        } 

        else if (args.text == "Red") { 

            grid.model.filterSettings.filteredColumns = [{ field: "EmployeeID", operator: "greaterthanorequal", value: "13", predicate: "and", matchcase: true }]; 

        } 

        else if (args.text == "Orange") { 

            grid.model.filterSettings.filteredColumns = [{ field: "EmployeeID", operator: "greaterthanorequal", value: "6", predicate: "and", matchcase: true }, { field: "EmployeeID", operator: "lessthanorequal", value: "12", predicate: "and", matchcase: true }];           

        } 

        grid.refreshContent(); 

    } 

Sample: http://www.syncfusion.com/downloads/support/forum/130977/ze/Sample14586223755571 

Refer to the Help documents.  

https://help.syncfusion.com/api/js/ejgrid#members:filtersettings-filteredcolumns 

https://help.syncfusion.com/api/js/ejgrid#methods:refreshcontent 

Regards, 

Prasanna Kumar N.S.V 

 

[Frankie Moran]

Hi Prasanna,

Is there anyway to put this filter inside the excel filter type, in the items bit? 

So instead of 1-6, it would show Green, Orange, and Red where the relevant colour would show the relevant range of number range? i.e. Green <= 5, Orange >=6 AND <= 12, Red >=13

Thanks,

Frankie

[Prasanna Kumar Viswanathan]

Hi Frankie, 

We can put the values as Green, Orange and Red inside the excel filter for the respective values. But in our current implementation of excel filter, it is not feasible to perform filter operation with that values. So, it can be achieved externally. Using headerTemplate feature we render the excel filter icon in the column header. When we click the filter icon it open the dropdownlist with the respective values(Green, Orange and Red). When we select value from the dropdownlist it will perform the filter operation. So, if you need a sample with this please update us.  

Regards, 

Prasanna Kumar N.S.V 

[Frankie Moran]

Hi Prasanna,

Could you provide me with a sample for that or code listing to show me how this could be accomplished! 

Thanks again,

Frankie 

[Prasanna Kumar Viswanathan]

Hi Frankie, 

We consider your requirement as a custom sample and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates 

 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents  

Regards, 

Prasanna Kumar N.S.V