syncfusion/blazor-samples

Explore and learn Syncfusion Blazor components using large collection of demos, example applications and tutorial samples

blazor-samples's Issues

Palette Refresh Issue

I'm trying to expand / collaps a palette at runtime.
I have a required palette and an optional one.

            requiredPalette = new SymbolPalettePalette
            {
                Id = "requiredPalette",
                Title = "",
                Expanded = true,
                Symbols = new List<object>
                {
                    // some nodes
                }
            };

            optionalPalette = new SymbolPalettePalette
            {
                Id = "optionalPalette",
                Title = "",
                Expanded = false, // Default is collapsed
                Symbols = new List<object>
                {
                    // some nodes
                }
            };

By clicking a button i'd like to collaps / expand the optional palette,
so i tried the following:

            optionalPalette.Expanded = !optionalPalette.Expanded;
            optionalPalette.Refresh();

            // base is the EjsSymbolPalette instance

            base.Render(); 
            base.Refresh();

Each time i run the code new instances of the optional and required
Palettes are added to the DOM. Also all new instances and especially
the optionalPalette are getting not rendered and staying invisible.

I also tried to add remove the optional palette to the palette collection,
but i had a similar effect. Is this a bug?

DropDownListTemplates inside Grid throw an error

<GridColumns>
        <GridColumn Field=@nameof(Company.Id) HeaderText="Company identifier" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120" Visible="false"></GridColumn>

        <GridColumn Field="LegalPersonTypeId" HeaderText="Legal Person Type" Width="100">
            <Template>
                @{
                    var company = (context as Company);
                    <span>@company.LegalPersonType.Name</span>
                }
            </Template>
            <EditTemplate>
                <EjsDropDownList TValue="string" ID="LegalPersonTypeId" Value="@((context as Company).LegalPersonTypeId)" Placeholder="Select a game" DataSource="@legalPersonTypes">
                    <DropDownListTemplates>
                        <ItemTemplate Context="anotherContext">
                            <span>@((anotherContext as LegalPersonType).Name)</span>
                        </ItemTemplate>
                    </DropDownListTemplates>
                    <DropDownListFieldSettings Value="Id" Text="Name"></DropDownListFieldSettings>
                </EjsDropDownList>
            </EditTemplate>
        </GridColumn>
    </GridColumns>

Where LegalPersonType is:

public class LegalPersonType
    {
        public string Id { get; set; }

        public string Name { get; set; }
    }

Error:

Another thing is that the isn't working because always set the Value of the DDL as the value of the column specified in the Text parameter, in this case "Name"

Diagram does not render

I tried your latest blazor package today, but the diagram sample i copied does not render:
https://ej2.syncfusion.com/beta/aspnet-core-razor-components/Diagrams/DefaultFunctionalities

I tried an other example too and it worked. Also i did not saw any errors in the chrome browser console.

Server side Blazor

I am using Server Side Blazor version 3.0.0-preview3-19153-02
When I want to display chart, I have empty page and no error message is displayed.
In console window is message: #bar - ejs.charts.Chart - Initialized.

Source code not showing for all samples

The source code tab for all the examples is not showing the source codes.
When you click on it, it shows up blank.

Like these below

What's the solution please?

Thanks

Hardcoded Dimensions in Diagram

I have a Diagram with 100% heigth and width, but i've noticed that all child elements
are using some default sizes (see screenshot).

Also with the new version my pre-initialized nodes got not rendered. I can see them on the overview but not on the diagram. Dropping new nodes from palette also does not work anymore. I did not digged into it yet, maybe it is just a css mistake on my side. But it worked with v17.2.29-beta.

Highlight selected nodes

I'd like to highlight the selected node(s) by changing the border / stroke color.
I've found an example for an other framework on your forum that seems to fit my requirements:
https://www.syncfusion.com/forums/129334/typescript-diagram-highlight-a-series-of-nodes

But this seems to be not supported right now due the missing event handling api, or?

EjsMaps inside of a SplitterPane

I am trying to get the EjsMaps component to work inside of a re-sizable SplitterPane but the results are unpredictable. Sometimes it resizes, sometimes it doesn't and markers don't seem to function properly.

Is there a specific way I am supposed to use the two components together or is it not supported?

Compatibility with wasm 3.1.0-preview4.19579.2 template

