Problem using child user control

[Harlem98]

Hello telerik community!

I'm currently working within a user form which contains a grid. I want to load the Update and Insert operations, and respective forms in another user control. I'm using 3 layer architecture. What am i missing?

<%@ Register Src="~/Views/Projectos/Equipa/ViewEmissaoTimeSheetEdit.ascx" TagPrefix="uc1" TagName="ViewEmissaoTimeSheetEdit" %> //Child reference in parent UC

<%@ Reference Control="~/Views/Projectos/Equipa/ViewEmissaoTimeSheetEdit.ascx" %>

ClassName="EditCommandColumn" //Reference in child User Control

<Telerik:RadGrid AllowAutomaticInserts="true" AllowAutomaticUpdates="true" On>
<Columns>    
                                <telerik:GridEditCommandColumn UniqueName="EditCommandColumn">
                                </telerik:GridEditCommandColumn>
...
          </Columns>
             <EditFormSettings UserControlName="ViewEmissaoTimeSheetEdit.acsx" EditFormType="WebUserControl" >
                 <EditColumn UniqueName="EditCommandColumn1"></EditColumn>
             </EditFormSettings> 
 </MasterTableView> 

Thank you in advance :)

[Attila Antal]

Hi Rúben,

Check out the online demo we have for using WebUserControls as the Edit Form for RadGrid: Edit Form Types.

From the Code Snippets you shared, I can see that you have set both the "UserControlName" and "EditFormType" properties which are the only requirements to use a custom Edit Form. Of course, you will need to make sure the WebUserControl exists and contains Controls that are bound to the Fields you need to edit/update.

Can you describe the issues you are experiencing exactly?

[Harlem98]

Hello Attila!

My problem is that i can have access to the Edit form, having an error "404" by clicking in the automatic Edit button in the grid.

There also another issue that is making me confused, is that i want to use the same form for editing functions, having the accessbutton inside item command.

I tried to manage this through the "item created" and "item command" methods of the grid with any results (ViewEmissaoTimesheets is the UserControl Form)

        protected void gvTimesheets_ItemCreated(object sender, GridItemEventArgs e)
        {
            GridEditableItem item = e.Item as GridEditableItem;
            {
                if (e.Item.OwnerTableView.IsItemInserted)
                {
                    ViewEmissaoTimeSheetEdit GridControl = e.Item.FindControl("GridControl1") as ViewEmissaoTimeSheetEdit;
                }

                if (item != null && e.Item.IsInEditMode && e.Item.ItemIndex != -1)
                {
                    (item.EditManager.GetColumnEditor("ID").ContainerControl.Controls[0] as TextBox).Enabled = false;
                }
            }
        }

             if (e.CommandName == "Edit")
             {
                 GridDataItem item = e.Item as GridDataItem;
                 //Guid ID = new Guid(item.GetDataKeyValue("ID").ToString());
                 Response.Redirect("Views/Projectos/Equipa/ViewEmissaoTimeSheetEdit.ascx?ID=" + ID.ToString());
             }

             if (e.CommandName == "Insert")
             {
                 GridDataItem item = e.Item as GridDataItem;
                 Response.Redirect("Views/Projectos/Equipa/ViewEmissaoTimeSheetEdit.ascx");
             }

 

At the momment, when i press Edit button i get 404 error, and when i press Add new button, nothing happens.

 

[Attila Antal]

Hi Rúben,

First, you will need to provide the full path to the UserControl in the UserControlName property. That is how the Grid will know where the user Control is located.

<EditFormSettings UserControlName="~/Views/Projectos/Equipa/ViewEmissaoTimeSheetEdit.ascx" EditFormType="WebUserControl">

 

Please avoid redirecting the page somewhere else unless you really need to redirect. Remove the Response.Redirect lines from everywhere because this will work against the Grid's editing functionality.

Response.Redirect("Views/Projectos/Equipa/ViewEmissaoTimeSheetEdit.ascx?ID=" + ID.ToString());

 

In regards to accessing the Controls, check out the following articles:

• Updating Values Using UserControl and FormTemplate
• Accessing Values and Controls

If you are not sure how the Object Structure looks like in the event arguments, you can find out yourself using the Debugger, see 6 Server-Side Debugging Tips That Will Make Developing Easier

 

 

[Harlem98]

Hello Attila! Thank you for the usefull documentation advices

