Grid Toolbar and Chart 3d not working on my current solution

[Fabio Melendez]

I am attaching a sample project of what I am trying to do, two samples in there

1. A grid adding the print, export to excel and export to pdf , images not showing and event not getting wired

2. 3 d chart on dashboard added all properties but graph still not in 3d

I am not sure if I am missing styles, images, scripts or what

Tried running the sample project that comes with latest release and gives a version conflict for components

[Fabio Melendez]

Here is the sample project

Attachment: MerchantServicesPortal_e15226ad.zip

[Ragavee U S]

Hi Fabio

 

Query #1: A grid adding the print, export to excel and export to pdf , images not showing and event not getting wired

 

We have analyzed the reported query and we would like to let you know that we have included the printGrid, exporting etc., features in our latest Volume 3, 2014 release.

 

Please refer the below Online Sample links for creating a sample grid with printGrid and exporting features.

 

PrintGrid: http://mvc.syncfusion.com/demos/web/Grid/PrintGrid

 

ExportingGrid: http://mvc.syncfusion.com/demos/web/Grid/ExportingGrid

 

Refer the following steps to upgrade your project to our latest version 12.3.0.36 for using the new ASP.Net MVC controls,

 

1.       Install Essential Studio 2014 Volume 3 from the following link.

 

                    Essential Studio: http://www.syncfusion.com/forums/117495/essential-studio-2014-volume-3-final-release-v12-3-0-36-available-for-download

 

2.       Replace the Syncfusion dlls, scripts, css in your project from the following location.

 

                   Scripts and Css: C:\Program Files (x86)\Syncfusion\Essential Studio\12.2.0.36\JavaScript\assets

 

                   Dll: C:\Program Files (x86)\Syncfusion\Essential Studio\12.2.0.36\Assemblies

 

We have listed the Namespaces, DLLs , script and CSS files needed to work with the ASP.Net MVC Control in the below table. Please refer the below table.

 

DLLs required	Syncfusion.EJ.dll Syncfusion.EJ.MVC.dll Syncfusion.Core.dll
Namespaces	Syncfusion.MVC.EJ Syncfusion.JavaScript
Script files	Syncfusion script files: ej.web.all.min.js ej.unobtrusive.min.js External Script files: jquery.min.js jquery.easing.min.js jquery.globalize.min.js jsrender.min.js jquery.validate.min.js
CSS files	ej.web.all.min.css Or ej.widgets.all.min.css

Note: If UnobtrusiveJavaScriptEnabled is set as true in web.config, then we must include the “ej.unobtrusive.min.js” file in the _Layout.cshtml page.

[Web.config]

<appSettings>

    <add key="webpages:Version" value="2.0.0.0" />

    <add key="webpages:Enabled" value="false" />

    <add key="PreserveLoginUrl" value="true" />

    <add key="ClientValidationEnabled" value="true" />

    <add key="UnobtrusiveJavaScriptEnabled" value="true" />

</appSettings>

 

Query #2: 3 d chart on dashboard added all properties but graph still not in 3d and tried running the sample project that comes with latest release and gives a version conflict for components

 

We will update the response for the above chart related query on November 3, 2014.

 

Please get back to us if you need any further assistance.

 

Regards

Ragavee U S

[Ragavee U S]

Hi Fabio,

 

Please find the response for chart related query

 

Query #2: 3 d chart on dashboard added all properties but graph still not in 3d and tried running the sample project that comes with latest release and gives a version conflict for components

 

We have resolved the conflicts in attached sample and found that the property “YAxisName” of series was assigned a value “Sales” but a vertical axis with the name “Sales” is not added in the sample. If your intention is to display “Sales” as title to vertical axis, we suggest you to use the “Title” property of primary Y axis.

 

Please refer the following code snippet to achieve this.

<code>

[CSHTML]

