mihamarkic / blazordevextreme Goto Github PK

blazer server side controller how to call jsruntime it says null

I tempted to discontinue the project since DevExpress announced official Blazor support. Keeping this alternative doesn't make much sense anymore. Thanks for all the comments and contribution, it has been a fun ride.

Special thanks to @sven5 for all the contribution.

Hi Miha,

I was successful in creating a Datagrid bound to simple object data. The grid works with filtering and paging.
However, I need a custom cell and the possibility to customize cell templates and contents.
What I've seen so far: using the cellTemplate property of DxDataDataGRidColumn only accepts string text and no dynamic content.
The cellPrepared event doesn't get any parameters from js, would it be possible to pass the params to .NET?

Regards
Sven

No need to upgrade components.

As things going on, Blazor 0.8 has been released recently.
It would be nice to update the references.

Regards
Sven

Hi Miha,

I'm currently trying to attach to the event Datagrid.OnInitialized. Though I set OnInitializedEnabled to true the event is not being called. While searching through registration.js I found out that the function BlazorDevExtreme_Component_Init is not being called. Only BlazorDevExtreme_DxDataGrid_Init is called. But the event lives in BlazorDevExtreme_Component_Init
Could you please look into it?

As a thank you, I will provide a new datagrid demo bound to Web API backend. 😄

Regards
Sven

This library look very interesting!!!
Is it possible to provide more examples for f.e. datagrid, autocomplete etc.

That would be very helpful..

Thx!

Hi,

1.
it's necessary to call JSON.parse(value) for the SetOptions js functions - especially for setting the DataSource.
Example:

function BlazorDevExtreme_DxDataGrid_SetOption (element, key, value) {
    const option = JSON.parse(value);
    DevExpress.ui.dxDataGrid.getInstance(element).option(key, option);
};

2.
Setting the DataSource in Controls.cs needs a Json conversion.
Example:

public static Task SetDataSource(ElementRef dxTarget, object value)
{
     string jsonValue = SimpleJson.SimpleJson.SerializeObject(value);
     return JSRuntime.Current.InvokeAsync<object>("BlazorDevExtreme_DxDataGrid_SetOption", dxTarget, "dataSource", jsonValue);
}

Otherwise there is a problem between camelCase / PascalCase.

Hi Miha,

I'd like to use your lib together with a server-side Blazor app.

I get an error
Unable to cast object of type 'Microsoft.AspNetCore.Blazor.Server.Circuits.RemoteJSRuntime' to type 'Microsoft.JSInterop.IJSInProcessRuntime'

Is it possible to change the behavior or add a switch to the lib for server-side?

Thanks
Sven

Add a menu to demo app and add a simple dxDataGrid sample. In future more samples should be added.

This is an inheritance problem. Many calls from DxDataGrid.cshtml are using BlazorDevExtreme_GridBase JS functions. These functions call to DevExpress.ui.GridBase - but this class does not exist. They should call DevExpress.ui.dxDataGrid.

In particular, Dxdatagrid should call BlazorDevExtreme_DxDataGrid_SetOption

Thanks
Sven

Hi Miha,

today I tried implementing a Dxdatagrid.
I was successful in defining columns for the grid:

<DxDataGrid Columns="@gridColumns" />

object gridColumns = new[]
{
    new DevExpress.Ui.DxDataGridColumn { caption = "Name", dataField = nameof(OverviewEntry.StoreName), dataType = "text"},
    new DevExpress.Ui.DxDataGridColumn { caption = "Street",dataField = nameof(OverviewEntry.StoreStreet), dataType = "text" },
    new DevExpress.Ui.DxDataGridColumn { caption = "Zipcode", dataField = nameof(OverviewEntry.ZipCode), dataType = "text" },
    new DevExpress.Ui.DxDataGridColumn { caption = "City",dataField = nameof(OverviewEntry.City), dataType = "text" },
    new DevExpress.Ui.DxDataGridColumn { caption = "Status", dataType = "text" }
};

And then I'd like to add a filterRow to the grid.
My problem is, that most of datagrid's functionality is in the GridBase component. However there is no connection between DxDataGrid and GridBase - I think something is missing. The DxDataGrid should inherit from GridBase.
Could you please look into it?

