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. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Edit group summary header and date formatting.

Edit group summary header and date formatting.

Hi,
I have a grouped grid with a summary header for each group. I'm using inline editing for group items but I would like to edit group summary information (shipping and tax) as well. I'd aslo like to control the column span for the summary info and remove line breaks. Please see screen shot. How would I go about doing that. Also, I'm trying to format date to show only MM/dd/yy but it's showing seconds as well.
Thanks!

Screen shot --> http://imgur.com/a/3pFa1

 @(Html.EJ().Grid<GetStudentOrderDetails_Result>("FlatGrid")
            .Datasource(ds => { ds.Json(Model).UpdateURL(Url.Action("UpdateItem", "Common", null, Request.Url.Scheme)); })
            .AllowPaging()
            .AllowGrouping()
            .AllowResizeToFit()
            .GroupSettings(group => { group.GroupedColumns(col => { col.Add("OrderId"); }); })
            .ShowSummary()
            .SummaryRow(row =>
            {
                row.ShowCaptionSummary(true)
                   .ShowTotalSummary(false)
                   .SummaryColumns(col =>
                   {
                       col.SummaryType(SummaryType.Minimum)
                          .DisplayColumn("ItemId")
                          .DataMember("Total")
                          .Format("{0:C}")
                          .Prefix("Sub Total: ")
                          .Add();
                       col.SummaryType(SummaryType.Minimum)
                          .DisplayColumn("VendorName")
                          .DataMember("Tax")
                          .Format("{0:C}")
                          .Prefix("Tax: ")
                          .Add();
                       col.SummaryType(SummaryType.Minimum)
                         .DisplayColumn("Quantity")
                         .DataMember("Shipping")
                         .Format("{0:C}")
                         .Prefix("Shipping: ")
                         .Add();
                       col.SummaryType(SummaryType.Minimum)
                         .DisplayColumn("Price")
                         .DataMember("OrderTotal")
                         .Format("{0:C}")
                         .Prefix("Total: ")
                         .Add();
                   }).Add();
            })
            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.InlineForm); })
            .AllowFiltering()
            .FilterSettings(filter => { filter.FilterType(FilterType.Menu); })
            .ToolbarSettings(toolbar =>
            {
                toolbar.ShowToolbar().ToolbarItems(items =>
                {
                    items.AddTool(ToolBarItems.Add);
                    items.AddTool(ToolBarItems.Edit);
                    items.AddTool(ToolBarItems.Delete);
                    items.AddTool(ToolBarItems.ExcelExport);
                    items.AddTool(ToolBarItems.WordExport);
                    items.AddTool(ToolBarItems.PdfExport);
                    items.AddTool(ToolBarItems.Search);
                });
            })
            .ClientSideEvents(e => e.TemplateRefresh("templateRefresh"))
            .Columns(col =>
            {
                col.Field("OrderId").HeaderText("Order ID").AllowEditing(false).Add();
                col.Field("OrderDate").HeaderText("Order Date").AllowEditing(false).Format("{0:MM/dd/yyyy}").Add();
                col.Field("ItemId").IsPrimaryKey(true).HeaderText("Item ID").Add();
                col.Field("VendorName").AllowEditing(false).HeaderText("Vendor").Add();
                col.Field("Quantity").HeaderText("Quantity").Add();
                col.Field("Price").HeaderText("Unit Price").Format("{0:C}").Add();
                col.HeaderText("Line Total").Template("<span>{{:Quantity * Price }}</span>").Add();
                col.Field("Tax").HeaderText("Tax").Format("{0:C}").Visible(false).Add();
                col.Field("Shipping").HeaderText("Shipping").Format("{0:C}").Visible(false).Add();
                col.Field("Total").HeaderText("Total").Format("{0:C}").Visible(false).Add();
                col.Field("OrderTotal").HeaderText("OrderTotal").Format("{0:C}").Visible(false).Add();
            }))

4 Replies
JK Jayaprakash Kamaraj Syncfusion Team April 4, 2017 11:15 AM UTC

Hi Ekdahl, 

Thank you for contacting Syncfusion support. 

Query 1 : I have a grouped grid with a summary header for each group. I'm using inline editing for group items but I would like to edit group summary information (shipping and tax) as well. I'd aslo like to control the column span for the summary info and remove line breaks 
 
