Back to Questions
1.4k
views8
comments
How does one configure the Kendo DataSource to interact with a WebSharper server-side RPC?
websharperkendo datasource

The Kendo examples use untyped (WebSharper/F#-compiled) JavaScript for a DataSource configuration to fetch static-json files.

I would like to understand how to configure the Kendo AutoComplete's datasource to fetch data from a WebSharper RPC endpoint (i.e., an endpoint which pulls from a database). Also, I prefer to used strongly-typed configuration via data1.DataSourceOptions if possible.

How can this be achieved? Thanks!

Here's the JavaScript that I'm trying to port to WebSharper:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

dataSource: {
	serverFiltering: true,
	transport: {
	   //TODO: Replace read function with WebSharper RPC
		read: function(options) {
			$.ajax({
				url: "/api/search", 
				data: { searchText: options.data.filter.filters[0].value },
				dataType: "json",
				success: function(result) {
					options.success(result);
				},
				error: function(result) {
					options.error(result);
				}
			});
		}
	}
}
.

I'm trying to achieve the same thing, but I'm failing miserably.

When I couple the datasource ds below to a Grid, I get nothing what so ever in the console. No errors, no output, no nothing. I have looked at the genereated JavaScript, and as far as I can tell it looks ok. Looking at the data1.DataSourceTransportRead type, it seems to only support the "Object" interface and not the "String" and "Function" interfaces of transport.create.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    let readData (x : data1.DataSourceTransportReadOptions) =
	    Console.Log("read: ")         
        x.success()
        
    let ds =
	    data1.DataSource.Create (
            New [ 
                "serverFiltering" => true
                "transport" => New [
                    "read" => readData
                ] 
            ]
            New [ "schema" => 
                New ["model" => 
                    New [ "id" => "foo"]
                ]
            ]

I'm using:

  • WebSharper 3.6.10.230
  • UI.Next 3.6.8.2014
  • KendoUI 3.6.10.237
By on 3/18/2016 7:58 AM ()

Arhg, I finally got it to work. Here is the correct definition:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

	data1.DataSource.Create (
        New [
            "transport" => 
                New [ 
                    "read" => readData
                    "create" => createData
                    "update" => updateData
                    "destroy" => destroyData
                ] 
            "schema" => 
                New ["model" => 
                    New [ "id" => "PersonId" ]
                ]
        ]
    )

Having toyed with KendoUI for a while now, I think the typesafety is abysmal. Or perhaps I'm just spoilt, having primarily only used F# and Haskell for the past 3 years ;)

By on 3/18/2016 12:23 PM ()

I've got this working by using the quotation. But I don't understand how to pass in the AutoComplete's currently entered text to the RPC call.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// Client:
    type D = data1

    let getData() =
        DrumServer.Search("107150") //TODO replace hard-coded value with text entered into the AutoComplete widget (passed into this method)

    let partNumberAutoCompleteDataSource =
        D.DataSource.Create (
            New [
                "serverFiltering" => true
                "transport" =>
                    New [
                        "read" => getData // TODO: How to pipe in options.data.filter.filters[0].value (which is the AutoComplete's input text)?
                    ]
            ]
        )

module DrumServer =
    open FSharp.Data

    [<Literal>]
    let connectionString = "name=CatalogContext"

    type SearchByConMetFldsCmdPvdr = SqlCommandProvider<"SELECT * FROM BrakeDrum.ft_SelectBySearchTokens_ConMetFieldsOnly(@TokenTable)", connectionString >
    type SearchTokenTableType = SearchByConMetFldsCmdPvdr.SearchTokenTableType

    [<Rpc>]
    let Search (searchText : string) =
        let tokens = searchText.Split(' ')
                     |> Array.filter (fun (token) -> token.Length > 2)
                     |> Array.map (fun (token) -> SearchTokenTableType(token))
        let searchCommand = new SearchByConMetFldsCmdPvdr()
        let records = searchCommand.Execute(tokens) |> Seq.toArray
        records
By on 9/23/2015 11:45 AM ()

I've tried hacking around this issue several different ways. Nothing seems to work.

Surely it must be possible to configure Kendo widgets using WebSharper to make RPC calls. But how?

By on 9/24/2015 10:28 AM ()

As I see there's a D.DataSourceTransportReadOptions type which seems to be the appropriate one. Can you try what happens if you do:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

type D = data1

let getData(options : D.DataSourceTransportReadOptions) =
    DrumServer.Search(options.data.filter.filters.[0]?value)

let partNumberAutoCompleteDataSource =
    D.DataSource.Create(
        New [
            "serverFiltering" => true
            "transport" =>
                New [
                    "read" => FuncWithArgs<_,_>(getData)
                ]
        ]
    )
By on 9/28/2015 1:32 AM ()

With these tweaks, it won't build now and indicates this error:

1
2
3

Wrong type argument on FuncWithArgs:
'TArgs must be a tuple	
...\packages\WebSharper.3.4.19.200\build\WebSharper.targets
By on 9/28/2015 9:11 AM ()

Oh yeah, actually, just "read" => getData should work if the function only has one parameter.

By on 9/29/2015 12:28 AM ()

Thanks, that works. It's posting the data now; but the server returns a 403 CSRF.

By on 9/29/2015 8:21 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