Completed
Last Updated: 31 May 2021 09:06 by ADMIN
Ricard Bertran Vall
Created on: 03 Mar 2016 16:07
Category: Window
Type: Feature Request
1
Send dynamic content (json client-side, string server-side) to RadWindow
I'd like to send JSON (or string) object to RadWindow to be able to populate its content with  this object.
Similar to Value RadNotification property: public string Value { get; set; }

Code snippet below illustrates what I'd like to achieve.


function showWindow(jsonObject) {
    var windowManager = GetRadWindowManager();
    if (windowManager) {
        var window = windowManager.getWindowByName("RadWindow1");

        if (window != null) {
            window.DynamicContent = jsonObject; //Set content
            window.show();
        }
    }
    return;
}

function RadWindow1_Show(sender, args) {
    var jsonObject = sender.DynamicContent;

    if (jsonObject != null) {
        var selector = null;

        selector = 'span[id*="Content"]';
        var domElements = $telerik.$(selector);
        if (domElements != null && domElements.length > 0) {
            var spanId = domElements.attr('id');
            var span = $get(spanId);
            if (span != null)
                span.innerHTML = message;
        }
    }

    return;
}
1 comment
ADMIN
Peter Milchev
Posted on: 31 May 2021 09:06

Hello Ricard,

The code snippet you have share would actually work, as you can add custom expando properties to the client-side object:

<telerik:RadWindowManager runat="server">
    <Windows>
        <telerik:RadWindow runat="server" OnClientShow="OnClientShow" ID="RadWindow1">
            <ContentTemplate>
                <div class="window-content"></div>
            </ContentTemplate>
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>
<input type="text" id="fn" value="John" />
<input type="text" id="ln" value="Doe" />
<telerik:RadButton runat="server" OnClientClicked="OnClientClicked" ID="RadButton1" Text="Show Window" AutoPostBack="false" />
<script>
    function OnClientShow(sender, args) {
        var name = sender.DynamicContent.FirstName + " " + sender.DynamicContent.LastName;
        $telerik.$(sender.get_contentElement()).find(".window-content").text(name)
    }
    function OnClientClicked(sender, args) {
        var wnd = GetRadWindowManager().GetWindowById("RadWindow1");
        wnd.DynamicContent = {
            FirstName: document.getElementById("fn").value,
            LastName: document.getElementById("ln").value
        };
        wnd.show();
    }
</script>

 

If you need to pass some data from the server-side, you can add it to the Attributes collection and access it on the client-side.

C#:

 RadWindow1.Attributes.Add("my-data", "Server-side data");

JavaScript:

windowObj.get_element().getAttribute("my-data");

Another way is storing the data in a hidden field, which you can access on the client-side. For more complex data, you can serialize an object to JSON string from the server-side and on the client-side use the JSON.parse(), to receive an object from the string.

Regards,
Peter Milchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.