@{Html.EJ().Chart("chartYear")

                  .PrimaryXAxis(xAxis => xAxis.ValueType(AxisValueType.Category))

                  .PrimaryYAxis(yAxis => yAxis.ValueType(AxisValueType.Double)

                                        .LabelFormat("$ {value}")

                                       //Adding title for primary Y Axis

                                        .Title(title=>title.Text("Sales"))

                                        .Range(range => range.Min(0).Max(300).Interval(100)))

                  .Series(sr =>

                  {

                      sr.Name("Sales")

                      .Type(SeriesType.Column)

                      .DataSource((System.Collections.IEnumerable)ViewBag.datasourceYear)

                      .XName("Xmonth")

                      .YName("Sales")

                      //.YAxisName("Sales")

                      .Add();

                  })

                  .Title(title => title.Text("Sales for the Year 2014"))

                  .Size(sz => sz.Height("400").Width("400"))

                  .Depth(100)

                  .WallSize(2)

                  .Tilt(0)

                  .Rotation(34)

                  .PerspectiveAngle(90)

                  .SideBySideSeriesPlacement(false)

                  .CanResize(true)

                  .EnableRotation(true)

                  .Enable3D(true)

                  .Render();}

</code>

 

The version conflict in the sample can be removed by adding base dll’s (Syncfusion.EJ, Syncfusion.Linq.Base, …) to the project with version 12.3450.0.36 instead of 12.3451.0.36. The modified sample can be downloaded from the following link.

MerchantServicesPortal.zip

 

[Screenshot]

3D Charts

 

Please let me know if you have any concern.

 

Regards,

Ragavee U S

[Fabio Melendez]

Thank you for your help, made the changes described above and now I can see the toolbar with the appropriate items, but running into new errors

1. the Toolbar is displaced, the first item seems to be having a space before it draws / renders in the ui, attaching image sample so you can see it

2. Whenever I click on a Export to Excel, it tries to redirect to this http://localhost:50380/MultipleExportToExcel

Here is what my view looks like

