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

RadGrid-EditItemTemplate

12 Answers 532 Views

Grid

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

Ravi Tejas asked on 25 Mar 2010, 07:42 PM

Hi All,

As per my requirement, I need the Edit mode to be 'In place' for a radgrid where the columns are added dynamically to the grid and the binding data to grid is also dynamic

In this ,most peculiar requirement is adding the controls dynamically based on the datatype of a field.

forexample:
suppose i need to add a combobox or dropdownlist for a particular datatypeId in the datatype table
Inorder to have a dropdown , i need to go for dropdown template column..
In the normal mode i need to see it in the form of a norma text or the Label template.But on edit(In edit mode) it should be a Dropdown column

For this.. i tried the below code:

//Code used to add the template column.

GridTemplateColumn column1 = new GridTemplateColumn();
gridPreview.MasterTableView.Columns.Add(column1);
column1.DataFeild = "CreatedBy";
column1.ItemTempalte = new CreateTemplateLabel("templataName","templateText");
column1.HeaderText = "CreatedBy";
column1.HeaderStyle.HorizontalAlign = HorizontalAlign.Left;
column1.EditItemTemplate = new CreateRadComboTemplate("templateName");

//code for template creations

public class CreateTemplateLabel:ITemplate
{
   private string tempName;
   private string tempText;

   Public CreateTemplateLabel(string templateName,string templateText)
   {
        tempName = templateName;
        tempText = templateText;
   }

   public void InstantiateIn(System.Web.UI.Control container)
      {
          Label lbl = new Label();
         lbl.Text=tempText;
       lbl.ID = tempName;
         lbl.CssClass ="Label";
       lbl.Width = 150;
       container.Controls.Add(lbl);
      }
}

public class CreateRadComboTemplate:ITemplate
{
   private string tempName;

   Public CreateRadComboTemplate(string templateName)
   {
            tempName = templateName;
   }

   public void InstantiateIn(System.Web.UI.Control container)
      {
          RadComboBox rcBox = new RadComboBox ();
        rcBox.ID="tempName";
        for(int i=0;i<2;i++)
        {
            RadComboBoxItem rcbItem = new RadComboBoxItem();
            rcbItem.Text= "Text"+i;
            rcbItem.Value = i;
            rcBox.Items.Add(rcbItem);
        }
        rcBox.Width = 150;
        container.Controls.Add(rcBox);
      }
}

Suggest me whether the code written above is correct or not?
But using this , i am not able to view the RadComboBox in the editmode.I mean to say it is not created in the edit mode... I am able to get the reason why it is like...... Am i missing something in the code... ?

So,As i am not able to have the RadComboBox in the edit mode... i implemented the WindowEditing Concept that is there in the Grid Demo Examples...

Using this i acheived it but it is not the InPlace Edit mode(my requirement is InPlace Edit Mode)
Here also i am facing one Probelm ,and the problem is ,
I am Using a RadDatePicker inside a Page which is opened through a RadWindow.....
While the page is opened ,it is thowing an Exception ' Missing : '
I am not able to get the reason for this and even i am not able to debugg the exception also.

Please i need a solution for the both queries asap

Thanks in Advance,
Chaitanya.E
chaitany.elluru@cosmonetsolutions.com

12 Answers, 1 is accepted

answered on 06 Apr 2010, 08:10 AM

Hello Ravi,

Based on the supplied information, I suspect that there is a problem with the way the control structure is generated, and/or the way it is databound. However, in order to properly look into this, it will be best if you open a formal support ticket, and send us a small working project, demonstrating the issue. We will debug it locally, and get back to you with more information on the matter.

Kind regards,
Yavor
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 14 Apr 2010, 05:28 AM

Hi Yavor,

I tried to open a ticket,but i did'nt see a option to open a ticket in the support ticket package,previously i has that option but i dont know suddenly why it is disabled,even though we are had a developers product.

However i had develpoed a sample project but not able to send it.
I will attach the source code and the codebind class..please do a sample on that and reply me asap.

RDInlineEdit.aspx

html xmlns="http://www.w3.org/1999/xhtml">

head runat="server">

head>

body>

<div>

<asp:Button ID="Button1" runat="server" Text="Load" OnClick="Button1_Click" />

</div>

<br />

<div>

<telerik:RadGrid ID="rgPreview" OnNeedDataSource="rgPreview_NeedDataSource" AutoGenerateColumns="false"

Skin="Office2007" runat="server" OnItemCommand="rgPreview_ItemCommand">

<telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Edit" ImageUrl="~/Images/Edit.gif">

</telerik:GridButtonColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

</div>

</form>

body>

html>

Code in codebehind class
RDInlineEdit.aspx.cs

using

System;

using

System.Collections.Generic;

using

System.Linq;

using

System.Web;

using

System.Web.UI;

using

System.Web.UI.WebControls;

using

Telerik.Web.UI;

using

System.Data;

namespace

SampleUpload

{

public partial class RDInlineEdit : System.Web.UI.Page

{

List<Item> lstItems = new List<Item>();

protected void Page_Load(object sender, EventArgs e)

{

GetItems();

}

protected void rgPreview_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

AddColumnstoGrid();

DataTable dt = BindDataToGrid();

rgPreview.DataSource = dt;

}

protected void Button1_Click(object sender, EventArgs e)

{

//AddColumnstoGrid();

//DataTable dt = BindDataToGrid();

//rgPreview.DataSource = dt;

//rgPreview.DataBind();

}

protected void rgPreview_ItemCommand(object sender, GridCommandEventArgs e)

{

if (e.CommandName == "Edit")

{

//I need to see the RadComboBox's for the columns ModuleName and the Department.

}

public DataTable BindDataToGrid()

{

DataTable dt = new DataTable("Info");

dt.Columns.Add(

"Name");

dt.Columns.Add(

"Acutal start Date");

dt.Columns.Add(

"Actual Closed Date");

dt.Columns.Add(

"ActualHours");

dt.Columns.Add(

"ModuleName");

dt.Columns.Add(

"Department");

for (int i = 0; i < 5; i++)

{

DataRow dRow = dt.NewRow();

dRow[

"Name"] = "Name" + i;

dRow[

"Acutal start Date"] = DateTime.Now;

dRow[

"Actual Closed Date"] = DateTime.Now.AddDays(i);

dRow[

"ActualHours"] = DateTime.Now.Hour + i;

dRow[

"ModuleName"] = "ModuleName" + i;

dRow[

"Department"] = "Department" + i;

dt.Rows.Add(dRow);

}

return dt;

}

public void AddColumnstoGrid()

{

if (rgPreview.MasterTableView.Columns.Count == 1)

{

if (lstItems.Count == 0)

{

GetItems();

}

foreach (Item item in lstItems)

{

switch (item.ItemType)

{

case "string":

if (item.ItemName == "ModuleName" || item.ItemName == "Department")

{

GridTemplateColumn column1 = new GridTemplateColumn();

rgPreview.MasterTableView.Columns.Add(column1);

column1.DataField = item.ItemName;

column1.EditItemTemplate =

new CreateTemplateLabel("templateName", item.ItemName, "Edit");

column1.ItemTemplate =

new CreateTemplateLabel("templateName", item.ItemName, "Add");

column1.HeaderText = item.ItemName;

column1.HeaderStyle.HorizontalAlign =

HorizontalAlign.Left;

//column1.EditItemTemplate = new CreateRadComboTemplate("templateName");

}

else

{

GridBoundColumn boundColumn1 = new GridBoundColumn();

rgPreview.MasterTableView.Columns.Add(boundColumn1);

boundColumn1.UniqueName = item.ItemName;

boundColumn1.DataField = item.ItemName;

boundColumn1.HeaderText = item.ItemName;

boundColumn1.HeaderStyle.Width = item.ItemName.Length * 5;

boundColumn1.HeaderStyle.Wrap =

false;

boundColumn1.HeaderStyle.Height = 25;

}

break;

case "int": GridBoundColumn boundColumn2 = new GridBoundColumn();

rgPreview.MasterTableView.Columns.Add(boundColumn2);

boundColumn2.UniqueName = item.ItemName;

boundColumn2.DataField = item.ItemName;

boundColumn2.HeaderText = item.ItemName;

boundColumn2.HeaderStyle.Width = item.ItemName.Length * 5;

boundColumn2.HeaderStyle.Wrap =

false;

boundColumn2.HeaderStyle.Height = 25;

break;

case "date": GridBoundColumn boundColumn4 = new GridBoundColumn();

rgPreview.MasterTableView.Columns.Add(boundColumn4);

boundColumn4.UniqueName = item.ItemName;

boundColumn4.DataField = item.ItemName;

boundColumn4.HeaderText = item.ItemName;

boundColumn4.HeaderStyle.Width = item.ItemName.Length * 5;

boundColumn4.HeaderStyle.Wrap =

false;

boundColumn4.HeaderStyle.Height = 25;

break;

case "decimal": GridBoundColumn boundColumn3 = new GridBoundColumn();

rgPreview.MasterTableView.Columns.Add(boundColumn3);

boundColumn3.UniqueName = item.ItemName;

boundColumn3.DataField = item.ItemName;

boundColumn3.HeaderText = item.ItemName;

boundColumn3.HeaderStyle.Width = item.ItemName.Length * 5;

boundColumn3.HeaderStyle.Wrap =

false;

boundColumn3.HeaderStyle.Height = 25;

break;

}

//code for template creations

public void GetItems()

{

Item item1 = new Item();

item1.ItemName =

"Name";

item1.ItemType =

"string";

lstItems.Add(item1);

Item item2 = new Item();

item2.ItemName =

"Acutal start Date";

item2.ItemType =

"date";

lstItems.Add(item2);

Item item3 = new Item();

item3.ItemName =

"Actual Closed Date";

item3.ItemType =

"date";

lstItems.Add(item3);

Item item4 = new Item();

item4.ItemName =

"ActualHours";

item4.ItemType =

"decimal";

lstItems.Add(item4);

Item item5 = new Item();

item5.ItemName =

"ModuleName";

item5.ItemType =

"string";

lstItems.Add(item5);

Item item6 = new Item();

item6.ItemName =

"Department";

item6.ItemType =

"string";

lstItems.Add(item6);

}

public struct Item

{

public string ItemName;

public string ItemType;

}

public class CreateTemplateLabel : ITemplate

{

private string tempName;

private string tempText;

private string itemType;

public CreateTemplateLabel(string templateName, string templateText, string ItemType)

{

tempName = templateName;

tempText = templateText;

itemType = ItemType;

}

public void InstantiateIn(System.Web.UI.Control container)

{

if (itemType == "Add")

{

Label lbl = new Label();

lbl.Text = tempText;

lbl.ID = tempName;

lbl.CssClass =

"Label";

lbl.Width = 150;

container.Controls.Add(lbl);

}

else

{

RadComboBox rcBox = new RadComboBox();

rcBox.ID =

"tempName";

for (int i = 0; i < 2; i++)

{

RadComboBoxItem rcbItem = new RadComboBoxItem();

rcbItem.Text =

"Text" + i;

rcbItem.Value = i.ToString();

rcBox.Items.Add(rcbItem);

}

rcBox.Width = 150;

container.Controls.Add(rcBox);

}

public class CreateRadComboTemplate : ITemplate

{

private string tempName;

public CreateRadComboTemplate(string templateName)

{

tempName = templateName;

}

public void InstantiateIn(System.Web.UI.Control container)

{

RadComboBox rcBox = new RadComboBox();

rcBox.ID =

"tempName";

for (int i = 0; i < 2; i++)

{

RadComboBoxItem rcbItem = new RadComboBoxItem();

rcbItem.Text =

"Text" + i;

rcbItem.Value = i.ToString();

rcBox.Items.Add(rcbItem);

}

rcBox.Width = 150;

container.Controls.Add(rcBox);

}

In this example i implemented only for the radcombobox ,where i need to it for 'data' data type also.
Thanks in advance,

answered on 16 Apr 2010, 12:27 PM

Hello Ravi,

I have reviewed your code and I assume that the cause of the issue is the creation of the template columns.
When adding template columns dynamically, you should create the grid entirely in the code-behind in the Page_Init event handler. Column templates must be added in the same event handler as well, so that the template controls can be added to the ViewState.

For additional information, please take a look at the Programmatic creation help topic.

Sincerely yours,
Yavor
the Telerik team

answered on 19 Apr 2010, 07:14 AM

Hi Yavor,

Thanks for the Quick response,

As per the reply i Implemented it in the Page_Init event,I found some of the following problems.

Please review the entire thing in detail and get back to me with a possible solution

1. The editable templates throws exception if the editmode of radgrid is set to Inplace.
2. If i add the RadDatePicker as EditTemplatecolumn and if i give the id for that control,it is throwing a Javascrirpt error as
'Missing character : ;'
the following is the code implemented for raddatepicker.
public class CreateRadDatePickerTemplate : ITemplate
{
private string tempName;

        public CreateRadDatePickerTemplate(string templateName)
        {
            tempName = templateName;
        }

        public void InstantiateIn(System.Web.UI.Control container)
        {
            RadDatePicker rdPicker = new RadDatePicker();
            rdPicker.ID = tempName;
            rdPicker.Width = 150;
            container.Controls.Add(rdPicker);
        }
    }

3. Our module scenario is 'Importing data from a excel file(which can contain more than 1000 records) in to a table',which will be done in three steps,for this we had used radpanelbar,panelitem as each step.
a.)In the first step ,we will be uploading a file using radupload control,
b.)In the second step,if the column names in the excel sheet are same as field names of the table then gotonext step else mapping fields and then gotonextstep.
c.)In the third step, we will be showing the column names and the related datarows in the radrid where we exactly needs the inPlace edit,with the columns added dynamically.

How do we over come all these issues.as per your reply it works fine,at one shot(I mean to say adding columns dynamically to the radgrid directly)

Please give me some suggestions or the solution to overcome these issues asap.

Thanks once again for the quick response.

Thanks in advance:
Chaitanya.E