1. Home
  2. Forum
  3. ASP.NET MVC
  4. Grid dynamic columns format and export issues

Grid dynamic columns format and export issues

Hello

I use a grid with dynamically added columns. The Columns are pushed to the grid in the "onLoad" event (as described here https://www.syncfusion.com/forums/126345/ienumerableltexpandoobjectgt-as-a-model-for-grid).

The columns are all displayed and the pdf export work as expected. However, there are 3 issues:
  1. There is a datetime column that should be displayed with the date part only. I use the format string "{0:ddd.mm.yyyy}". Even if I change the format string, the format is ignored. (this works fine if I use a grid with non-dynamic columns)
  2. The filter (menu type) for the datetime column is not working. When I set the filter, the resulting list of entries is always empty (might be connected to the first issue). (this works fine if I use a grid with non-dynamic columns)
  3. When exporting the grid as pdf, the columns just use the minimum width that no values are clipped. However, I would like the width to be 100% of the available space on the page. The same export method is used for grids that do not have dynamic columns and the width is 100% that time.

Do you have any solutions for these issues?

Thank you for your help.


Kind regards
Phil

7 Replies
VA Venkatesh Ayothi Raman Syncfusion Team November 6, 2017 12:45 PM UTC

Hi Phil, 

Thanks for using Syncfusion products. 

Query #1:”There is a datetime column that should be displayed with the date part only. I use the format string "{0:ddd.mm.yyyy}". Even if I change the format string, the format is ignored” and Query #2:” The filter (menu type) for the datetime column is not working. When I set the filter, the resulting list of entries is always empty” 
 
We were unable to reproduced the reported issue at our end and we have prepared a sample for your convenience which can be download from following link, 
 
 
In this sample, we have rendered the Grid with auto-genenrated columns and applying the date-format in Grid load event. Also, we have enabled the Filtering and filteringType as menu. Please refer to the following code example and Screenshot for your reference, 
Code example: 
function onLoad(args) { 
        var jsonObj = this.model.dataSource[0]; 
         
        if (this.model.columns.length == 0 && jsonObj) { 
            for (var field in jsonObj) { 
                var value = jsonObj[field]; 
                var format = null; 
                //from the object values type has been defined 
                //so you can dynamically assign them to the columns 
                type = value != null ? (value.getDay ? (value.getHours() > 0 || value.getMinutes() > 0 || value.getSeconds() > 0 || value.getMilliseconds() > 0 ? "datetime" : "date") : typeof (value)) : null; 
                     .  .  . 
                if (type == "boolean") 
                    editType = "booleanedit"; 
                else if (type == "date") { 
                    editType = "datepicker"; 
                    format = "{0:ddd.MM.yyyy}"; 
                } 
                . . .  
                    this.model.columns.push({ 
                        field: field, 
                        width: 50, 
                        type: type, 
                        editType: editType, 
                        headerText: field, 
                        format:format, 
                        textAlign: ej.TextAlign.Right 
                    }); 
            } 
        } 
    } 
 
Screenshot 1:”PDF exporting date-format”  
 
Screenshot 2:”Filtering the Grid” 
 

If you still face the same issue, then could you please provide following details about your requirement? 
1)      Share the Code example of Dynamic columns. 
2)      Share the issue exported PDF document. 
3)      Any script error thrown while filtering the record? If so, share the details and screenshot. 
4)      A sample if possible or modified the given sample as issue reproducible. 

Query #3:” When exporting the grid as pdf, the columns just use the minimum width that no values are clipped. However, I would like the width to be 100% of the available space on the page. The same export method is used for grids that do not have dynamic columns and the width is 100% that time” 

We have unclear about your requirement, could you please provide more details about your requirement? It would be helpful for us to find the problem and provide the solution as earliest. 

Regards, 
Venkatesh Ayothiraman. 


UN Unknown November 6, 2017 05:12 PM UTC

Hello


Thank you for your fast reply.

The code you provided did not help me, as I've already implemented it more or less the same way.

Here is my code for the generation of the dynamic columns:

function onGridLoad(args) {
        var jsonObj = this.model.dataSource[0];

        this.model.summaryRows.push({
            title: "@UI.Total",
            summaryColumns: []
        });

        if (this.model.columns.length === 0 && jsonObj) {
            for (var field in jsonObj) {
                if (field === "DateTime") {
                    this.model.columns.push({
                        field: field,
                        headerText: "@UI.Date",
                        type: "date",
                        filterType: "menu",
                        format: "{0:dd.MM.yyyy}"
                    });
                    continue;
                }
                this.model.columns.push({
                    field: field,
                    headerText: field,
                    type: "number",
                    filterType : "menu"
                });
                //add summary row
                this.model.summaryRows[0].summaryColumns.push({
                    summaryType: ej.Grid.SummaryType.Sum,
                    displayColumn: field,
                    dataMember: field
                });
            }
        }

}

The field "DateTime" is of type DateTime?, where the time part is set to 0. In my grid the time is displayed as well, even though the format should prevent that.
I can set the filter but then it does not find any results, even though I know for sure that it should return results.

For Issue 3:
The width of the table in the exported pdf is around 30% when the columns are added dynamically.
When they are defined from the beginning, the width of the table is 100% in the pdf.



Phil

VA Venkatesh Ayothi Raman Syncfusion Team November 8, 2017 03:11 AM UTC

Hi Phil, 

Thanks for the update. 

Query #1:”There is a datetime column that should be displayed with the date part only. I use the format string "{0:ddd.mm.yyyy}". Even if I change the format string, the format is ignored” and Query #2:” The filter (menu type) for the datetime column is not working. When I set the filter, the resulting list of entries is always empty”  
 
We have prepared a sample based on your code example that you have shared for us and we were unable to reproduced the reported issue at our end. Please refer to the following sample, 
 
 
Code example: 
function onLoad(args) { 
        var jsonObj = this.model.dataSource[0]; 
        .. . 
        if (this.model.columns.length == 0 && jsonObj) { 
            for (var field in jsonObj) { 
                if (field === "OrderDate") { 
                    this.model.columns.push({ 
                        field: field, 
                        headerText: field, 
                        type: "date", 
                        filterType: "menu", 
                        format: "{0:dd.MM.yyyy}" 
                    }); 
                    continue; 
                } 
. .  . 
                //add summary row 
                .  .  . 
        } 
    } 
 
We have also prepared a video demo for your convenience which can be download from following link, 
 
We suspect you are binding the date value is string instead of Date object. In JavaScript shows the Date using Date format. If the date value is string from server side like “2014-03-30T09:51” then We can convert this string to Date format using ej.IsJSON method. Otherwise its shown just string value which is passed in the server side. So, could you please ensure the Date string in above ISO format. 
The date format is not applied even if we passed the date string in ISO format then we can parse the grid data source using same ej.IsJSON in load event. Please refer to the following code example, 
 
Code example:  
 
@Load event  
function onLoad(args) {  
            var data = this.model.dataSource;  
            this.model.dataSource = ej.isJSON(data);//here we can parse the datasource as JSON  
        }  
 
We have also built-in Helper functions of ej.parseJSON. This method is used to parse the string to JSON format. Please refer to the following Help documentation for more information, 
  
If you still face the same issue, then could you please provide following details about your requirement?  
1)     Any script error thrown while filtering the record? If so, share the details and screenshot.  
2)     Essential Studio version and browser details 
3)     Scenario to reproduced the reported issue. 
4)     Share the first record JSON details. 
3)      A sample if possible or modified the given sample as issue reproducible.  

Query #3: ”Width of the PDF exported” 
For dynamic column, we don’t define the columns width. Since, we have segregated the columns width based on width which is provided by us.   
In this scenario, we don’t define the columns width for all columns. So, we have calculated the width for this column based Grid width. For example, the Grid width 800 and columns count is 20, then we have segregated the column width as 40 for each column. 
 
Maybe this the reason width of the table is around 30% when we added a dynamic column. Columns are exceeding when we bound the large number of columns to Grid as well as exporting to PDF. Because it is automatically split the columns when column size is larger than page size. This is the default behavior of PDF exporting. So, we suggest you to use following workaround for your requirement. 

We have achieved your requirement by increasing the page size for large number of columns. Please refer to the code example, 
public void ExportToPdf(string GridModel) 
        { 
            PdfExport exp = new PdfExport(); 
             
            GridProperties obj = ConvertGridObject(GridModel); 
             
           PdfDocument document = new PdfDocument(); 
            PdfGridLayoutFormat format = new PdfGridLayoutFormat(); 
            document.PageSettings.Orientation = PdfPageOrientation.Landscape;//set the page orientation 
            document.PageSettings.Size = PdfPageSize.A3;// Set the page size 
            IEnumerable
UN Unknown November 10, 2017 11:04 PM UTC

Hello

Thank you once again for your reply.


1 & 2:

Thank you for the video, but I know how to use the filter. It works perfectly fine with grids that do not have dynamically added columns. I tried the conversion of the datasource but it did not change anything, as it is already valid.

However, you were right about the date being just a string. In the datasource it was stored as e.g. "10.11.2017". In the "Load" event of the grid I loop through the whole datasource and create date objects from the strings and everything works fine now.

These issues are resolved. Thank you a lot for your help.


3:

It is not an option for me to change the pdf paper size to A3, it must be A4. Still, I tried it with A3, but nothing changed.

Some other things I noticed:

  • When there are only 2 columns, 100 % of the width is used.
  • When there are 11 columns, the width is around 30%.
  • When there are 15 columns, the width seems to be 100%.
Please find printscreens of the three pdfs in the attachment.

I have also tried setting the "CommonWidth" property of the grid, but that did not change anything. In the export function I manually chagned the width of all the columns of the "GridProperties" object before I call the Export method of the PdfExport. This did not change the pdf in any way.


Phil


Attachment: screenshots_e8499b9b.zip

VA Venkatesh Ayothi Raman Syncfusion Team November 13, 2017 10:37 AM UTC

Hi Phil, 

Thanks for the update. 

Query #1 & #2:”Date format issue and filter issue”  
We have very happy to hear that your requirement is achieved. 

Query #3:”PDF export Issue” 
We went through your printscreen screenshots that you have shared for us and we are able to reproduced the reported issue at our end while rendered the columns without defining the column’s width and disabling the IsAutoFit property in Export method. Please refer to the following scenario for issue replication procedure, 
Rendered the columns without defining the column’s width, 

.Columns(col => 
            { 
                col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Add(); 
                col.Field("CustomerID").HeaderText("Customer ID").EditTemplate(a => { a.Create("createML").Read("readML").Write("writeML"); }).ValidationRules(v => v.AddRule("required", true)).Add(); 
                col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Priority(4).Add(); 
                col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Priority(3).Format("{0:C}").Add(); 
                }) 

Also, disable the IsAutoFit property in Grid, 
public void ExportToPdf(string GridModel) 
        { 
            PdfExport exp = new PdfExport(); 
            var DataSource = new NorthwindDataContext().OrdersViews.Take(100).ToList(); 
            GridProperties obj = ConvertGridObject(GridModel); 
            exp.Export(obj, DataSource, "Export.pdf", false, false,false,"flat-saffron",false); 
        } 
 
In above code example, Highlighted Boolean value is belonging to IsAutoFit property in Export method. So, we suggest you to enable the IsAutoFit property in Export method to resolve this issue as we told in previous update. Please refer to the following code example, 
public void ExportToPdf(string GridModel) 
        { 
            PdfExport exp = new PdfExport(); 
            var DataSource = new NorthwindDataContext().OrdersViews.Take(100).ToList(); 
            GridProperties obj = ConvertGridObject(GridModel); 
            exp.Export(obj, DataSource, "Export.pdf", false, false,false,"flat-saffron",true); 
        } 
Note: In above code example,8th property is an IsAutoFit property in Grid Export method. 

We have also prepared a sample for your requirement which can be download from following link, 


If you still face the same issue, then could you please provide the following details, 
1)     Essential Studio version and browser details  
2)     Scenario to reproduced the reported issue.  
3)     A sample if possible or modified the given sample as issue reproducible. 

Regards, 
Venkatesh Ayothiraman. 


UN Unknown November 13, 2017 03:52 PM UTC

Hello

The IsAutoFit property was already set to true in my code. This setting causes the grid to not use all available width. When I set this property to false and the combined columns are too wide, the resulting table in the pdf prints first all columns that fit on one page, then after all the data of these columns are shown, the next columns are appended and so on.

This helped me find a workaround for my problem. Now I set the IsAutoFit property to false and manually calculate the width for each column and set them (in the exportToPdf action on the server). The layout is not always perfect and it is definitely not a clean solution but for the time being it is good enough.

Therefore issue 3 is resolved.


Once again, thank you a lot for all the help you provided.


Phil


VA Venkatesh Ayothi Raman Syncfusion Team November 14, 2017 04:18 AM UTC

Hi Phil, 

Thanks for the update. 

We are very happy to hear that your requirement is achieved. 

Regards, 
Venkatesh Ayothiraman. 


Loader.
Up arrow icon