I'm using blazor wasm, I created the project using the template Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview4.19579.2 with CLI with the following command dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview4.19579.2 like the docs here explain.

Also I followed this Getting started with Syncfusion Blazor - WebAssembly App in .NET Core CLI, using the template 3.1.0-preview4.19579.2 instead of 3.1.0-preview3.19555.2

The result is the following:

I also added this to index.html <script src="https://cdn.syncfusion.com/ej2/17.2.29/dist/ejs.interop.min.js"></script>

Package Microsoft.AspNetCore.Blazor.Cli 0.9.0-preview3-19154-02 is not compatible with netcoreapp2.2

With latest Visual Studio 2019 + SDK 3.0.100-preview4-011223 I am receiving error:
Error: NU1202 Package Microsoft.AspNetCore.Blazor.Cli 0.9.0-preview3-19154-02 is not compatible with netcoreapp2.2

Demo not properly working

I cloned this repo without changes and compiled in Visual Studio 2019 (16.1.0 Preview 3.0) and updated to Syncfusion.EJ2.AspNet.Core.RazorComponents v17.1.0.48-beta. There are 25 warnings but no errors, and the demo executes. However, no matter what's selected in the list of controls to demo, the "DataGrid > Default Functionalities" page is always selected.

Only Grid sample working in Preview 4

Only the grid sample seems to be working in the current version of this repo, any other sample throws a json parsing exception:

Uncaught (in promise) Error: Newtonsoft.Json.JsonReaderException: Unexpected character encountered while parsing value: {. Path 'item', line 1, position 9.
  at Newtonsoft.Json.JsonTextReader.ReadStringValue (Newtonsoft.Json.ReadType readType) <0x3a18650 + 0x00502> in <5179dd1b79f047d0ac657ed8a725efc1>:0 
  at Newtonsoft.Json.JsonTextReader.ReadAsString () <0x3a0ecc0 + 0x00006> in <5179dd1b79f047d0ac657ed8a725efc1>:0 
  at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.ReadForType (Newtonsoft.Json.JsonReader reader, Newtonsoft.Json.Serialization.JsonContract contract, System.Boolean hasConverter) <0x39f4bf0 + 0x0012a> in <5179dd1b79f047d0ac657ed8a725efc1>:0 
  at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.PopulateObject (System.Object newObject, Newtonsoft.Json.JsonReader reader, Newtonsoft.Json.Serialization.JsonObjectContract contract, Newtonsoft.Json.Serialization.JsonProperty member, System.String id) <0x3a0da40 + 0x00482> in <5179dd1b79f047d0ac657ed8a725efc1>:0 
  at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.CreateObject (Newtonsoft.Json.JsonReader reader, System.Type objectType, Newtonsoft.Json.Serialization.JsonContract contract, Newtonsoft.Json.Serialization.JsonProperty member, Newtonsoft.Json.Serialization.JsonContainerContract containerContract, Newtonsoft.Json.Serialization.JsonProperty containerMember, System.Object existingValue) <0x3a005d8 + 0x002d6> in <5179dd1b79f047d0ac657ed8a725efc1>:0 
  at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.CreateValueInternal (Newtonsoft.Json.JsonReader reader, System.Type objectType, Newtonsoft.Json.Serialization.JsonContract contract, Newtonsoft.Json.Serialization.JsonProperty member, Newtonsoft.Json.Serialization.JsonContainerContract containerContract, Newtonsoft.Json.Serialization.JsonProperty containerMember, System.Object existingValue) <0x39ff988 + 0x000b0> in <5179dd1b79f047d0ac657ed8a725efc1>:0 
  at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.Deserialize (Newtonsoft.Json.JsonReader reader, System.Type objectType, System.Boolean checkAdditionalContent) <0x39f4158 + 0x001aa> in <5179dd1b79f047d0ac657ed8a725efc1>:0 
  at Newtonsoft.Json.JsonSerializer.DeserializeInternal (Newtonsoft.Json.JsonReader reader, System.Type objectType) <0x39efa80 + 0x000ac> in <5179dd1b79f047d0ac657ed8a725efc1>:0 
  at Newtonsoft.Json.JsonSerializer.Deserialize (Newtonsoft.Json.JsonReader reader, System.Type objectType) <0x39ef570 + 0x00010> in <5179dd1b79f047d0ac657ed8a725efc1>:0 
  at Newtonsoft.Json.JsonConvert.DeserializeObject (System.String value, System.Type type, Newtonsoft.Json.JsonSerializerSettings settings) <0x39ef1a0 + 0x00076> in <5179dd1b79f047d0ac657ed8a725efc1>:0 
  at Newtonsoft.Json.JsonConvert.DeserializeObject[T] (System.String value, Newtonsoft.Json.JsonSerializerSettings settings) <0x3a58548 + 0x0000c> in <5179dd1b79f047d0ac657ed8a725efc1>:0 
  at Newtonsoft.Json.JsonConvert.DeserializeObject[T] (System.String value) <0x3a58510 + 0x00006> in <5179dd1b79f047d0ac657ed8a725efc1>:0 
  at Syncfusion.EJ2.RazorComponents.Lists.EjsListView._InvokeSelect (System.Object arg) <0x3a503e0 + 0x00018> in <3f0681dbecbb4b4c897ee88a64c1679a>:0 
  at (wrapper delegate-invoke) System.Action`1[System.Object].invoke_void_T(object)
  at Syncfusion.EJ2.RazorComponents.BaseComponent.Trigger (System.String eventName, System.Object arg) <0x2c7d688 + 0x00020> in <3f0681dbecbb4b4c897ee88a64c1679a>:0 
  at (wrapper managed-to-native) System.Reflection.RuntimeMethodInfo.InternalInvoke(System.Reflection.RuntimeMethodInfo,object,object[],System.Exception&)
  at System.Reflection.RuntimeMethodInfo.Invoke (System.Object obj, System.Reflection.BindingFlags invokeAttr, System.Reflection.Binder binder, System.Object[] parameters, System.Globalization.CultureInfo culture) <0x20dd0e8 + 0x000d2> in <d795ae78e669403e9a0e7a9acf3f68ee>:0 
--- End of stack trace from previous location where exception was thrown ---

  at Microsoft.JSInterop.DotNetDispatcher.InvokeSynchronously (System.String assemblyName, System.String methodIdentifier, System.Object targetInstance, System.String argsJson) <0x2598068 + 0x00222> in <e1118158fde248beb4358ff5c924bd15>:0 
  at Microsoft.JSInterop.DotNetDispatcher.BeginInvoke (System.String callId, System.String assemblyName, System.String methodIdentifier, System.Int64 dotNetObjectId, System.String argsJson) <0x25ac2e8 + 0x0007c> in <e1118158fde248beb4358ff5c924bd15>:0 
    at endInvokeDotNetFromJS (http://localhost:52258/_framework/blazor.webassembly.js:1:6160)
    at Object.invokeJSFromDotNet (http://localhost:52258/_framework/blazor.webassembly.js:1:5676)
    at _mono_wasm_invoke_js_marshalled (http://localhost:52258/_framework/wasm/mono.js:1:169574)
    at wasm-function[1450]:714
    at wasm-function[601]:22743
    at wasm-function[601]:21413
    at wasm-function[601]:21902
    at wasm-function[601]:21413
    at wasm-function[601]:21413
    at wasm-function[601]:21413
endInvokeDotNetFromJS @ blazor.webassembly.js:1
invokeJSFromDotNet @ blazor.webassembly.js:1
_mono_wasm_invoke_js_marshalled @ mono.js:1
(anonymous)
(anonymous)
(anonymous)
(anonymous)
(anonymous)
(anonymous)
(anonymous)
(anonymous)
(anonymous)
(anonymous)
(anonymous)
(anonymous)
(anonymous)
Module._mono_wasm_invoke_method @ mono.js:1
callMethod @ blazor.webassembly.js:1
beginInvokeDotNetFromJS @ blazor.webassembly.js:1
s @ blazor.webassembly.js:1
e.invokeMethodAsync @ blazor.webassembly.js:1
triggerEJEvents @ ejs.introp.js:36
e.notify @ browser.js:33
e.trigger @ browser.js:195
t.setSelectLI @ list-view.js:1146
t.clickHandler @ list-view.js:785

Localization/Globalization error

Hi, I actually test yours components to see if it can match my needs for my projects.
I meet a problem with globalization support.
I follow the steps described here https://ej2.syncfusion.com/blazor/documentation/common/globalization/ and here https://ej2.syncfusion.com/blazor/documentation/common/localization/.

I apply this to your test project, i want globalize all the app so i put my code in the MainLayout on the OnAfterRender method.

When I put these line of code

if (!firstRender)
        {
            JsRuntime.Ejs().LoadLocaleData("wwwroot/ej2-locale/src/fr.json")
            .LoadCldrData(new string[] { "wwwroot/cldr-data/supplemental/numberingSystems.json", "wwwroot/cldr-data/main/fr/numbers.json", "wwwroot/cldr-data/main/fr/timeZoneNames.json", "wwwroot/cldr-data/main/fr/ca-gregorian.json" })
            .SetCulture("fr").SetCurrencyCode("EUR");
        }

I have a crash in js on the first page

Error: There was an error applying batch 13.
e.log @ blazor.server.js:15

followed by
Uncaught (in promise) TypeError: Cannot read property 'ownerDocument' of null
    at e.updateComponent (blazor.server.js:8)
    at Object.t.renderBatch (blazor.server.js:1)
    at e.<anonymous> (blazor.server.js:15)
    at blazor.server.js:15
    at Object.next (blazor.server.js:15)
    at blazor.server.js:15
    at new Promise (<anonymous>)
    at r (blazor.server.js:15)
    at e.processBatch (blazor.server.js:15)
    at e.<anonymous> (blazor.server.js:8)

All the translation files asked exist in the wwwroot folder as described in your docs

this make the app unusable (nothing respond).

can you check that ?

thanks !

Julien

NodePortOffset { X = 0, Y = 0 } seems not to work correctly

The NodePortOffset { X = 0, Y = 0 } seems not to work correctly.
It centeres the port inside the node. I expected a left and top alignment.

// outside the node on the left top
ports.Add(new DiagramPort { Visibility = PortVisibility.Hover, Shape = PortShapes.Square, Offset = new NodePortOffset { X = -0.1, Y = -0.1 } }); 

// inside the node on the left top
ports.Add(new DiagramPort { Visibility = PortVisibility.Hover, Shape = PortShapes.Square, Offset = new NodePortOffset { X = 0.1, Y = 0.1 } }); 

// inside the node centered and middled
ports.Add(new DiagramPort { Visibility = PortVisibility.Hover, Shape = PortShapes.Square, Offset = new NodePortOffset { X = 0, Y = 0 } }); 

Locale="de-DE" not working

I am using schedule with server-side blazor and the provided ScheduleData from the samples with the following version :

<PackageReference Include="Microsoft.NETCore.Platforms" Version="3.0.0-preview4.19212.13" /> <PackageReference Include="Syncfusion.EJ2.AspNet.Core.RazorComponents" Version="17.1.0.43-beta" />

using

<EjsSchedule id="schedule" width="100%" height="650px" selectedDate="new DateTime(2019, 1, 10)" EventSettings="@eventSettingsFields" ActionComplete="@OnComplete" Locale="de-DE" > </EjsSchedule>

Locale="en-US" is working but Locale="de-DE" does not load the data.

Please update to Preview 4

Could you please update your Blazor Components to Preview 4?

Fullscreen FitToPage issue

I'm running a diagram in fullscreen mode (100% heigth and width), also I've initilized some nodes on application start. The browser window itself is not fullscreen. So when i run the application the view port of the diagram is larger than the browser window and the scroll bars are set on the bottom right. It looks like that the viewport uses the dimensions of the screen and not of the current browser. When i maximize the browser window to fullscreen everthing is correct and the scrollbars are gone, same when i "minimize" the browser window to the previous dimensions. So the diagram seems not to be initilized correctly on application start.

Custom binding async functions stopped working with version 42

I'm doing something similar to the following example Custom Binding but when I call the InsertAsync the item is no added to the grid after call the function and only happens if I put an await instruction i.e. await Task.Delay(100);

If I remove the await Task.Delay(100); the function works fine.

Diagram ZoomOut is broken

With the latest version the diagram zoom-out is broken,
both zoom in and out are zooming in.

        public async Task ZoomIn()
        {
            base.ZoomTo(new ZoomOptions { Type = ZoomTypes.ZoomIn, ZoomFactor = 0.2 });
            await Task.CompletedTask;
        }

        // Does not work anymore.
        public async Task ZoomOut()
        {  
            base.ZoomTo(new ZoomOptions { Type = ZoomTypes.ZoomOut, ZoomFactor = 0.2 }); 
            await Task.CompletedTask;
        }

Load more than one language

When I load more than one language I got the following error:

1. I'm using Blazor wasm
2. The languages I'm loading are English and Spanish

Missing Flags Attribute for Enum NodeConstraints

For all Constraint Enums i saw the"Flags" Attribute is missing. So the Bitwise Operation in C# does not work. Example: NodeConstraints

ConnectionChange provides JObjects only

The Diagram Action "ConnectionChange" provides JObjects only. I'm not able to cast the inner connector to a DiagramConnector for that reason.

https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.Diagrams.EjsDiagram~ConnectionChange.html

Content Size

Hi Team,
Thank you for the handy demos, there are very useful to start with Syncfusion Blazor Controls.

When I try to browse these examples, it is downloading huge content (image attached) from the server. Do we have any alternatives to address these size issues?

thank you
-nm

Only Blazor server-side NOT working in preview5

Hi,
I tried to create a server-side blazor app according to your instructions in

https://ej2.syncfusion.com/aspnet-core-blazor/documentation/getting-started/vs-blazor-server/

with preview5.

The app compiles, without rendering the control. It just displays a grey line under the welcome message.

Using your instructions for Blazor client and Blazor client-hosted with preview5 everything is working fine.

I have to develop a rather complex schedule module for events an room booking , so debugging is essential for me at this stage of the project.

How to get the index or the data of the row in the grid?

Is it possible to get the index of the dataSource of the current row, or the data of the current row somehow with EjsGrid ?
As well - why the button does not visualize ? is it a bug, or there is something else which must be done ?

<EjsGrid DataSource="@GridData" ModelType="@Model" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" AllowPaging="true" >
                    <GridEditSettings AllowAdding="false" AllowDeleting="false" AllowEditing="true"></GridEditSettings>
                    <GridColumns>
                        <GridColumn Field=@nameof( WordDataModel.keyWord ) HeaderText="KeyWord" IsPrimaryKey="true" Width="140"></GridColumn>
                        <GridColumn Field=@nameof( WordDataModel.original ) HeaderText="Original" Width="150" AllowEditing="false"></GridColumn>

                        <GridColumn Field=@nameof( WordDataModel.translation ) HeaderText="Translation" Width="140"></GridColumn>
                        <GridColumn Field=@nameof( WordDataModel.reviewRequired ) HeaderText="Review Req" Width="160" AllowEditing="false"></GridColumn>

                        <GridColumn HeaderText="Auto Translate" Width="120">
                            <Template>
                                <button @onclick="@btnClick">Auto Translate</button>
                            </Template>
                        </GridColumn>

                    </GridColumns>
                </EjsGrid>

Palette does not support getNodeDefaults

I'm trying to create new nodes from palette, but all i get is a clone of the existing node in the palette. So i was looking into your docu and for other frameworks this is done by using getNodeDefaults and getConnectorDefaults. But this seems not to be fully supported in the current version.

Also i got an issue that when i try to add such a clone to my diagram that it does not deselect itself after dropping it. I'm not able to do anything in this state. The console shows the following error:

treemap.ts:2 Error: attribute width: A negative value is not valid. ("-1.7976931348623157e+308")

Btw: The node is an inherited DiagramNode Instance.

ContextMenu for each item in TreeView

I have realized that ContextMenu support is already available with least documentation. How to have different ContextMenu for each item based on their type in the TreeView and how to disable and call operations on click?

Scroll on Mouse-Down

Instead of activating the multi selector tool i'd like to scroll the diagram when i hold the mouse button. Similar to google maps:

https://www.google.de/maps/@56.7510641,15.8016268,7.99z

Diagram context always empty on NodeTemplate

I have a diagram like the following:

The Node class is the following:

 public class Node
    {
        public string Name { get; set; }
        public string FillColor { get; set; }
        public string Category { get; set; }
    }

All the properties of the object are always null.

BTW I’m using the ‘18.1.36-beta’ version.

Could you help me please?

Please update sample to preview 8

Could you please update your Blazor Components to Preview 8?

DiagramConstraints throws IndexOutOfBoundException

Sample:

<ej-diagram id="diagram" width="900px" height="600px" constraints="DiagramConstraints.Default | DiagramConstraints.Bridging" bridge-direction="Bottom"></ej-diagram>

DiagramNodeAnnotations seems not to work

I tried to attach DiagramNodeAnnotations to a DiagramNode, which seems not to work.
I tried the same with a list of DiagramNodeAnnotation Elements which finally works.

            return new DiagramNode
            {
                //Annotations = new DiagramNodeAnnotations{...} // does not work
                Annotations = new List<DiagramNodeAnnotation> {...} // works
            };

Also the Alignment seems to be buggy. The horizontal and vertical alignment seems to be inverted.
Maybe it is related to this: #25

        var style = new NodeAnnotationStyle {Bold = true, FontFamily = "Comic Sans MS", FontSize = 24};

        return new List<DiagramNodeAnnotation>
        {
            new DiagramNodeAnnotation
            {
                Content = content,

                Width = width - 6,
                Height = height - 6,

                Style = style,

                HorizontalAlignment = HorizontalAlignment.Left, // is right
                VerticalAlignment = VerticalAlignment.Top, // is bottom

                Offset = new NodeAnnotationOffset{X = 0, Y = 0}, 

                Constraints = AnnotationConstraints.ReadOnly
            }
        };

Update annotation at runtime

I was trying to update the annotation at runtime but I couldn't make it work. I'm using the 18.1.36-beta version.

The example from the documentation is the following:

https://blazor.syncfusion.com/documentation/diagram/labels/#update-annotation-at-runtime

I call a method with a button that executes the diagram.Nodes[0].Annotations[0].Content = "Updated Annotation"; but the annotation doesn't change.

Could you help me?

How to apply the SelectorConstraints?

I've found an example on how to do this for asp.net core, but this does not work with blazor.

<script>
    $("#diagram").ejDiagram({
        constraints: ej.datavisualization.Diagram.SelectorConstraints.All & ~(ej.datavisualization.Diagram.SelectorConstraints.Rotator | ej.datavisualization.Diagram.SelectorConstraints.Resizer)
    });
</script>

TreeView events OnNodeSelected OnNodeClicked not working

Events are not fired after node click.

NullReferenceException @ Syncfusion.EJ2.Blazor.BaseAdaptor.BaseRemove

blazor.server.js:8 Uncaught (in promise) Error: System.NullReferenceException: Object reference not set to an instance of an object.
at Syncfusion.EJ2.Blazor.BaseAdaptor.BaseRemove(:44382/String baseData, String keyField, String key)
at Object.endInvokeDotNetFromJS (blazor.server.js:8)
at e. (blazor.server.js:8)
at blazor.server.js:1
at Array.forEach ()
at e.invokeClientMethod (blazor.server.js:1)
at e.processIncomingData (blazor.server.js:1)
at e.connection.onreceive (blazor.server.js:1)
at WebSocket.i.onmessage (blazor.server.js:1)

I'm getting the following error in Google Chrome's Dev Console when right clicking and pressing 'Delete Record' on a row that is hooked up to our custom data adaptor

Index.razor:

<EjsGrid TValue="Icecream" AllowSorting="true" AllowExcelExport="true" AllowPdfExport="true" ContextMenuItems="@(new List<object>() { "AutoFit", "AutoFitAll", "SortAscending", "SortDescending","Copy", "Edit", "Delete", "Save", "Cancel","PdfExport", "ExcelExport", "CsvExport", "FirstPage", "PrevPage","LastPage", "NextPage"})" AllowPaging="true" Toolbar="@(new List<string>() { "Search", "Add", "Delete", "Update", "Cancel" })"> <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="@EditMode.Normal"></GridEditSettings> <Syncfusion.EJ2.Blazor.Data.EjsDataManager AdaptorInstance="@typeof(MyDataAdaptor<Icecream>)" Adaptor="Adaptors.CustomAdaptor" CrossDomain="true"></Syncfusion.EJ2.Blazor.Data.EjsDataManager> <GridColumns> <GridColumn Field="id" HeaderText="ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> <GridColumn Field="name" HeaderText="Name" TextAlign="TextAlign.Right" Width="120"></GridColumn> <GridColumn Field="flavor" HeaderText="Flavor" TextAlign="TextAlign.Right" Width="120"></GridColumn> <GridColumn Field="color" HeaderText="Color" TextAlign="TextAlign.Right" Width="120"></GridColumn> <GridColumn Field="price" HeaderText="Price" TextAlign="TextAlign.Right" Width="120"></GridColumn>

MyDataAdaptor.cs:

public class MyDataAdaptor<TEntity> : DataAdaptor where TEntity : class, new() {

public MyDataAdaptor() { }

public override object Read(DataManagerRequest, string key = null) {
...
}

}

It will correctly call the "Read" and "Insert" method and it reads data just fine and insert as well. However trying to rightclick and delete will cause the Grid to "crash" and be stuck in infinite loading animation.

The "Remove" method is not even called on the server side, it just crashes client side.

Thanks for any help in advance,
Nicky.

Individual control nuget packages

Dear team,
Application size is one of the major issue that we have with Blazor Client Side today.

If you can allow users to include independent nuget packages of controls like Syncfusion Xamarin Forms, it will be helpful users to address application size upto some extent.

I hope CRG (https://crg.syncfusion.com/) works here as well.

thank you

Typesafe classes for better code behind support

I've noticed in your documentation that you are using anonym objects for the whole initialization of your components. Is there any reason for it? I'm writting most of my code in the code behind classes and i would prefer a type safe implementation. Will there be any .net classes for such value object in the future?

Sample:

@functions{
    EjsDiagram diagram;
    EjsSymbolPalette palettes;

    private static object getFlowShape(string id, string shapeType) {
        return new { id= id, shape = new { type = "Flow", shape = shapeType } };
    }
    private List<object> nodes { get; set; } = new List<object>()
    ...
}

How to disable zoom on overview

I'd like to disable the zoom for the overview control, but i found no option for it.
I also noticed that the choosed position by a mouse click does not fit
with the new position on the diagram. There is a strange vertical offset.

Validating Connectors / Nodes

I was looking to your documentation, blog and your support forum, but i found no suitable sample on how to validate the connections between nodes. I tried to use ports and the ConnectionChange action but i failed to get it working.

I have the requirement to provide different kind of nodes where each node type has it's own set of rules which defines which other node type is allowed to connect to.

Sample:

NodeA - allows no inbound connection, but allows to connect to NodeB and Node C
NodeB - allows inbound connections from NodeA and allows to connect to Node D
NodeC - allows inbound connections from NodeA and allow outbound connections to NodeD
NodeD - allows inbound connections from NodeB and NodeC only

Diagram Refresh method clones the diagram

Using the 18.1.36-beta version when I call diagram.Refresh(); the diagram is cloned, the following image has and example of the result:

DropDownList inside grid with nested object example

I have a classes like the following

public class BusinessActivity
    {
        public Guid Id { get; set; }

        public string Name { get; set; }
    }

public class LegalPersonType
    {
        public Guid Id { get; set; }

        public string Name { get; set; }
    }

public class Company
    {
        public Company()
        {
            LegalPersonType = new LegalPersonType();
            BusinessActivity = new BusinessActivity();
        }
        
        public Guid Id { get; set; }
        
        public string Name { get; set; }

        public BusinessActivity BusinessActivity { get; set; }

        public LegalPersonType LegalPersonType { get; set; }
    }

How I can define a grid where with a drop down list select a BusinessActivity object? because the args.Data reflects the changed value but the row with template <span>@company.BusinessActivity.Name</span>don't update the value with the selected at the drop down list?

PS: I try a lot of ways but all of them aren't working :(

Overview Control not working

I tried to include the overview control to my diagram today,
but it contains no content. Is this available in the current state of development?

<Diagram id="diagram" @ref="Diagram" Nodes="@Nodes" Connectors="@Connectors" Width="100%" Height="100%" />
<ejs-overview id="overview" sourceID="diagram" />

Missing documentation on schedule CRUD

At the moment there is no documentation on CRUD operations using the schedule component. I wonder which is the best event to get called from the .razor file. I found ActionComplete as a possible way like:

`@page "/"

@using Syncfusion.EJ2.RazorComponents.Schedule

<EjsSchedule id="schedule" width="100%" height="650px" selectedDate="new DateTime(2019, 1, 10)" EventSettings="@eventSettingsFields" ActionComplete="@OnComplete" > </EjsSchedule>

@functions{

EjsSchedule scheduleObj;

static ScheduleData data = new ScheduleData();

[Parameter]
private object ScheduleData { get; set; } = new
{
	dataSource = data.GetScheduleData()
};


private void OnComplete(ActionEventArgs data)
{
	// check data for db action		
}

    // renaming some fields
[Parameter]
private object eventSettingsFields { get; set; } = new
{
	dataSource = data.GetScheduleData(),
	fields = new
	{
		subject = new { title = "Titel", name = "Subject" },
		location = new { title = "Ort", name = "Location" },
		description = new { title = "Beschreibung", name = "Description" },
		startTime = new { title = "Start Zeit", name = "StartTime" },
		endTime = new { title = "End Zeit", name = "EndTime" }
	}
};

}
`
Are there other ways to get to the changed / deleted data ?

Loading time and memory usage is too high

I'm using the following configuration but the loading time and memory usage still too high:

<PackageReference Include="Syncfusion.Blazor" Version="18.1.0.43" />

<link href="https://cdn.syncfusion.com/blazor/18.1.43/styles/bootstrap4.css" rel="stylesheet" />
<script src="https://cdn.syncfusion.com/blazor/18.1.43/syncfusion-blazor.min.js"></script>

The following is a heap snapshot of the memory using edge.

Heap-20200409T193402.heapsnapshot.zip

PD: Also happened in safari

Diagram stopped working

Today i tried to run my application and all samples you have provied and in all versions the diagram does not work anymore. I'm receiving the following error in visual studio:

SourceMaps.getMapForGeneratedPath: exception while processing path: https://cdn.syncfusion.com/ej2/dist/ej2.min.js, sourcemap: ej2.min.js.map
SyntaxError: Unexpected token � in JSON at position 0
    at JSON.parse (<anonymous>)
    at new SourceMap (C:\ProgramData\Microsoft\VisualStudio\ChromeAdapter\3a3b9ef7\node_modules\vscode-chrome-debug-core\out\src\sourceMaps\sourceMap.js:19:25)
    at sourceMapContentsP.then.contents (C:\ProgramData\Microsoft\VisualStudio\ChromeAdapter\3a3b9ef7\node_modules\vscode-chrome-debug-core\out\src\sourceMaps\sourceMapFactory.js:54:28)
    at process._tickCallback (internal/process/next_tick.js:68:7)

"Fullscreen" issue

I tried to display the diagram with 100% height and width.
I also set up all parent contains like html and body to 100% heigth and width.
Due the fact that the diagram itself has the position:relativ style it does not render.
When i remove the relativ positioning in the chrome dev tools the diagram is shown.
Is there any option to fix this behavior?

Diagram Client-Side-Rendering is slow

I switched my application from server to client side rendering
and noticed that rendering the diagram tooks much longer now.

Do you plan to improve the performance here?
I don't want to have the extra load on top of my server for rendering
and also i don't want to use extra (blazor) signalr sockets for it.

Latest beta does not work on .net Core Preview 5

I tried your latest beta versions *.52 and *.53 today. Both do not render the diagram anymore,
same code with the older package *.51 still works. There is also no console error shown.

Did you moved to .net core preview 6?

DOM with the new Packages:

DOM with the old Package

Ejs Dialog inside a table column

I put a dialog in a td element, but it only works when component loads for the first time, But when I change the page from 1 to 2 and table loads again dialog not showing.
I put my table in a child component that gets its data (as parameter "Products") from parent component. and dialog is inside the table.
I tried to do this:
`

EjsDialog[] DialogObj;

   
    protected override void OnParametersSet()
    {
        base.OnParametersSet();      

        DialogObj = new EjsDialog[Products.Count];

        StateHasChanged();
    }`

and then in the table column I have:

` <a @onclick="@(() => OnClicked(product.Id, i-1))">Display</a>
                                    <EjsDialog @ref="DialogObj[i-1]" Width="320px" IsModal="true" ShowCloseIcon="true" Visible="false">                                        
                                        <DialogTemplates>                                           
                                            <Content>
                                                @if (SelectedProduct != null)
                                                {
                                                    <h4>Description:</h4>
                                                    <p>@((MarkupString)SelectedProduct.Description)</p>
                                                    <hr />
                                                    <h4>Technicals:</h4>
                                                    <p>@((MarkupString)SelectedProduct.Technicals)</p>
                                                }
                                            </Content>
                                        </DialogTemplates>
                                    </EjsDialog>`

But EjsDialog[] DialogObj; are null after I change page. What should I do so that dialog shows even after I change page and child component's data is changed?

EDIT:
At first I did it without an array like this all the tds use one reference:

` EjsDialog DialogObj;

    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        
        StateHasChanged();
    }`

In the OnClicked event of dialog, reference is not null but it doesn't show after I change the page.