We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Exposure Count/Column Issue

Thread ID:

Created:

Updated:

Platform:

Replies:

130977 Jun 14,2017 06:19 AM Jun 20,2017 08:27 AM ASP.NET MVC 7
loading
Tags: Grid
Frankie Moran
Asked On June 14, 2017 06:19 AM

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 [Syncfusion]
Replied On June 15, 2017 08:51 AM

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 


Frankie Moran
Replied On June 15, 2017 09:22 AM

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 [Syncfusion]
Replied On June 16, 2017 06:32 AM

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 
 


Frankie Moran
Replied On June 16, 2017 08:34 AM

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 [Syncfusion]
Replied On June 19, 2017 08:57 AM

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
Replied On June 19, 2017 09:21 AM

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 [Syncfusion]
Replied On June 20, 2017 08:27 AM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;