Finally, i was able to implement the forms. Unfortunately, still got problems.

It is supposed to be normally filled like the attachment "Intended form.png", which allow normal field writing. But when acessed from the Edit/Insert buttons, it looks like "RealForm.png", with the absence of "RadAsyncUpload", and the datepicker and combobox not working.

I used ItemDatabound and itemCreated events in the parent user control, being the rest of the implementation done in child user control

Do you have any ideia of the problem?

 

 

[Attila Antal]

There are three possible reasons that I suspect. 

Reason 1: The Form controls (TextBox, etc.) do not have the Bind() expressions configured.

<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("DataBaseFieldToBindTo") %>'></asp:TextBox>

 

Reason 2: The Form controls (TextBox, etc.) are not inside the EditItemTemplate or InsertItemTemplate

<telerik:GridTemplateColumn>
    <ItemTemplate>
        <%--This place is for displaying infor using Eval()--%>
        <asp:Label ID="Label1" runat="server" Text='<%# Eval("DataBaseFieldToDisplay") %>'></asp:Label>
    </ItemTemplate>

    <EditItemTemplate>
        <%--This place is for binding the Control's Text/Value with a Database Field--%>
        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("DataBaseFieldToBindTo") %>'></asp:TextBox>
    </EditItemTemplate>
</telerik:GridTemplateColumn>

 

Reason 3: There is a JavaScript error generated on the page that prevents the Grid from rendering the complete form and data.

You can check out the Debug JavaScript section and check if there are errors. Eliminate all JavaScript errors before testing the Grid again.

[Harlem98]

Hello Attila

I still couldn't solve the issue. I' have followed the structure of edit forms demo, differing on the data binding.

The edit template source is in the EditForm side, so its not possible to implement the possible reason number 2, that you pointed out.

Could you please take a look on my related code to see if you catch the real issue. Thank you in advance!

 

[Attachment removed by Telerik]

 

[Attila Antal]

Hi Rúben.

I've attached a Visual Studio sample demonstrating the WebUserControl edit form binding and CRUD operations. Note that this example uses DataTables and Session to store the information for demonstration purposes. But a similar approach will work on databases too.

You can use this example/idea as a base and change it according to your environment.

[Harlem98]

Hi Attila,

You have mistaken and attached my sample above, instead of the one you've just mentioned :)

[Attila Antal]

You were right. Thank you for pointing out it. I've updated the attachment now, check that attachment again.

[Harlem98]

Hello Atilla.

I'm still stucked here, my web form just don't renderize in the grid. I've tried to do it in Page Load in child user form, and in the parent user control with ItemCreated and Item DataBound, but i got neither errors and results. The demo is just not working for my case, i'm working with 2 user controls, instead of a form page, could it be the reason? And to work arround it?

 

protected void gvTimesheets_ItemCreated(object sender, GridItemEventArgs e) //controlar os edits
        {

            if (e.Item is GridEditableItem && e.Item.IsInEditMode)
            {
                GridEditableItem item = (GridEditableItem)e.Item;
                UserControl userControl = (UserControl)e.Item.FindControl(GridEditFormItem.EditFormUserControlID);

                ListagemTimesheet timesheet = new ListagemTimesheet
                {
                    //ID
                    //IDRecursoHumano = int.Parse((userControl.FindControl("rdpInvestigador") as RadTextBox).Text),
                    IDEstadoTimesheet = int.Parse((userControl.FindControl("rcbEstado") as RadComboBox).Text),
                    AssinaturaTimesheet = (userControl.FindControl("txtAssinaturaTimesheet") as RadTextBox).Text,
                    Observações = (userControl.FindControl("Obervaçoestxt") as RadTextBox).Text,
                    DataEnvio = (userControl.FindControl("DataEnvio") as RadDatePicker).SelectedDate.Value,
                    FileContent = Encoding.ASCII.GetBytes((userControl.FindControl("RadAsyncUpload1") as RadAsyncUpload).TargetFolder.ToString()),
                };
            }
        }