Thanks
Sven

Hi Miha,

I was successful in setting a widget's value back to Blazor. It would be great to have this functionality for all widgets. Currently I manually implemented some changes for this to work. You have to take care of this in your automatic code generation.

Let me try to explain with some sample code. I started with a DxSelectBox
<DxSelectBox DataSource="@(NewsService.GetCategories())" DisplayExpr="@("Name")" ValueExpr="@("Id")" bind-Value="@DataItem.CategoryId" OnValueChangedEnabled="true" />

In Registration.js I had to extend the code for BlazorDevExtreme_DxSelectBox_Init to call the onValueChanged function:

 if (options.onValueChangedEnabled) {
        options.onValueChanged = function () {
            DotNet.invokeMethodAsync(assemblyName, 'DevExpress.Ui.EditorInterop.OnValueChanged', element.id, instance.option("value"));

        }
    }

In Controls.cs I had to change the ValueChanged EventHandler to use a Tuple:

public static event EventHandler<(JQueryEventArgs, string)> ValueChanged;

And the modified JS registration:

[JSInvokable("DevExpress.Ui.EditorInterop.OnValueChanged")]
public static void OnValueChanged(string identifier, string value)
		{
            ValueChanged?.Invoke(null, (new JQueryEventArgs(identifier), value));
        }

Now in the component DxSelectBox.cshtml I had to modify the event handler:

[Parameter]
    Action<string> ValueChanged { get; set; }
    void DxSelectBox_ValueChanged(object sender, (JQueryEventArgs jQueryEventArgs, string value) args) {
        if (args.jQueryEventArgs.Identifier == Id) {
            ValueChanged?.Invoke(args.value);
        }
    }

Please see my checkin for a complete overview.

I have added a couple of examples (datagrid, scheduler) to your app.
I can submit a pullrequest if you wish.

Since the 18.2.4 release of DevExtreme, there is a new control called HtmlEditor (See example here.

Could you please update the wrappers to include the new widget.

Thanks
Sven

Update definitions from DevExtreme 18.2

Hi,

I am looking into the library but I cannot find a way to assign a datasource to a datagrid.
There is no immediate property 'datasource' available.

Can you give me a hint

Thx

Hi,

at first I want to say thanks for your big effort in this tool. We are using DevExtreme with MVC and now I'm working on a new Blazor project where I'd love to use DX widgets.
However it seems that this tool is not working with Blazor's current version of 0.5.1. Could you fix it?

Thanks
Sven

Thanks for the work that's been done on this guys - it gives an instant boost to using devexpress on blazor while we wait for the native controls to come along.

I have been testing the fork produced by Sven5 as I've now moved on to VS 2019 and razor components (as they'll go to production first).

I created a razor components project (the standar App and Server project that VS 2019 produces) and linked in BlazorDevExtreme to the app project, added the devextreme items to index.htm and am trying to use just the datagrid page. I am getting a problem that I assume is to this separation (seen in the browser dev tools):
SCRIPT5022: Could not find 'BlazorDevExtreme_DxDataGrid_Init' in 'window'.
components.server.js (22,47598)

Sorry, I'm a bit new to this, but can anyone please give me some guidance on how I should combine BlazorDevExtreme with my code to get it to work? I'm assuming the above means it isn't finding registration.js?

Thanks in advance.

Hi,

It's exciting to see this project ;) I just want to give you some hints you might find helpful to go forward faster. We have created wrappers for Angular, React, Vue and ASP.Net MVC using the same approach.
 
We have a 3rd-Party Frameworks Integration API that we use in our wrappers' implementation. It's jQuery-free.
 
Also, we have Integration Meta Data that contains all the public API info. We use this info to generate component source code. The generated components extend a base component implementation.
 
Feel free to ask any integration-related questions in our Support Center or in this thread.

@MihaMarkic

Hi,

Unfortunately, it's become very quiet here. 😢

Today I came across another problem. When using the DxFileUpload widget and attach the OnValueChanged event the following error is thrown:

System.ArgumentException: "The assembly 'BlazorDevExtreme' does not contain a public method with [JSInvokableAttribute("DevExpress.Ui.DxFileUploaderInterop.OnValueChanged")]."

I will try to workaround this error .

Regards
Sven