Back to Questions
1.4k
views1
comment
Generating an interface for a JQuery plugin
websharperjqueryjquery-pluginwigwebsharper-interface-generator

I am following the Websharper Interface Generator doc to create an extension for the DevExpress DevExtreme libraries. I started with the DxDataGrid widget.

Writing stubs for the classes and methods (DataGrid, DataSource, CustomStore) was straightforward enough. However, to actually insert the widget in the page (in the simplest way), you are supposed to use a JQuery plugin like this:

1

<div id="gridContainer"></div>

in the HTML, and 

1
2
3
4

$("#gridContainer").dxDataGrid({
    dataSource: customers,
    columns: ['CompanyName', 'City', 'State', 'Phone', 'Fax']
});

in the script.

What should I do in order to be able to call the .dxDataGrid property from WebSharper's JQuery.Of("...") object, or in any case insert the DataGrid widget inside a div [] ?

.

I think you cannot do this directly from WIG. What you could do is define a different class with a static member inlined like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

module Definition =

    let opts = 
        Pattern.Config "DxDataGridSettings"
            {
                Optional = ["dataSource", Type.ArrayOf T<string>]
                Required = []
            }

    let DxDataGrid =
        Class "DxDataGrid"
        |+> Static [
            "New" => (T<WebSharper.JQuery.JQuery>?elem * opts?settings) ^-> T<WebSharper.JQuery.JQuery>
            |> WithInline "$elem.dxDataGrid($settings)"
        ]
        |> RequiresExternal [T<WebSharper.JQuery.Resources.JQuery>]

    let Assembly =
        Assembly [
            Namespace "Extension1" [
                opts
                DxDataGrid
            ]
        ]

and you could use this like:

1

DxDataGrid.New(JQuery.Of("#id"), DxDataGridSettings(DataSource = [||]))

Obviously this is not as concise but I think this is the best you can do from WIG.

If you want it to be an extension method you will have to do the basis of the project in WIG, then from another project add an extension method to JQuery which uses your WIG generated assembly:

1
2
3
4
5
6

open WebSharper.
open DxDataGridExtension

type JQuery with
	[<Inline "$0.dxDataGrid($settings)">] // note that you can only refer to x here as $0 not $x
	member x.DxDataGrid(settings : DxDataGridSettngs) = X<JQuery>

but as I noted before you cannot have this in the same assembly as your WIG project as you need to have the generated assembly here.

By on 8/25/2015 1:49 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper