Hello, everyone. I'm a novice. I don't how to use the <GridImageColumn>, I have a request to display qualified photos from a remote computer.
For example, A textbox inputs 'abc',then I click the button of 'submit', the <GridImageColumn> or another control should find and display the 'abc.jpg' from the remote computer. The remote TargetFolder url just like '\\123.**.***.***\photo' and I hope it will be shown in <DetailTables> .
How should I edit the back-end code, so that I could get the pictures and also display it. I will post my code.
I'd really appreciate it if you could help me!
<telerik:RadPageView runat="server" ID="RadPageView3">
<telerik:RadAjaxPanel ID="RadAjaxPanel3" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" BackColor="#FFFFFF">
<div class="ContentRow">
<div class="column c1 ">
<telerik:RadLabel ID="labcrate" runat="server" Text="LabCrate" CssClass="LabOnRight" ForeColor="#000000"></telerik:RadLabel>
</div>
<div class="column c2 ">
<telerik:RadTextBox ID="txtCrate" runat="server"></telerik:RadTextBox>
</div>
<div class="column c3 ">
<telerik:RadButton ID="btnSubmit" runat="server" Text="Submit" AutoPostBack ="true"></telerik:RadButton>
</div>
</div>
<telerik:RadGrid RenderMode="Lightweight" runat="server" ID="RG_Carrier" Height="740px" AllowPaging="true" PageSize="10" AllowAutomaticDeletes="false"
AllowAutomaticUpdates="false" AllowAutomaticInserts="false" AllowFilteringByColumn="false" AllowMultiRowSelection="true" OnNeedDataSource="RadGrid_NeedDataSource" >
<PagerStyle Position="Bottom" AlwaysVisible="true" PageSizes="10,20,30"></PagerStyle>
<ClientSettings EnableAlternatingItems="true" AllowKeyboardNavigation="False" EnablePostBackOnRowClick="true">
<Selecting AllowRowSelect="false" />
<Scrolling AllowScroll="true" UseStaticHeaders="true"></Scrolling>
</ClientSettings>
<AlternatingItemStyle BackColor ="LightBlue" />
<MasterTableView DataKeyNames="CrateNo" AutoGenerateColumns="false" CommandItemDisplay="Top" EditMode="PopUp">
<CommandItemSettings ShowAddNewRecordButton="false" />
<Columns>
<telerik:GridBoundColumn AllowFiltering="false" FilterControlWidth="120px" AutoPostBackOnFilter="true" DataField="CrateNo" UniqueName="CrateNo" HeaderText="CrateNo">
<HeaderStyle Width="150px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn AllowFiltering="false" DataField="Qty" UniqueName="Qty" HeaderText="Qty">
<HeaderStyle Width="60px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn AllowFiltering="false" FilterControlWidth="120px" AutoPostBackOnFilter="true" DataField="ProductName" UniqueName="ProductName" HeaderText="ProductName">
<HeaderStyle Width="150px" />
</telerik:GridBoundColumn>
</Columns>
<DetailTables>
<telerik:GridTableView DataKeyNames="CratePhoto" ClientDataKeyNames="CratePhoto" runat="server" CommandDisplay="None" AutoGenerateColumns="true" AllowPaging="false" EditMode="PopUp">
<Columns>
<telerik:GridImageColumn DataType="System.String"
DataImageUrlFormatString=""
ImageAlign="Middle" ImageHeight="110px" ImageWidth="90px" HeaderText="CratePhoto">
</telerik:GridImageColumn>
</Columns>
</telerik:GridTableView>
</DetailTables>
</MasterTableView>
</telerik:RadGrid>
</telerik:RadAjaxPanel>
</telerik:RadPageView>1 Answer, 1 is accepted
Hello Colin,
RadGrid works with data sources, meaning, that you will need to bind a set of data to it which can be displayed by different columns. The number of rows and columns displayed in the Grid will depend on the records in the data source.
For example, given the following table structure that is bound to the Grid
and the following Grid declaration. Notice that each column is pointing to a field in the data source
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource">
<MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">
<Columns>
<telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
</telerik:GridBoundColumn>
<telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
SortExpression="OrderDate" UniqueName="OrderDate">
</telerik:GridDateTimeColumn>
<telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
FilterControlAltText="Filter Freight column" HeaderText="Freight"
SortExpression="Freight" UniqueName="Freight">
</telerik:GridNumericColumn>
<telerik:GridBoundColumn DataField="ShipName"
FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
SortExpression="ShipName" UniqueName="ShipName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ShipCountry"
FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
SortExpression="ShipCountry" UniqueName="ShipCountry">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
This will be displayed as
To use the GridImageColumn, you will need to have a field in the data source where the records contain a URL pointing to the image. The Image must be accessible by the URL you provide, meaning that the remote location must be a web server to serve the file from the PC. For example, the URL in the table below will yield in the following format "http://localhost:11428/images/progress-logo.png", where the localhost is the web server serving the image if accessed by URL.
once you point the Column to this field, the Grid will display the image from that URL
<telerik:GridImageColumn DataImageUrlFields="ImageUrl" HeaderText="Image Column"></telerik:GridImageColumn>Result
It is important to understand that the image URL must point to a place where the image is served by a web server. With that said the image that is located on the network location such as "\\123.**.***.***\photo", must be served by a Web Server, or otherwise said, the remote location must be a Web Server itself, and those to provide a valid WEB URL that can open the image.
The following example will NOT WORK because that path is only recognized by the Filesystem, not the web.
Your options are:
- Write a C#/VB code that will access and copy the image over to the root folder of the Web Application and serve it from there. (the image must exist and be available by the URL)
- Write a C#/VB code that will access the image at the remote location, converts it to a binary array, and bind that to the Grid. (the image is stored in the data source as a binary array in the data source, there is no need for URLs, as the binary array is converted to an image object on the fly and displayed in the Grid
Last but not least, if you want to display images on a button click, then you must update the data source of the Grid when the button is clicked, only then the records in the data source will be displayed by the Grid. If you do not want to use the built-in features, you can always display the image using other means, for example How to Display Image With JavaScript or How to display Base64 images in HTML. In both cases, you will need to access the image and convert it to data that can later be displayed as an image on the web.
You might also check out the following articles:
- How to convert image to byte array [duplicate]
- Convert an image (selected by path) to base64 string
- How to display image which is stored on network drive?
- Upload and display image in MVC application
I hope this will be helpful.
Regards,
Attila Antal
Progress Telerik