<template id="trv-report-viewer">
    <div class="trv-report-viewer w-100 h-100 gap-4">
        <div data-role="splitter" class="trv-parameters-splitter ">
            <div data-id="trv-parameters-area" class="trv-parameters-area w-25" data-role="telerik_ReportViewer_ParametersArea">
                <div class="d-flex flex-column pe-4">
                    <div class="d-flex align-items-center px-3">
                        <h3 class="flex-grow-1 ps-3">Report</h3>

                        <div class="trv-side-menu d-flex gap-3" data-role="telerik_ReportViewer_SideMenu">
                            <ul class="d-flex flex-row  gap-2" aria-label="ariaLabelSideMenu">
                                <li aria-label="ariaLabelMenuNavigateBackward">
                                    <a data-command="telerik_ReportViewer_historyBack" title="menuNavigateBackwardTitle" href="#" class="element_Action shadow-none bg-none pb-0">
                                        <i class="bi bi-arrow-90deg-left"></i>
                                    </a>
                                </li>
                                <li aria-label="ariaLabelMenuNavigateForward">
                                    <a data-command="telerik_ReportViewer_historyForward" title="menuNavigateForwardTitle" href="#" class="element_Action shadow-none bg-none pb-0">
                                        <i class="bi bi-arrow-90deg-right"></i>
                                    </a>
                                </li>

                                <li class="element_Action " aria-label="ariaLabelMenuRefresh">
                                    <a data-command="telerik_ReportViewer_refresh" title="ariaLabelMenuRefresh" class="element_Action shadow-none">
                                        <i class="bi bi-arrow-clockwise"></i>
                                    </a>
                                </li>
                                <li aria-label="ariaLabelMenuToggleMenu">
                                    <button
                                        title="Toggle Filter"
                                        type="button"
                                        class="element_Action shadow-none"
                                        onclick="toggleReportViewerParameters(event, this)">
                                        <i class="bi bi-sliders2-vertical"></i>
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="reportViewer_Parameters ">
                        <div class="trv-parameters-area-content" role="complementary">
                            <div class="trv-parameters-wrapper"></div>
                        </div>

                        <div class="trv-parameters-area-footer mt-3">
                            <button type="button" aria-label="ariaLabelParametersAreaPreviewButton" class="element_Button trv-parameters-area-preview-button">Preview</button>
                        </div>
                        <div class="trv-error-pane k-tooltip-validation k-widget">
                            <div class="trv-error-message"></div>
                        </div>
                        <div class="trv-parameters-area-overlay"></div>
                    </div>

                    <div class="d-flex flex-wrap gap-1 px-2 align-items-center reportViewer_exportOrPrint">
                        <select
                            name="exportFormat"
                            class="reportViewer_exportFormat flex-shrink-0"
                            onchange="changeReportExportFormat(this)">
                            <option value="PDF">Adobe (PDF) file</option>
                            <option value="CSV">CSV (comma delimited)</option>
                            <option value="XLS">Excel 97-2003</option>
                            <option value="XLSX">Excel Worksheet</option>
                            <option value="PPTX">PowerPoint Presentation</option>
                            <option value="RTF">Rich Text Format</option>
                            <option value="IMAGE">TIFF File</option>
                            <option value="MHTML">Web Archive</option>
                            <option value="DOCX">Word Document</option>
                            <option value="XPS">XPS Document</option>
                        </select>

                        <button class="element_Button reportViewer_exportButton" data-command="telerik_ReportViewer_export" data-command-parameter="pdf">Export</button>
                        <span class="is-dimmed px-1">or</span>
                        <button class="element_Button" data-command="telerik_ReportViewer_print">Print</button>
                    </div>
                </div>
            </div>

            <div class="k-splitbar k-splitbar-horizontal"></div>

            <div class="trv-content-wrapper w-75 bg-darkcloud">
                <div data-id="trv-pages-area" class="trv-pages-area border-0 p-4" data-role="telerik_ReportViewer_PagesArea" role="main" aria-label="ariaLabelPagesArea">
                    <div class='trv-page-container'>
                        <div class='trv-page-wrapper active'></div>
                    </div>

                    <div class='trv-error-pane'>
                        <div class="trv-centered k-tooltip-validation">
                            <div class='trv-error-message'></div>
                        </div>
                        <div style="clear: both;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<!--PARAMETERS-->