protected void gvTimesheets_InsertCommand(object source, GridCommandEventArgs e)
        {

            ViewEmissaoTimeSheetEdit userControl = (ViewEmissaoTimeSheetEdit)e.Item.FindControl(GridEditFormItem.EditFormUserControlID);

              ListagemTimesheet timesheet = new ListagemTimesheet
            {
                IDRecursoHumano = int.Parse((userControl.FindControl("rdpInvestigador") as RadTextBox).Text),
                IDEstadoTimesheet = int.Parse((userControl.FindControl("rcbEstado") as RadComboBox).Text),
                AssinaturaTimesheet = (userControl.FindControl("txtAssinaturaTimesheet") as RadTextBox).Text,
                Observações = (userControl.FindControl("Obervaçoestxt") as RadTextBox).Text,
                DataEnvio = (userControl.FindControl("DataEnvio") as RadDatePicker).SelectedDate.Value,
                FileContent = Encoding.ASCII.GetBytes((userControl.FindControl("RadAsyncUpload1") as RadAsyncUpload).TargetFolder.ToString()),
            };

                      try
            {
                                listagembll.SaveFile(timesheet);
            }
            catch (Exception ex)
            {
                e.Canceled = true;
            }
        }

//View

<!-- other code -->

 <CommandItemTemplate>
                                     <telerik:RadButton  IsinEditmode="true" RenderMode="Lightweight" ID="AddNewRecordButton" Text="Adicionar nova versão" ToolTip="Adicionar versão" NavigateUrl="./ViewEmissaoTimeSheetEdit.ascx"
                                          runat="server" style="background:none; border:none; color:green;">
                                         <Icon PrimaryIconCssClass="rbAdd"></Icon>
                                     </telerik:RadButton>
             </CommandItemTemplate>

[Attila Antal]

Hi Rúben,

I feel like the problem is rather related to the custom solution you have and I won't be able to help unless I can run and debug the solution on my machine. Please modify my Visual Studio to replicate the issue and send it back to me. 

Note: The solution must be runnable and must demonstrate the problem for me to be able to debug. 

[Harlem98]

I added to your sample. You can check "Views" for the relevant classes. The insert and update methods are located in "BLLListagemTimesheets". Thank you!

 

[Attachment removed by Telerik]

[Harlem98]

Or if the first sample don't work, please try this one.

 

[Attachment removed by Telerik]

[Attila Antal]

I am sorry but I was unable to run either of the projects. There are some assemblies that you have not included and the page generates a bunch of errors. Without a running sample I am unable to debug the problem.

[Harlem98]

Hello Attila, i'm sorry for my problems, the app is already in production and protected, that is hy i'm not being able to share a sample.

Please try this one.

And i have another question... should i use rad form decorator in user controls? or its web form limited?

EDITED

 

[Attachment removed by Telerik]

[Attila Antal]

Hi Ruben. Thanks for sharing more details. Unfortunately, there are still errors that prevent me from running the sample.

I suggest you Isolate the issue into a small sample where only the affected files/references are needed and the project runs. YOu can follow the instructions in the Isolating a Problem in a Sample Project

For safety reasons, I have removed all previous attachments from your Forum posts.

Once I have a runnable sample, I can debug the problem.

 

 

[Harlem98]

Thank you very much for the effort Attila, unfortunately, i carefully tried to make different samples, and there are always assemblie missing, so i am not being able to create a functional file, if this last one don't work in your machine.

Nevertheless your information was usefull as i met Fiddler Jam, so i am sending you a recording, maybe you can catch something Reccording...

My problem is accessing the Web User Control. I have tried other solutions like changing my ASP.NET markup, or just using EditFormTemplate instead, with the exact same results.

For this reason, my "dummy" guess it is that is Ajax related, because i am using two user controls, and not the default.aspx page, as in all the demos and topics available. What do you think?

Otherwise, seeing what am i trying to do, do you have any ideas of a different implementation i could follow for the CRUD functionallity?

[Attila Antal]

Ruben,

Turn the AJAX off by commenting out any RadAjaxPanel, RadAjaxManager and asp:UpdatePanel on the Page. Once done test the application again. That will give you the exact problem your project is suffering from.

It is very important that you always develop and test the application without AJAX. Only turn it on if you are certain that the app works properly. If you do not, then all server-side errors will be hidden and you would be hitting the wall all day, week, or month.

If you turn it on, make sure that you enable it properly, see Understanding AJAX Controls

[Harlem98]

Just to inform that the pronblem was in fact in AJAX controls. I had to rebuild the entire application avoiding the usage of ajax, and i was able to finnaly load the user control. The usage of two Usercontrols mixed up the ajax controls.