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.

Edit group summary header and date formatting.

Thread ID:

Created:

Updated:

Platform:

Replies:

129787 Apr 3,2017 03:45 PM Apr 6,2017 07:42 AM ASP.NET MVC 4
loading
Tags: Grid
Ola Ekdahl
Asked On April 3, 2017 03:45 PM

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

Jayaprakash Kamaraj [Syncfusion]
Replied On April 4, 2017 07:15 AM

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. 
 


Ola Ekdahl
Replied On April 5, 2017 02:47 PM

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?)

Ola Ekdahl
Replied On April 5, 2017 04:06 PM

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

Jayaprakash Kamaraj [Syncfusion]
Replied On April 6, 2017 07:42 AM

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. 


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.

;