<template id="trv-parameter">
    <div class="trv-parameter-container mt-3">
        <div class="trv-parameter-header">
            <div class="trv-parameter-title label is-dimmed ps-3"></div>
        </div>

        <div class="trv-parameter-error">
            <span class="trv-parameter-error-message"></span>
        </div>
        <div class="trv-parameter-value"></div>
    </div>
</template>

<template id="trv-parameter-editor-available-values-multiselect">
    <div class="trv-parameter-editor-available-values-multiselect">
        <div class="trv-list"></div>
        <div class="trv-parameter-actions">
            <button class="trv-select-all element_Action">parameterEditorSelectAll</button>
            <button class="trv-select-none element_Action">parameterEditorSelectNone</button>
        </div>
    </div>
</template>

<template id="trv-parameter-editor-available-values-multiselect-combo">
    <div class="trv-parameter-editor-available-values-multiselect">
        <div class="trv-combo"></div>
        <div class="trv-parameter-actions">
            <button class="trv-select-all element_Actionelement_Action">parameterEditorSelectAll</button>
            <button class="trv-select-none element_Actionelement_Action">parameterEditorSelectNone</button>
        </div>
    </div>
</template>

<template id="trv-parameter-editor-available-values">
    <div class="trv-parameter-editor-available-values">
        <div class="trv-list" id="trv-parameter-editor-singleselect-list"></div>
        <div class="trv-parameter-actions">
            <button class="trv-select-none element_Action">parameterEditorSelectNone</button>
        </div>
    </div>
</template>

<template id="trv-parameter-editor-available-values-combo">
    <div class="trv-parameter-editor-available-values">
        <div class="trv-combo" id="trv-parameter-editor-singleselect-combo"></div>
        <div class="trv-parameter-actions">
            <button class="trv-select-none element_Action">parameterEditorSelectNone</button>
        </div>
    </div>
</template>

<template id="trv-parameter-editor-datetime">
    <div class="element_DateTimePicker">
        <input type="datetime" class=" trv-parameter-editor-datetime" />
    </div>
</template>

<template id="trv-parameter-editor-text">
    <div class="element_Input">
        <input type="text" class=" trv-parameter-editor-text" />
    </div>
</template>

<template id="trv-parameter-editor-number">
    <div class="element_Input">
        <input type="number" step="any" class=" trv-parameter-editor-number" />
    </div>
</template>

<template id="trv-parameter-editor-boolean">
    <input type="checkbox" class="element_Checkbox trv-parameter-editor-boolean" />
</template>

<template id="trv-parameter-editor-multivalue">
    <div class="trv-parameter-editor-multivalue element_Textarea">
        <textarea></textarea>
    </div>
</template>

<telerik:ReportViewer
    ID="html5ReportViewer" ServiceUrl="/api/reports"
    EnableAccessibility="false"
    PersistSession="false"
    ParametersAreaPosition="Left"
    TemplateUrl="~/reportTemplate/reportViewerTemplate.html"
    PageMode="ContinuousScroll"
    ScaleMode="FitPageWidth"
    runat="server">