We have analysed your code example and found that you have used UpdateURL to perform CRUD operation in server side but you have missed to mention AdaptorType. So, we suggest you to mention AdaptorType as RemoteSaveAdaptor in Grid. 
 
 
 
 
    @(Html.EJ().Grid<object>("Grid") 
                                           .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource).UpdateURL("/Home/Update").Adaptor(AdaptorType.RemoteSaveAdaptor)) 
                       .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.InlineForm); }) 
.. 
    ) 
 
 
We can’t able to edit summary row in edit. But, if you change any value in summary column then automatically summary row value updated in Grid.  Please refer to the below sample. 
 
 
Also, in Grid we have Custom Summary feature. This can be used to create summary values based on your required custom logic and calculations. To enable Custom Summary, summaryType should be custom and value property need to define as function. In this property value function, you need to use Grid instance to access model.dataSource and model.currentViewData. After the custom calculation, the returned value will be displayed in corresponding Summary cell. Please refer to the below help document and online demo sample 
 
 
 
 
Query 2 :  I'd aslo like to control the column span for the summary info and remove line break 
 
We suggest you to use template property of SummaryColumns in Grid. This property used to add the template for the summary value of dataMember given. Please refer to the below help document and code example. 
 
 
<script id="templateData" type="text/x-jsrender"> 
    Freight has Average of {{:summaryValue}} in  dollars 
</script> 
 
    @(Html.EJ().Grid<object>("Grid") 
..          .SummaryRow(row => 
          { 
             row.ShowTotalSummary(false) 
                 .SummaryColumns(col => 
                 { 
                   
                     col.SummaryType(SummaryType.Sum) 
                        .DisplayColumn("Freight") 
                        .DataMember("Freight") 
                        .Prefix("Sum = ") 
                        .Template("#templateData") 
                        .Add(); 
                 }).Add(); 
          }) 
          .GroupSettings(group => { group.GroupedColumns(col => { col.Add("OrderID"); }); }) 
.. 
 
 
 
Query 3: I'm trying to format date to show only MM/dd/yy but it's showing seconds as well. 
 
We suspect that you have data value as string . So, if you have date value as string we suggest to you convert date value as string to data object in Load event of ejGrid. Please refer to the below help document and code example. 


    @(Html.EJ().Grid<object>("Grid") 
                                           .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource).UpdateURL("/Home/Update").Adaptor(AdaptorType.RemoteSaveAdaptor)) 
                       .. 
 
         .GroupSettings(group => { group.GroupedColumns(col => { col.Add("OrderID"); }); }) 
          .Columns(col => 
          { 
              col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(80).Add(); 
              col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(80).Add(); 
              col.Field("OrderDate").HeaderText("Order Date").AllowEditing(false).Format("{0:MM/dd/yyyy}").Add(); 
              col.Field("ShipCity").HeaderText("Ship City").Width(90).Add(); 
              col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(80).Format("{0:C}").Add(); 
          }).ClientSideEvents(eve=>eve.Load("load")) 
    ) 
<script type="text/javascript"> 
    function load(args){ 
        var len = this.model.dataSource.dataSource.json.length;  
        for (var i = 0; i < len; i++) { 
 
            ej.createObject("OrderDate", new Date(this.model.dataSource.dataSource.json[i].OrderDate), this.model.dataSource.dataSource.json[i]) //convert the date string to date object  
        } 
} 
</script> 
 
Regards, 
 
Jayaprakash K. 
 


OE Ola Ekdahl April 5, 2017 06:47 PM UTC

Thanks Jayaprakash, this is very helpful. I ran into an issue when trying to use the Template property. It complains that no such property exist. Is there a namespace I need to import?

CS1061: 'SummaryColumnBuilder<object>' does not contain a definition for 'Template' and no extension method 'Template' accepting a first argument of type 'SummaryColumnBuilder<object>' could be found (are you missing a using directive or an assembly reference?)

OE Ola Ekdahl April 5, 2017 08:06 PM UTC

Please ignore the previous reply. I had to update my Syncfusion.EJ and Syncfusion.EJ.MVC assembly references from 14.x to 15.x.

JK Jayaprakash Kamaraj Syncfusion Team April 6, 2017 11:42 AM UTC

Hi Ekdahl, 
 
Thanks for letting us know that issue resolves at your end. Please contact us if you need any further assistance. 
  
Regards, 

Jayaprakash K. 


Loader.
Up arrow icon