Hello. I'm trying to get a simple RadGrid to work, but am not having any luck. Support (for which I paid extra) is only giving my cryptic responses and seems unwilling to make a few lines' adjustments to my code to show me how to get started using the grid.
Attached is my RadGrig page. I want to have a drop-down box during edit mode for the "category" field. The two tables are:
TbGilFloProItem (item)
gf__id int Unchecked
gf__name varchar(100)
gf__category int
gf__image_name varchar(50)
and
TbGilFloProCat (cat)
id inttitle nvarchar(50)
The cat.id should be the value for item.category, but cat.title should be what's seen in non-edit mode (non-combobox) and in drop-down during edit.
The item.image is an "upload" during edit mode. The image is uploading fine and my code is scaling and creating a thumbnail fine. But... neither the CATEGORY nor IMAGE NAME is getting updated.
Can someone please look at the ASPX and CS code and put in some working sample code to get me started? I've gone through the suggestions for support, but have had no luck.
Any assistance would be greatly appreciated!
ASPX page...
<%
@ Page Title="" Language="C#" MasterPageFile="~/Masters/Site.Master" AutoEventWireup="True" CodeBehind="EditGalleryItem.aspx.cs" Inherits="MyProject.EditGalleryItem" %>
<%
@ Register assembly="Telerik.OpenAccess, Version=2009.1.405.1, Culture=neutral, PublicKeyToken=7ce17eeaf1d59342" namespace="Telerik.OpenAccess" tagprefix="telerik" %>
<%
@ Register assembly="Telerik.Web.UI, Version=2009.1.402.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<
asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript" src="../javascript/prototype.js"></script>
<
script type="text/javascript" src="../javascript/scriptaculous.js?load=effects,builder"></script>
<
script type="text/javascript" src="../javascript/lightbox.js"></script>
<
link rel="stylesheet" href="../css/lightbox.css" type="text/css" media="screen" />
<
style type="text/css">
.MyImageButton
{
cursor: hand;
}
.EditFormHeader td
{
font-size: 14px;
padding: 4px !important;
color: #0066cc;
}
.RadGrid .rgEditForm .RadComboBox
{
width:100px !important;
}
</style>
</
asp:Content>
<
asp:Content ID="Content3" runat="server"
contentplaceholderid="ContentPlaceHolder_sidebar">
</
asp:Content>
<
asp:Content ID="Content4" runat="server"
contentplaceholderid="ContentPlaceHolder_content">
<div class="content_1col">
<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(e, sender) {
var theRegexp = new RegExp("\.UpdateButton$|\.PerformInsertButton$", "ig");
if (sender.EventTarget.match(theRegexp)) {
var upload = $find(window['UploadId']);
//AJAX is disabled only if file is selected for upload
if (upload.getFileInputs()[0].value != "") {
sender.EnableAjax =
false;
}
}
}
</script>
</telerik:radscriptblock>
<asp:HiddenField ID="ComboValue" runat="server" />
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"
ClientEvents-OnRequestStart="conditionalPostback" Width="700px">
<telerik:RadProgressManager ID="RadProgressManager1" runat="server" />
<telerik:RadProgressArea ID="RadProgressArea1" runat="server">
</telerik:RadProgressArea>
<telerik:RadGrid ID="RadGrid1" runat="server" AllowAutomaticDeletes="True" AllowAutomaticInserts="True"
AllowAutomaticUpdates="True" AllowPaging="True" AllowSorting="True"
DataSourceID="OpenAccessDataSource1" GridLines="None" OnItemDataBound="RadGrid1_ItemDataBound"
AutoGenerateColumns="False" OnUpdateCommand="RadGrid1_UpdateCommand"
OnInsertCommand="RadGrid1_InsertCommand" Width="750px" height="450px" >
<mastertableview editmode="PopUp" datakeynames="GfId" datasourceid="OpenAccessDataSource1">
<Columns>
<telerik:GridEditCommandColumn>
</telerik:GridEditCommandColumn>
<telerik:GridTemplateColumn HeaderText="Name" UniqueName="ImageName" SortExpression="GfName">
<ItemTemplate>
<asp:Label runat="server" ID="lblName" Text='<%# Eval("GfName") %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox runat="server" ID="txbName" Text='<%# Bind("GfName") %>' />
<asp:RequiredFieldValidator ID="Requiredfieldvalidator1" runat="server" ControlToValidate="txbName"
ErrorMessage="Name is required" Display="Dynamic" SetFocusOnError="true">
</asp:RequiredFieldValidator>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="Category" UniqueName="Category"
DataField="GfCategory" Visible="True">
<ItemTemplate>
<asp:Label runat="server" ID="labName">
<%
# DataBinder.Eval(Container.DataItem, "GfCategory")%>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<telerik:RadComboBox ID="RadComboBox1" Runat="server"
DataSourceID="OpenAccessDataSource2" DataTextField="Title" DataValueField="Id"
Skin="Hay">
</telerik:RadComboBox>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="Image" UniqueName="Upload">
<ItemTemplate>
<a href="../images/gallery/scaled/<%# Eval("GfImageName") %>" rel="lightbox" title="<%# Eval("GfName") %>">
<
asp:Image runat="server" ID="ImageThumbnail" AlternateText='<%# Eval("GfName") %>'
ImageUrl
='<%# "~/images/gallery/thumb/" + Eval("GfImageName")%>' Style="border-width: 0px;" />
</a>
</ItemTemplate>
<EditItemTemplate>
<telerik:RadUpload ID="RadUpload1" Runat="server" InputSize="20"
MaxFileInputsCount="1" Skin="Forest"
TargetFolder="~/images/uploads" AllowedFileExtensions=".jpg,.gif,.png"
InitialFileInputsCount="14"
ControlObjectsVisibility="None">
</telerik:RadUpload>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridButtonColumn HeaderText="Delete" Text="Delete" CommandName="Delete"
UniqueName="column">
</telerik:GridButtonColumn>
</Columns>
<EditFormSettings>
<EditColumn UniqueName="EditCommandColumn1">
</EditColumn>
</EditFormSettings>
<ExpandCollapseColumn>
<HeaderStyle Width="20px" />
</ExpandCollapseColumn>
<RowIndicatorColumn>
<HeaderStyle Width="20px" />
</RowIndicatorColumn></mastertableview>
<clientsettings>
<scrolling allowscroll="True" usestaticheaders="True" />
</clientsettings>
</telerik:RadGrid>
</telerik:RadAjaxPanel>
<telerik:openaccessdatasource ID="OpenAccessDataSource1" runat="server"
EnableDelete="True" EnableInsert="True" EnableUpdate="True"
ObjectContextProvider="MyProject.ObjectScopeProvider1, GillespiesFlowers"
TypeName="PersistentClasses.TbGilFloProItem" Where="" ContextTypeName="" OrderBy="">
</telerik:openaccessdatasource>
<telerik:openaccessdatasource ID="OpenAccessDataSource2" runat="server"
EnableDelete="True" EnableInsert="True" EnableUpdate="True"
ObjectContextProvider="MyProject.ObjectScopeProvider1, GillespiesFlowers"
TypeName="PersistentClasses.TbGilFloProCat" Where="">
</telerik:openaccessdatasource>
</div>
</
asp:Content>
CS page...
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.IO;
using
System.Drawing;
using
Telerik.Web.UI;
namespace
MyProject {
public partial class EditGalleryItem : BasePage {
//protected void Page_Load(object sender, EventArgs e) {
// base.Page_Load(sender, e);
//}
protected void RadGrid1_UpdateCommand(object source, GridCommandEventArgs e) {
InitializeUpdateParameter((RadUpload)e.Item.FindControl(
"RadUpload1"));
}
protected void RadGrid1_InsertCommand(object source, GridCommandEventArgs e) {
InitializeUpdateParameter((RadUpload)e.Item.FindControl(
"RadUpload1"));
}
private void InitializeUpdateParameter(RadUpload currentUpload) {
string pathFull = Server.MapPath("~/images/gallery/full/");
string pathScaled = Server.MapPath("~/images/gallery/scaled/");
string pathThumb = Server.MapPath("~/images/gallery/thumb/");
if (currentUpload.UploadedFiles.Count > 0) {
foreach (UploadedFile validFile in currentUpload.UploadedFiles) {
//string targetFolder = Server.MapPath("~/images/uploads");
// Read uploaded file stream, scale and save
//string[] fileNameArray = GetFileNameArray(validFile.GetName());
//string filenameOnly = fileNameArray[0];
//string extensionOnly = fileNameArray[1];
string filename = validFile.GetName();
// Save uploaded file (full size)
validFile.SaveAs(
Path.Combine(pathFull, filename), true);
// Save thumbnail
Bitmap thumbImage = Globals.ResizeBitmap(
new Bitmap(validFile.InputStream), 75, 100);
thumbImage.Save(
Path.Combine(pathThumb, filename));
// Save scaled image
Bitmap scaledImage = Globals.ProportionallyResizeBitmap(
new Bitmap(validFile.InputStream), 750, 575);
scaledImage.Save(
Path.Combine(pathScaled, filename));
// Delete original full-size uploaded file
//File.Delete(Path.Combine(targetFolder, validFile.GetName()));
}
//if (currentUpload.UploadedFiles.Count > 0) {
// byte[] data = new byte[currentUpload.UploadedFiles[0].ContentLength];
// currentUpload.UploadedFiles[0].InputStream.Read(data, 0, data.Length);
// Session["DataCS"] = data;
//
}
}
protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e) {
if (e.Item is GridEditableItem && e.Item.IsInEditMode) {
RadComboBox control = ((Telerik.Web.UI.GridEditableItem)(e.Item))[
"Category"].FindControl("RadComboBox1") as RadComboBox;
string selectedValue = Convert.ToString(DataBinder.Eval(e.Item.DataItem, "GfCategory"));
control.SelectedValue = selectedValue;
//here should be the ID.
RadUpload upload = (RadUpload)e.Item.FindControl(
"RadUpload1");
RadAjaxPanel1.ResponseScripts.Add(
string.Format("window['UploadId'] = '{0}';", upload.ClientID));
}
}
}
}
1 Answer, 1 is accepted
I have already answered you in the support ticket opened on this matter. Here is a quote of the answer:
Hello Mark,
Thank you for getting back to us and excuse me that I did not provide up-to-the-point solution.
I have attached a sample project which implements the required functionality. Please have in mind that the OpenAccess uses create objects which instead of containing the foreign keys, contains the whole related object. Thus means that you cannot use automatic updates/insert in your scenario. The attached project uses the OpenAccess API to update the item in the grid.
I hope that you will not have any problems to run the project. The data base is in the App_Data folder.
Please examine the attached test project and let me know if I am missing something.
If you do not mind we will continue the communication in the started support thread on this issue in order to avoid duplicate discussions. In this way you will be in touch how the resolution of the problem goes.
Best regards,
Georgi Krustev
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.