Telerik.Reporting.Serialization.SerializerExcepion
  HResult=0x80131500
  Message=The XML serializer cannot resolve type with name: System.ComponentModel.ISite
  Source=Telerik.Reporting
  StackTrace:
   at Telerik.Reporting.Serialization.ObjectReader.ReadValue(Object obj, PropertyDescriptor prop)
   at Telerik.Reporting.Serialization.ObjectReader.ReadAttributes(Object obj, PropertyDescriptorCollection props)
   at Telerik.Reporting.Serialization.ObjectReader.ReadProperties(Object obj)
   at Telerik.Reporting.Serialization.ObjectReader.ReadObject(Type type)
   at Telerik.Reporting.Serialization.ObjectReader.ReadXmlElement(String name)
   at Telerik.Reporting.Serialization.ObjectReader.ReadCollection(Object collection)
   at Telerik.Reporting.Serialization.ObjectReader.ReadProperties(Object obj)
   at Telerik.Reporting.Serialization.ObjectReader.ReadObject(Type type)
   at Telerik.Reporting.Serialization.ObjectReader.ReadXmlElement(String name)
   at Telerik.Reporting.Serialization.ObjectReader.Deserialize(IResourceHandler handler)
   at Telerik.Reporting.JsonSerialization.JsonSerializer.Deserialize(String value)
   at Telerik.Reporting.JsonSerialization.JsonSerializer.Deserialize(StreamReader reader)
   at Telerik.Reporting.JsonSerialization.JsonSerializer.Deserialize(Stream stream)
   at Telerik.Reporting.JsonSerialization.ReportJsonSerializer.Deserialize(Stream stream)
   at MOS.ReportWriter.Web.Core.TelerikExtensions.ReportHelper.LoadReportFromDataWithDatasources(String reportData, List`1 webServiceDataSources) in C:\working\sourcecode\hrs-report\MOS.ReportWriter.Web\Core\TelerikExtensions\ReportHelper.cs:line 110

  This exception was originally thrown at this call stack:
    [External Code]

Inner Exception 1:
InvalidCastException: Invalid cast from 'System.String' to 'System.ComponentModel.ISite'.

public static Telerik.Reporting.Report LoadReportFromDataWithDatasources(string reportData, List<CustomeWebServiceDataSource> webServiceDataSources)
{
    try
    {
        using MemoryStream stream = new(Convert.FromBase64String(reportData));
        var reportPackager = new ReportPackager();
        Telerik.Reporting.Report reportDocument = (Telerik.Reporting.Report)reportPackager.UnpackageDocument(stream);

        // Filter only WebServiceDataSources
        var originalDataSources = reportDocument.GetDataSources();
        var webServiceSources = originalDataSources.OfType<WebServiceDataSource>().ToList();

        // Match and update existing WebServiceDataSources
        var matchedDataSources = webServiceSources
            .Where(ws => webServiceDataSources.Any(x => x.ServiceUrl == ws.ServiceUrl))
            .ToList();

        var unmatchedCustomSources = webServiceDataSources
            .Where(x => !webServiceSources.Any(ws => ws.ServiceUrl == x.ServiceUrl))
            .ToList();

        var rebuiltDataSources = new List<object>();

        foreach (var ws in matchedDataSources)
        {
            var matchingCustom = webServiceDataSources.FirstOrDefault(x => x.ServiceUrl == ws.ServiceUrl);
            var paramValues = JsonConvert.DeserializeObject<Dictionary<string, object>>(matchingCustom?.ParameterValues);

            var updatedWs = new CustomeWebServiceDataSource
            {
                Name = ws.Name,
                DataEncoding = ws.DataEncoding.CodePage,
                Method = ws.Method.ToString(),
                Parameters = ws.Parameters.Select(p => new DataSourceParameter
                {
                    Name = p.Name,
                    Value = new DataSourceParameterValue { Value = p.Value?.ToString() },
                    WebServiceParameterType = p.WebServiceParameterType.ToString()
                }).ToList(),
                ServiceUrl = ws.ServiceUrl,
                DataSelector = ws.DataSelector
            };

            updatedWs.SetParameterValues(paramValues);
            rebuiltDataSources.Add(updatedWs);
        }

        // Add new unmatched custom sources
        rebuiltDataSources.AddRange(unmatchedCustomSources);

        // Preserve non-WebServiceDataSources
        var otherDataSources = originalDataSources.Where(ds => ds is not WebServiceDataSource);
        rebuiltDataSources.AddRange(otherDataSources);

        // Serialize updated report and inject data sources
        var reportContent = SerializeReportToJson(reportDocument);
        var reportJson = JsonConvert.DeserializeObject<JToken>(reportContent);

        // Use full polymorphic list
        reportJson["DataSources"] = JsonConvert.DeserializeObject<JArray>(JsonConvert.SerializeObject(rebuiltDataSources));
        reportContent = JsonConvert.SerializeObject(reportJson);

        using MemoryStream finalStream = new(System.Text.Encoding.UTF8.GetBytes(reportContent));
        var serializer = new ReportJsonSerializer();
        return (Telerik.Reporting.Report)serializer.Deserialize(finalStream);
    }
    catch
    {
        return null;
    }
}