Back to Questions
878
views7
comments
How to incorporate external Kendo templates
websharperkendotemplate

Is there a recommended approach for incorporating Kendo templates which are contained in separate html files?

E.g., the following Kendo templates are stored in an external file: DrumTemplates.html.

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

<script id="search_template" type="text/x-kendo-template">
    <div class="search_item" style="margin-bottom: 2px;">
        <span class="label label-default">#= BrakeDrumNumber #</span><br class="search_item_part_number" />
        <span class="search_item_child_token">#= Description #</span><br />
        <span class="search_item_child_token">#= BomDescription #</span><br />
        <span class="search_item_child_token">#= BomMaterial #</span>
        # if (IncludesCompetitorDrums) { #
        # for (var i = 0; i < CompetitorDrums.length; i++) { #
        <br /><span class="search_item_child_token_competitor">#= CompetitorDrums[i] #</span>
        # } #
        #} #
    </div>
</script>
... Other drum-specific Kendo templates

In a client-server WebSharper application, I have a slot for templates in Main.html at the top of the <body> tag: <script data-replace="templates"></script>

I would like to fill that slot dynamically with the content of different template files corresponding to the various served pages. Also, since some of the pages have no Kendo templates, I would like to make filling this slot optional (I suppose one could use Doc.Empty).

In Main.fs in the MainTemplate.Doc(..., templates = [templates in Kendo external file]) call, how does one inject the text of the template file?

Thanks!

.

Looks like Doc.Verbatim is not yet available in the latest Nuget bits.

By on 9/21/2015 4:59 PM ()

You are right, this is not out on the public feed yet. For the time being you can use some trickery to get around this described here: http://www.websharper.com/question/80111/ui-next-insert-raw-html-string-into-dom?filter=forum#comment-80118.

By on 9/22/2015 1:11 AM ()

Thanks István, I was able to use the client-side example. But I'm not sure how to adapt the server example since I'm not using Content.Page.

I don't understand how to transform a WebSharper.Html.Server.Html.Element into a WebSharper.UI.Next.Doc

1
2
3
4
5
6
7
8
9
10
11

//Main.html
<body>
    <script data-replace="templates"></script>

//Main.fs
    let Main ctx action title body (templates : string option) =
        let scriptElement = WebSharper.Html.Server.Html.VerbatimContent (defaultArg templates "")
        Content.Doc(MainTemplate.Doc(title = title, menubar = MenuBar ctx action, body = body, templates = [scriptElement :> Doc]))

//Exception
//	The type 'Html.Server.Html.Element' is not compatible with the type 'Doc'
By on 9/22/2015 10:56 AM ()

Sorry for the delay in replying here. You might have already noticed that a new version is out which contains Doc.Verbatim.

By on 9/28/2015 1:17 AM ()

The answer is that you don't (although it can always be hacked, but...). If you use UI.Next (which is recommended), you should construct Docs and not Elements, so yes, you will need Doc.Verbatim. I'll see about releasing updates to the whole stack tomorrow, including a new UI.Next release.

By on 9/23/2015 3:07 PM ()

You can read your file into a string and use Doc.Verbatim to pass it as a Doc.

By on 9/21/2015 2:45 PM ()

Fetched the bits. Doc.Verbatim is working for the Kendo templates. Thanks!

But since I haven't discovered a way to configure a Kendo datasource to leverage RPC calls, as a hack I tried using Doc.Verbatim to inject a complete widget definition. Unfortunately that approach results in 403s (with x-websharper-rpc hacked). Refer to this topic.

By on 9/24/2015 10:38 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