New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Binding to Telerik ClientDataSource

Main Image

Item 1 of 0
 

This demo illustrates how you could easily bind the RadImageGallery to Telerik ClientDataSource. The functionality is available out of the box by using the ClientDataSourceID property.

In this demo the RadClientDataSource control is retrieving the data from a WebService. Also the following properties are set for the RadImageGallery:

  • DataImageField is set to the field containing the image URL.
  • DataThumbnailField is set to the field containing the thumbnail URL. If this property is not set the thumbnails will be generated by the RadImageGallery.
  • DataTitleField is set to the field containing the image title.
  • DefaultCS.aspx
<%@ Page Title="" Language="C#"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <style type="text/css">
        div.RadForm.rfdHeading .RadImageGallery h4, div.RadForm.rfdHeading .RadImageGallery h5 {
            border-bottom: none;
        }

        div.RadForm.rfdHeading .RadImageGallery_Silk h4, div.RadForm.rfdHeading .RadImageGallery_Silk h5,
        div.RadForm.rfdHeading .RadImageGallery_Default h4, div.RadForm.rfdHeading .RadImageGallery_Default h5 {
            color: #333333;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadImageGallery RenderMode="Lightweight" runat="server" ID="RadImageGallery1" Height="600px" Width="800px"
            ClientDataSourceID="RadClientDataSource1"
            DataImageField="ImageUrl" DataThumbnailField="ThumbnailUrl" DataTitleField="Title">
            <ClientSettings>
                <AnimationSettings>
                    <NextImagesAnimation Type="VerticalSlide" />
                    <PrevImagesAnimation Type="VerticalSlide" />
                </AnimationSettings>
            </ClientSettings>
        </telerik:RadImageGallery>
    </div>

    <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
        <DataSource>
            <WebServiceDataSourceSettings>
                <Select Url="ImagesService.asmx/GetImages" RequestType="Post" DataType="JSON" ContentType="application/json" />
            </WebServiceDataSourceSettings>
        </DataSource>
        <Schema DataName="d">
        </Schema>
    </telerik:RadClientDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance