[Solved] Is there a way to only render a control's markup

[Jonathan]

I'm trying to use a DatePicker with jQuery's new templating lib (http://api.jquery.com/jquery.tmpl/), but rendering the control also outputs a script tag which throws a wrench in the works... Is there a way to only render the control markup, so we can setup the control on our own (e.g. $('#datepicker').tDatePicker({...}))?

Is there a way to set the IsSelfInitialized property (http://www.telerik.com/help/aspnet-mvc/p_telerik_web_mvc_ui_viewcomponentbase_isselfinitialized.html)? Is that what's it's used for?

Cheers,
Jonathan

[Jonathan]

If anyone is curious I worked up a solution by creating an HTML Helper that wraps the Telerik Helper. Example (simplified for brevity):

public class TelerikHelper
{
    private HtmlHelper _html;

    internal TelerikHelper(HtmlHelper html)
    {
        _html = html;
    }

    public MvcHtmlString DatePicker(string id, bool selfInitialize = true)
    {
        var datepicker = _html.Telerik().DatePicker().Name(id);
        return selfInitialize
            ? new MvcHtmlString(datepicker.ToHtmlString())
            : BuildComponentHtml((new DatePickerHtmlBuilderFactory()).Create(datepicker).Build(), datepicker);
    }

    private static MvcHtmlString BuildComponentHtml(IHtmlNode parentNode, ViewComponentBase component)
    {
        var sb = new StringBuilder();
        using (var writer = new HtmlTextWriter(new StringWriter(sb)))
        {
            component.VerifySettings();
            parentNode.WriteTo(writer);
        }
        return new MvcHtmlString(sb.ToString());
    }
}

Usage:

@Html.TelerikHelper().DatePicker("DatePicker1",  false)

Hopefully this'll help someone else save some time...

[Sam Critchley]

I couldn't get that to work as is. This method "VerifySettings" was not found. Might be using a different version. It also appear to only output the surrounding div container and not the input tag + button. So I added that and adjusted the implementation to be an extension method... Thanks though as I had given up trying to do this :D

public static class TelerikExtensions
    {
        public static WebAssetItemGroupBuilder AddT4(this WebAssetItemGroupBuilder builder, string value)
        {
            builder.Add("~" + value);

            return builder;
        }

        public static MvcHtmlString DatePicker(this HtmlHelper _html, string id, bool selfInitialize = true)
        {
            var datepicker = _html.Telerik().DatePicker().Name(id);

            if (selfInitialize)
                return MvcHtmlString.Create(datepicker.ToHtmlString());
            else{
                var builder = (new DatePickerHtmlBuilderFactory()).Create(datepicker);
                IHtmlNode rootTag = builder.Build();
                rootTag.Children.Add(builder.InputTag());
                rootTag.Children.Add(builder.ButtonTag());
                return BuildComponentHtml(rootTag);
            }
        }

        private static MvcHtmlString BuildComponentHtml(IHtmlNode parentNode)//, ViewComponentBase component)
        {
            var sb = new StringBuilder();
            using (var writer = new HtmlTextWriter(new StringWriter(sb)))
            {
                //component.VerifySettings();
                parentNode.WriteTo(writer);
            }
            return MvcHtmlString.Create(sb.ToString());
        }
    }