1. Home
  2. Forum
  3. ASP.NET MVC
  4. Exposure Count/Column Issue

Exposure Count/Column Issue

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

7 Replies
FS Farveen Sulthana Thameeztheen Basha Syncfusion Team June 15, 2017 12:51 PM UTC

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:- 
 
  
 
 
<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:- 


Regards, 

Farveen sulthana T 


FM Frankie Moran June 15, 2017 01:22 PM UTC

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

PK Prasanna Kumar Viswanathan Syncfusion Team June 16, 2017 10:32 AM UTC

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(); 
    } 


Refer to the Help documents.  



Regards, 
Prasanna Kumar N.S.V 
 


FM Frankie Moran June 16, 2017 12:34 PM UTC

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

PK Prasanna Kumar Viswanathan Syncfusion Team June 19, 2017 12:57 PM UTC

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 


FM Frankie Moran June 19, 2017 01:21 PM UTC

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 

PK Prasanna Kumar Viswanathan Syncfusion Team June 20, 2017 12:27 PM UTC

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 
 

Regards, 
Prasanna Kumar N.S.V 


Loader.
Up arrow icon