@(Html.EJ().Grid<object>("CreditGrid")

.Datasource((IEnumerable<object>)Model.CreditTransactions)

.ToolbarSettings(toolBar => toolBar.ShowToolbar().ToolbarItems(items =>

{

items.AddTool(ToolBarItems.PrintGrid);

items.AddTool(ToolBarItems.ExcelExport);

items.AddTool(ToolBarItems.PdfExport);

}))

And I have the corresponding methods in my controller

public void ExportToExcel(string GridModel)

and

public void ExportToPdf(string GridModel)

Not sure why it is trying to redirect me to a MultiExport to Excel Controller, I do have multiple grids on that View but I need to export them separately each one would trigger it's own export

Attachment: Grid_toolbar_Problem_8d02dd52.zip

[Fabio Melendez]

Ok so I changed the methods in my controller to be named

MultipleExportToExcel

MultipleExportToPdf

and that seems to have fixed the problem of the redirect, though what happens if I have multiple grids and I only want to export one? How would I do that?

Now the problem I have is that whenever I click export to Excel I get the following error:

Unhandled exception at line 10, column 1458260 in http://localhost:50380/Scripts/ej/web/ej.web.all.min.js

0x800a138f - JavaScript runtime error: Unable to get property 'model' of undefined or null reference

And I still have the issue where the toolbar gets drawn like in the post below, leaving a space to the left.

[Fabio Melendez]

It appears I was wrong the Error of the Grid Export to Excel trying to redirect to a path

http://localhost:50380/MultipleExportToExcel

or

http://localhost:50380/ExportToExcel

Is still happening, even if I have a page with just one Grid in it

[Fabio Melendez]

This somehow seems to be a routing problem

My Route looks like this

routes.MapRoute(

 name: "NoAction",

 url: "{controller}",

 defaults: new {action = "Index", id = UrlParameter.Optional},

 namespaces: new[] {myproject.Controllers}

);

your route seems to be

routes.MapRoute(

 name: "NoAction",

 url: "{controller}",

 defaults: new {action = "Default", id = UrlParameter.Optional},

 namespaces: new[] {myproject.Controllers}

);

When I switch my route now I am obligated to add my action to my routes, but this way when I click on the export button it gets to the method in the Controller.

But then it is just hanging there on the Export call

Here is what I have

Controllers (folder)

--- DevicesController

Views (folder)

--- Devices (folder)

------ Index.cshtml (file)

I need my routes to look like this

htttp://........../Devices

and I need the export to be working the method accessible based on that route. Seems like if I have any other route than default the tool does not know how to get to the method in the controller

[Fabio Melendez]

This is starting to get annoying. I have a page that has three tabs, each tab has a grid in it and I want to enable export to Excel on all three. My Routes follow this convention [Project name]/{controller} , the default route has the default action of {index}

So here is what I have noticed, I have two scenarios

1. As an Employee I navigate to this page, if I follow my route project1/GridPage, page loads just fine but if I click on the Export to Excel Item in the toolbar it tells me it can't find the route project1/ExportMultipleToExcel. If I add the default action of Index to my original route (project1/GridPage/index) then when I click on the export to excel toolbar item I am able to get to the appropriate method in the controller.

2. As an Admin I navigate to the page, same flow as above and I click on the export to excel then I get the following error

Unhandled exception at line 10, column 1458260 in http://localhost:50380/Scripts/ej/web/ej.web.all.min.js and it states that -- 0x800a138f - JavaScript runtime error: Unable to get property 'model' of undefined or null reference.

Notes: Both Navigate to the page the same way, the only difference is that the Admin sets an extra value in the Session to know which Admin was logged in, but all grids in the page load with exactly the same data. So it makes no sense why the two different behaviors and why it blows up when I do not add the Action to it.

I have also verified I am using the same libraries and updated the scripts and dll's as prescribed in your sample above.

[Ragavee U S]

Hi Fabio Melendez

 

Query #1:  the Toolbar is displaced, the first item seems to be having a space before it draws / renders in the ui, attaching image sample so you can see it

 

We have analyzed the reported query and  we are unable to reproduce the issue that you have mentioned.

 

So could you please let us know if you have used any custom Css or external css styles in your project. The provided information will be helpful for us to analyze the issue and provide response as early as possible.

Query #2: Whenever I click on a Export to Excel, it tries to redirect to this http://localhost:50380/MultipleExportToExcel

 

We have analyzed the reported query and we have confirmed it as a defect. Thus we have logged a defect report on the issue “Issue with Exporting”. The fix for this issue is estimated to be fixed on November 17, 2014 and this fix will be available with Volume 3 Service Pack 1 release.

 

As of now, the issue can be handled using the below workaround solution. Please refer the code snippet.

 

<script type="text/javascript">

    function toolbarClick(args) {

        args.cancel = true;

        switch (args.itemName) {

            case "Excel Export":

                this.export("/Home/ExportToExcel");

                break;

            case "Word Export":

                this.export("/Home/ExportToWord");

                break;

            case "PDF Export":

                this.export("/Home/ExportToPdf");

                break;

        }       

    }

</script>

 

For your convenience we have created a sample and the same can be downloaded from the below location.

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/MVC_Sample_-_12.3.0.36-231347973.zip

 

Please try the above sample and get back to us if you need any further assistance.

 

Regards

Ragavee U S

[Fabio Melendez]

Ok that works great, now the problem I have is that my calls to get the data are ASYNC, which seems to be locking the UI Thread, is there a way to make those calls to export and making them async?

trying to wrap the default calls

public void ExportToExcel  -- just fails when it is an async method to get the DataSource

[Fabio Melendez]

Never mind got it working

[Ragavee U S]

Hi Fabio Melendez

 

Thanks for the update. 

 

We are happy that your issue is resolved.

 

If you have any queries in the future, please get back to us. We will be happy to assist you.

 

Regards

Ragavee U S