Add new record to Telerik RadGrid

Question

I have the following Telerik RadGrid, which I'm using in C#:

<MasterTableView Width="100%" EditMode= "InPlace" ClientDataKeyNames="menuID" CommandItemDisplay= "Top">
    <Columns>
        <telerik:GridBoundColumn DataField="Name" HeaderText="Name" SortExpression="Name" UniqueName="Name"></telerik:GridBoundColumn>
        <telerik:GridTemplateColumn UniqueName="Type" HeaderText="Type">
            <ItemTemplate>
                <asp:TextBox ID="Type" Text='<%# DataBinder.Eval(Container.DataItem, "Type") %>' runat="server"></asp:TextBox>
            </ItemTemplate>
            <EditItemTemplate>
            </EditItemTemplate>
        </telerik:GridTemplateColumn>
        <telerik:GridTemplateColumn UniqueName="List" HeaderText="List">
            <ItemTemplate>
                <asp:CheckBox ID="List" runat="server" Checked='<%# DataBinder.Eval(Container.DataItem, "List") %>' />
            </ItemTemplate>
            <EditItemTemplate>
            </EditItemTemplate>
        </telerik:GridTemplateColumn>
        <telerik:GridTemplateColumn UniqueName="loadAtStart" HeaderText="loadAtStart">
            <ItemTemplate>
                <asp:CheckBox ID="loadAtStart" runat="server" Checked='<%# DataBinder.Eval(Container.DataItem, "loadAtStart") %>' />
            </ItemTemplate>
            <EditItemTemplate>
            </EditItemTemplate>
        </telerik:GridTemplateColumn>
    </Columns>
</MasterTableView>

The grid is populated with data, and working normally when editing the data.

But when I click on the Add New Record button provided by Telerik, then an empty row is added without any TextBox or CheckBox in the columns to edit in the new Row added. It's just an empty row. I presume that I have to create the controls dynamically in the called ItemDataBound event, but I didn't manage to find the actual code for this.

How do I solve this?

Answer 1

Please try with the below code snippet.

ASPX

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource"
    AllowFilteringByColumn="true" AllowPaging="true" OnItemCommand="RadGrid1_ItemCommand">
    <PagerStyle AlwaysVisible="true" />
    <MasterTableView DataKeyNames="UniqueID" CommandItemDisplay="Top">
        <Columns>
            <telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn>
                <ItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("Name") %>'></asp:TextBox>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
<asp:Button ID="Button1" runat="server" Text="Save All" OnClick="Button1_Click" />

ASPX.CS

public partial class aaaa : System.Web.UI.Page
{

    public List<Employee> lstEmployee
    {
        get
        {
            if (Session["lstEmployee"] != null)
            {
                return (List<Employee>)Session["lstEmployee"];
            }
            else
            {
                return new List<Employee>();
            }
        }
        set
        {
            Session["lstEmployee"] = value;
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            List<Employee> list = new List<Employee>();

            Employee obj = new Employee();
            obj.ID = 1;
            obj.Name = "Name1";
            obj.UniqueID = Guid.NewGuid();
            list.Add(obj);

            obj = new Employee();
            obj.ID = 2;
            obj.Name = "Name2";
            obj.UniqueID = Guid.NewGuid();
            list.Add(obj);

            lstEmployee = list;
        }
    }

    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        RadGrid1.DataSource = lstEmployee;
    }

    protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
    {
        if (e.CommandName == RadGrid.InitInsertCommandName)
        {
            saveAllData();
            lstEmployee.Insert(0, new Employee() { UniqueID = Guid.NewGuid() });
            e.Canceled = true;
            RadGrid1.Rebind();
        }
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        saveAllData();
    }

    protected void saveAllData()
    {
        //Update Session
        foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
        {
            Guid UniqueID = new Guid(item.GetDataKeyValue("UniqueID").ToString());
            Employee emp = lstEmployee.Where(i => i.UniqueID == UniqueID).First();
            emp.Name = (item.FindControl("TextBox1") as TextBox).Text;
        }
    }

}

public class Employee
{
    public Guid UniqueID { get; set; }
    public int ID { get; set; }
    public string Name { get; set; }
    public bool IsActive { get; set; }
    public int weeknumber { get; set; }
}

Answer 2

    I have modified the parameters according to my requirement and also included all CURD operations. 

ASPX Page

  <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false"
                OnNeedDataSource="RadGrid1_NeedDataSource"
                AllowFilteringByColumn="true" AllowPaging="true" OnItemCommand="RadGrid1_ItemCommand">
                <PagerStyle AlwaysVisible="true" />
                <MasterTableView DataKeyNames="UniqueID" CommandItemDisplay="Top" AutoGenerateColumns="false" >
                    <Columns>
                        <telerik:GridEditCommandColumn ButtonType="FontIconButton" />
                        <telerik:GridButtonColumn CommandName="Delete" Text="Delete" ButtonType="FontIconButton" UniqueName="DeleteColumn" />
                        <telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn  DataField="Sku" UniqueName="Sku" HeaderText="Sku">
                            <ItemTemplate>
                                <asp:Label ID="TxtSku" runat="server" Text='<%# Eval("Sku") %>'></asp:Label>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:TextBox ID="TxtSku" runat="server" Text='<%# Eval("Sku") %>'></asp:TextBox>
                            </EditItemTemplate>
                            <InsertItemTemplate>
                                <asp:TextBox ID="TxtSku" runat="server" Text='<%# Eval("Sku") %>'></asp:TextBox>
                            </InsertItemTemplate>
                        </telerik:GridTemplateColumn>                           
                    </Columns>                        
                </MasterTableView>
            </telerik:RadGrid>
            <asp:Button ID="Button1" runat="server" Text="Save All" OnClick="Button1_Click" />
           <telerik:RadAjaxManager runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        <telerik:AjaxUpdatedControl ControlID="Button1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
            </telerik:RadAjaxLoadingPanel>

CS Code

    public List<ItemDetail> ItemDetail
    {
        get
        {
            if (Session["ItemDetail"] != null)
            {
                return (List<ItemDetail>)Session["ItemDetail"];
            }
            else
            {
                return new List<ItemDetail>();
            }
        }
        set
        {
            Session["ItemDetail"] = value;
        }
    }

    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        RadGrid1.DataSource = ItemDetail;
    }

    protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
    {
        if (e.CommandName == RadGrid.InitInsertCommandName)
        {

        }
        if (e.CommandName == RadGrid.PerformInsertCommandName)
        {
            var item = (GridEditFormItem)e.Item;
            var txtReferenceNumber = (TextBox)item.FindControl(id: "TxtSku");
            var val = txtReferenceNumber.Text;
            ItemDetail.Insert(0, new ItemDetail() { UniqueID = Guid.NewGuid(), Sku = val, ID = Convert.ToInt32(22) });
            item.Edit = false;
            RadGrid1.Rebind();
        }
        if (e.CommandName == RadGrid.UpdateCommandName)
        {
            var item = (GridEditFormItem)e.Item;
            var txtReferenceNumber = (TextBox)item.FindControl(id: "TxtSku");
            string requestId = item.GetDataKeyValue(keyName: "UniqueID").ToString().Trim();
            Guid RequestIndentifier = Guid.Parse(requestId);
            var val = txtReferenceNumber.Text;
            var itemFind = ItemDetail.Where(x => x.UniqueID == RequestIndentifier);
            itemFind.FirstOrDefault().Sku = val;
            item.Edit = false;
            RadGrid1.Rebind();
        }
        if (e.CommandName == RadGrid.DeleteCommandName)
        {
            var item = (GridDataItem)e.Item;
            string requestId = item.GetDataKeyValue(keyName: "UniqueID").ToString().Trim();
            Guid RequestIndentifier = Guid.Parse(requestId);
            ItemDetail.RemoveAll(x => x.UniqueID == RequestIndentifier);
            RadGrid1.Rebind();
        }
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        SaveAllData();
    }

    private void SaveAllData()
    {
        //Update Session
        foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
        {
            Guid UniqueID = new Guid(item.GetDataKeyValue("UniqueID").ToString());
            ItemDetail emp = ItemDetail.Where(i => i.UniqueID == UniqueID).First();
            emp.Sku = (item.FindControl("TxtSku") as TextBox).Text;
        }
    }


}
public class ItemDetail
{
    public Guid UniqueID { get; set; }
    public int ID { get; set; }
    public string Sku { get; set; }      
}


 if (!Page.IsPostBack)
            {                    
                List<ItemDetail> list = new List<ItemDetail>();

                ItemDetail obj = new ItemDetail
                {
                    ID = 1,
                    Sku = "Name1",
                    UniqueID = Guid.NewGuid()
                };
                list.Add(obj);

                obj = new ItemDetail();
                obj.ID = 2;
                obj.Sku = "Name2";
                obj.UniqueID = Guid.NewGuid();
                list.Add(obj);

                ItemDetail = list;
            }

Hope this would help you :-)

Answer 3

I'm not really a fan of any of these solutions because they require the use of Session. Session has it's place but I believe it's used more as a crutch.

You're already sending the RadGrid information back to the server-side via ViewState due to the PostBack so why not use it's information instead of relying on an in-memory store.

Example of Adding and Removing an item from a Grid. Yes, it does require iterating items to rebuild a List but it's an alternative to Session so I believe it has merit.

protected void addValueToRecentTagList(string text)
{
    List<string> items = new List<string>();

    foreach(GridDataItem row in RadGridNewTags.Items)
        items.Add(row["tag"].Text);

    items.Add(text);

    RadGridNewTags.DataSource = items;
    RadGridNewTags.DataBind();
}

protected void removeValueFromRecentTagList(string text)
{
    List<string> items = new List<string>();
    bool rebind = false;
    
    foreach (GridDataItem row in RadGridNewTags.Items)
    {
        if (row["tag"].Text == text)
            rebind = true;
        else
            items.Add(row["tag"].Text);
    }

    if (rebind)
    {
        RadGridNewTags.DataSource = items;
        RadGridNewTags.DataBind();
    }
}

Answer 4

You have to insert a control in the EditItemTemplate to display in Edit or Insert mode.

Or you can add an InsertItem Template and place a control in there:

<telerik:GridTemplateColumn UniqueName="loadAtStart" HeaderText="loadAtStart">
        <ItemTemplate>
            <asp:CheckBox ID="loadAtStart" runat="server" Checked='<%# DataBinder.Eval(Container.DataItem, "loadAtStart") %>' />
        </ItemTemplate>
        
        <EditItemTemplate>
           <asp:CheckBox ID="cbxEditLoadAtStart" runat="server" Checked='<%# Bind("loadAtStart") %>' />
        </EditItemTemplate>

        <InsertItemTemplate>
            <asp:CheckBox ID="cbxInsertLoadAtStart" runat="server" />
        </InsertItemTemplate>
    </telerik:GridTemplateColumn>