This is a migrated thread and some comments may be shown as answers.

[Solved] binary image grid

1 Answer 331 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Ingo Dignas asked on 07 Jul 2009, 08:34 AM

Hi,

I like to have a grid, which displays pictures like in your examples. in my testsite I have a small data table which contains the binary image and the name of the image. But for some reason the grid doesn't get bind properly. It shows no records, but the database contains three records. No matter if I create a dataset or use my openaccess datasource. I've changed some things in the code but the most code point to your examples:

http://demos.telerik.com/aspnet-ajax/grid/examples/programming/listview/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/controls/examples/integration/raduploadinajaxifiedgrid/defaultcs.aspx?product=binaryimage

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test1.aspx.cs" Inherits="ProtelShop.Admin.test1" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <%@ Register assembly="Telerik.OpenAccess, Version=2009.1.405.1, Culture=neutral, PublicKeyToken=7ce17eeaf1d59342" namespace="Telerik.OpenAccess" tagprefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server">  
        
                <title></title>  
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                 <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
        
                    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
        
                        <AjaxSettings> 
        
                            <telerik:AjaxSetting AjaxControlID="RadGrid1">  
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                        </AjaxSettings> 
        
                    </telerik:RadAjaxManager> 
        
                    <telerik:radscriptblock id="RadScriptBlock1" runat="server">  
        
                        <script type="text/javascript">  
        
                        //On insert and update buttons click temporarily disables ajax to perform upload actions  
        
                        function conditionalPostback(sender, args)  
        
                        {  
        
                            var theRegexp = new RegExp("\.UpdateButton$|\.PerformInsertButton$", "ig");  
        
                            if (args.get_eventTarget().match(theRegexp))  
        
                            {  
        
                                var upload = $find(window['UploadId']);  
        
                                //AJAX is disabled only if file is selected for upload  
        
                                if(upload.getFileInputs()[0].value != "")  
        
                                {  
        
                                    args.set_enableAjax(false);  
        
                                }  
        
                             }  
        
                         }  
        
                         function validateRadUpload(source, e) {  
        
                             e.IsValid = false;  
        
                             var upload = $find(source.parentNode.getElementsByTagName('div')[0].id);  
        
                             var inputs = upload.getFileInputs();  
        
                             for (var i = 0; i < inputs.length; i++) {  
        
                                 //check for empty string or invalid extension  
        
                                 if (inputs[i].value != "" && upload.isExtensionValid(inputs[i].value)) {  
        
                                     e.IsValid = true;  
        
                                     break;  
        
                                 }  
        
                             }  
        
                         }  
        
                        </script> 
        
                    </telerik:radscriptblock> 
        
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" clientevents-onrequeststart="conditionalPostback">  
        
                <telerik:radprogressmanager id="RadProgressManager1" runat="server"/>  
        
            <telerik:radgrid runat="server" id="RadGrid1" onitemdatabound="RadGrid1_ItemDataBound" GridLines="None" AllowPaging="true" AllowSorting="true" OnPreRender="RadGrid1_PreRender" 
        
                        PageSize="6">  
        
                         <PagerStyle Mode="NextPrevAndNumeric" /> 
        
             <mastertableview  DataKeyNames="ShopImageID">  
        
              <columns> 
        
               <telerik:gridtemplatecolumn uniquename="Upload">  
        
                <itemtemplate> 
        
                 <%# (((GridItem)Container).ItemIndex != 0)? "</td></tr></table>" : "" %> 
        
                                <asp:Panel ID="ItemContainer" CssClass='<%# (((GridItem)Container).ItemType == GridItemType.Item)? "item" : "alternatingItem" %>' 
        
                                    runat="server">  
        
                                    <telerik:RadBinaryImage runat="server" ID="test" DataValue='<%# Eval("Image")%>' /> 
        
                                </asp:Panel> 
        
                </itemtemplate> 
        
                <edititemtemplate> 
        
                 <telerik:radupload id="RadUpload1" runat="server" /> 
        
                </edititemtemplate> 
        
               </telerik:gridtemplatecolumn> 
        
               </columns> 
        
               <editformsettings> 
        
                 <editcolumn uniquename="EditCommandColumn1"></editcolumn> 
        
               </editformsettings> 
        
               </mastertableview> 
        
            </telerik:radgrid> 
        
            </telerik:RadAjaxPanel> 
        
                    <telerik:OpenAccessDataSource ID="OpenAccessDataSource1" runat="server"   
        
                        ContextTypeName="" EnableDelete="True" EnableInsert="True" EnableUpdate="True"   
        
                        ObjectContextProvider="ProtelAccess.ObjectScopeProvider1, ProtelAccess"   
        
                         TypeName="ProtelAccess.ShopImage" > 
        
                    </telerik:OpenAccessDataSource> 
        
                </form> 
        
            </body> 
        
            </html>

    
            using System;  
        
            using System.Collections.Generic;  
        
            using System.Linq;  
        
            using System.Web;  
        
            using System.Web.UI;  
        
            using System.Web.UI.WebControls;  
        
            using Telerik.OpenAccess;  
        
            using Telerik.OpenAccess.Query;  
        
            using Telerik.Web.UI;  
        
            using ProtelAccess;  
        
            using ProtelShop;  
        
            using Telerik.Charting;  
        
            using System.Data;  
        
            using System.Drawing;  
        
            using System.IO;  
        
            using System.Drawing.Imaging;  
        
            namespace ProtelShop.Admin  
        
            {  
        
                public partial class test1 : System.Web.UI.Page  
        
                {  
        
                    protected void Page_Load(object sender, EventArgs e)  
        
                    {  
        
                        RadGrid1.DataSourceID= "OpenAccessDataSource1";  
        
                        RadGrid1.DataBind();  
        
                    }  
        
                    protected void RadGrid1_PreRender(object sender, EventArgs e)  
        
                    {  
        
                        int itemCount = (sender as RadGrid).MasterTableView.GetItems(GridItemType.Item).Length + (sender as RadGrid).MasterTableView.GetItems(GridItemType.AlternatingItem).Length;  
        
                        foreach (GridItem item in (sender as RadGrid).Items)  
        
                        {  
        
                            if (item is GridDataItem && item.ItemIndex < itemCount - 1)  
        
                            {  
        
                                ((item as GridDataItem)["shopImageID"] as TableCell).Controls.Add(new LiteralControl("<table style='display:none;'><tr><td>"));  
        
                            }  
        
                        }  
        
                    }  
        
                    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)  
        
                    {  
        
                        if (e.Item is GridEditableItem && e.Item.IsInEditMode)  
        
                        {  
        
                            RadUpload upload = e.Item.FindControl("RadUpload1") as RadUpload;  
        
                            RadAjaxPanel1.ResponseScripts.Add(string.Format("window['UploadId'] = '{0}';", upload.ClientID));  
        
                        }  
        
                    }  
        
                    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)  
        
                    {  
        
                        if (e.Item is GridEditableItem && e.Item.IsInEditMode)  
        
                        {  
        
                            GridBinaryImageColumnEditor editor = ((GridEditableItem)e.Item).EditManager.GetColumnEditor("Upload") as GridBinaryImageColumnEditor;  
        
                            TableCell cell = (TableCell)editor.RadUploadControl.Parent;  
        
                            CustomValidator validator = new CustomValidator();  
        
                            validator.ErrorMessage = "Please select file to be uploaded";  
        
                            validator.ClientValidationFunction = "validateRadUpload";  
        
                            validator.Display = ValidatorDisplay.Dynamic;  
        
                            cell.Controls.Add(validator);  
        
                        }  
        
                    }  
        
                }  
        
            }

thanks

1 Answer, 1 is accepted

answered on 10 Jul 2009, 11:13 AM

radcontrolsaspnetajax-openaccess-net3.zip

Hello Joerg,

I tried to replicate the issue using the latest Q2 2009 versions of RadControls for ASP.NET AJAX and OpenAccess ORM and supplying the data for the RadBinaryImage inside the template column's item template from the Telerik sample database (Images table). Unfortunately my attempts were not successful (see the enclosed project). The data from the Data column (of type binary array) in the source was displayed as expected.

Can you please outline the differences between your case and this presented in the example? They can lead us to the source of the erratic behavior to address it accordingly.

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.