view componenet for json schema + json data

[Hilik Yaniv]

hi,

 

we are looking for a component (client side is preferred) that gets 2 inputs: a json schema and a json data fields that match the schema.

the component should generate a static html component (not inputs) to nicely display the data values according to the schema

for example in case we have 3 items of types string, number and boolean.

Name:  David the king

Age:      38

Married:    Yes

 

do you have such component?  maybe created as PDF?

[Rumen]

Hi Hilik,

Thank you for your feature request.

Currently, Telerik UI for ASP.NET AJAX does not offer a specific component to directly take a JSON schema and JSON data to generate a static HTML display. We do have a PdfViewer but it works with pdf files or files converted to the PDF file format.

However, you may achieve the desired functionality through a combination of existing components and custom logic.

Suggested Approach

• Custom Rendering Logic: Implement custom server-side or client-side code to parse the JSON schema and data. You can then dynamically generate HTML elements to display the data. This can be done using standard ASP.NET WebForms controls or Telerik controls for enhanced styling and layout.

• RadGrid: Use the Telerik RadGrid to display data in a tabular format. Bind the grid to a data source created from your JSON data. Although this won't directly use a JSON schema, you can configure the columns to match the schema. RadGrid also offers export to PDF.

Example Code Snippet

Here's a basic example to display JSON data using a RadGrid

ASPX

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView DataKeyNames="Name">
        <Columns>
            <telerik:GridBoundColumn HeaderText="Name" DataField="Name" UniqueName="Name"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Age" DataField="Age" UniqueName="Age"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Married" DataField="Married" UniqueName="Married"></telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

ASPX.CS

    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        var jsonData = new List<dynamic>
            {
             new { Name = "John Doe", Age = 38, Married = true }
            };

        RadGrid1.DataSource = jsonData;
    }

You can also file a feature request for the JSON viewer component in the AJAX feedback portal.

Regards,
Rumen
Progress Telerik