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

Upload / Using RadUpload in an Ajaxified Grid does not save or upload

5 Answers 144 Views

Grid

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

OverCoded asked on 19 Aug 2011, 08:39 PM

I have a Ajaxified Grid with an embeded upload ( coppied from the live examples) It is very much the same in that the grid has an image and a description. I am using an SQl database instead of the session db Telerik uses. The grid displays fine but when I attempt to upload a new image nothing is inserted in the database and the grid does not display any new data. This is the same for the edit mode, it does not change the data. The delete and select works fine, Any help would be greate!
Here is my code: The .ascx followed by the .ascx.cs

<telerik:RadCodeBlock ID="RadCodeBlock1" 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;

}

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:RadCodeBlock>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"

ClientEvents-OnRequestStart="conditionalPostback" Width="100%"

EnablePageHeadUpdate="False" HorizontalAlign="NotSet">

<telerik:RadProgressManager ID="RadProgressManager1" runat="server" />

<telerik:RadProgressArea ID="RadProgressArea1" runat="server" Skin="Vista" />

<telerik:RadGrid runat="server" ID="ImgGrid" AllowPaging="True" AllowSorting="True"

AutoGenerateColumns="False" DataMember="DefaultView" ShowStatusBar="True"

GridLines="None" OnItemDataBound="RadGrid1_ItemDataBound" OnItemCreated="RadGrid1_ItemCreated"

PageSize="4" Skin="Vista"

DataSourceID="objImgs">

<PagerStyle Mode="NumericPages" AlwaysVisible="true" />

<MasterTableView CommandItemDisplay="Top" Width="100%" DataKeyNames="ID"

DataSourceID="objImgs" >

<Columns>

<telerik:GridEditCommandColumn ButtonType="ImageButton">

<HeaderStyle Width="3%" />

</telerik:GridEditCommandColumn>

<telerik:GridTemplateColumn DataField="DESCRIPTION"

FilterControlAltText="Filter column column" HeaderText="Description"

UniqueName="column">

<ItemTemplate>

<asp:Label ID="lblDescription" runat="server"

Text='<%# TrimDescription(Eval("DESCRIPTION") as string) %>' />

</ItemTemplate>

<EditItemTemplate>

<telerik:RadTextBox ID="txbDescription" runat="server" Height="150px"

TextMode="MultiLine" Width="370px" Text='<%# Bind("DESCRIPTION") %>'/>

<asp:RequiredFieldValidator ID="Requiredfieldvalidator1" runat="server"

ControlToValidate="txbDescription" Display="Dynamic"

ErrorMessage="Please, enter a description!" SetFocusOnError="true" />

</EditItemTemplate>

<ItemStyle HorizontalAlign="Right" />

</telerik:GridTemplateColumn>

<telerik:GridBinaryImageColumn DataAlternateTextField="DESCRIPTION"

DataAlternateTextFormatString="Image of {0}" DataField="IMG" HeaderText="Image"

ImageAlign="NotSet" ImageHeight="100px" ImageWidth="100px" ResizeMode="Fit"

UniqueName="Upload" >

<HeaderStyle HorizontalAlign="Center" Width="175px" />

<ItemStyle CssClass="binaryImage" />

</telerik:GridBinaryImageColumn>

<telerik:GridClientDeleteColumn HeaderStyle-Width="35px"

ButtonType="ImageButton" CommandName="delete"

FilterControlAltText="Filter delete column" UniqueName="delete" >

<HeaderStyle Width="2%" />

</telerik:GridClientDeleteColumn>

</Columns>

<EditFormSettings>

<EditColumn ButtonType="ImageButton" />

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

<asp:SqlDataSource runat="server" ID="objImgs" ConnectionString="<%$ConnectionStrings:HCRConnectionString %>" ProviderName="System.Data.SqlClient"

SelectCommand="SELECT ID, IMG, DESCRIPTION FROM [IMAGES] WHERE HCR_NUM = @HCR_NUM"

InsertCommand="INSERT INTO IMAGES( IMG, DESCRIPTION, DATA_TYPE, HCR_NUM ) VALUES (@IMG, @DESCRIPTION, @DATA_TYPE, @HCR_NUM)"

UpdateCommand="UPDATE [IMAGES] SET [IMG] = @IMG, [DESCRIPTION] = @DESCRPTION WHERE [Id] = @ID"

DeleteCommand="DELETE FROM [IMAGES] WHERE [ID] = @ID" >

<DeleteParameters>

<asp:Parameter Name="id" Type="Int32" />

</DeleteParameters>

<InsertParameters>

<asp:Parameter Name="DESCRIPTION" Type="String" />

<asp:Parameter Name="IMG" Type="Object" />

<asp:ControlParameter ControlID="HCARNum" Name="HCR_NUM" Type="String" PropertyName="Text" />

<asp:Parameter Name="DATA_TYPE" Type="String" DefaultValue="image/jpeg" />

</InsertParameters>

<SelectParameters>

<asp:ControlParameter ControlID="HCARNum" Name="HCR_NUM" PropertyName="Text"

Type="String" />

</SelectParameters>

<UpdateParameters>

<asp:Parameter Name="DESCRIPTION" Type="String" />

<asp:Parameter Name="IMG" Type="Object" />

<asp:Parameter Name="ID" Type="Int32" />

</UpdateParameters>

</asp:SqlDataSource>

</telerik:RadAjaxPanel>

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item is GridEditableItem && e.Item.IsInEditMode)

{

GridBinaryImageColumnEditor editor = ((GridEditableItem)e.Item).EditManager.GetColumnEditor("Upload") as GridBinaryImageColumnEditor;

RadAjaxPanel1.ResponseScripts.Add(string.Format("window['UploadId'] = '{0}';", editor.RadUploadControl.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);

}

protected string TrimDescription(string description)

{

if (!string.IsNullOrEmpty(description) && description.Length > 200)

{

return string.Concat(description.Substring(0, 200), "...");

}

return description;

}

5 Answers, 1 is accepted

answered on 22 Aug 2011, 10:22 AM

Hi Overcoded,

Please note that forums are community resource and we do not guarantee response for them. You can find more infromation here. So if you have an urgent case and need it to be answered by some of our support officers, you would better post your issue in a formal Support Ticket.

Regarding the issue is questions: I reviewed your code and I can see that you are neither handling the updates and inserts manually, nor enabled the grid automatic operations. Try enabling the automatic operations by setting the AllowAutomaticInserts and AllowAutomaticUpdates properties for the grid to true and see if it makes any difference. You can temporary disable ajax, and after you make sure it works properly without it, you can enable it back.

Kind regards,
Iana
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

answered on 22 Aug 2011, 01:34 PM

Thanks Lana,
I have enabled and disabled automatic upates, inserts etc. it did not make any difference. As I stated, my code was coppied from the Telerik example on the live demos. There is no code handling the insert or update on your example so I assumed it was being handled by the RadGrid within the database connection properties. NO? The select and delete command are working with no handlers. Given the fact that the grid uses an Upload how would I know what those events are in order to handle them? I have added a insert command event handler but that event never fires. I am guessing it is because what I need is a "on button click event" for the upload but I have no idea how to access it.

answered on 22 Aug 2011, 03:43 PM

Hello Overcoded,

Can you specify which demos you used for a starting point?

RadGrid automatic CRUD operations would work properly if the DataSource Control to which the grid is bound is configured for such, as in your case. And if the AllowAutomaticXXX properties are set to true. The ItemCommand/InsertCommand/UpdateCommand should be fired if Update/Insert buttons are clicked.

Greetings,
Iana
the Telerik team