I want to input text by putting a textbox on telerik:radgrid

[anna]

1. platform used :  ==== > telerik:radgrid   on   ASP.NET 

as the Attached File, I want to input text by adding a txtBox to a column in telerik:radgrid

Is there an ASP.NET version of the source code I can refer to?

 Telerik : radgrid on ASP.NET

 

Please Help me.

 

 

 

 

 

[Darrin]

what you can do is, create a bound column and set the datafield. then convert that column to a template column. after that, go to your markup and you'll see the label in the item template column and you'll see a textbox in the edititem of the template.  you can copy the textbox and insert it into the itemtemplate in place of the label. This will have the text set as your datafield.  If your going to actuall use the edititem template, make sure you rename the textbox in the itemtemplate.   Hopefully that makes sense.

[anna]

I need the asp.net version of the ASP.NET Version example source files. Because I'm not good at programming. 

Please check the file I attached. 

Attached File : GridtxtBox.png

I need ASP.NET Version Souce Example File.

Please Help me

[Attila Antal]

Hi Anna,

This is scenario is rather specific to your requirements. As it is not a common scenario, we do not have examples. However, building a similar structure would be straightforward.

Example:

<style>
    .RadGrid .rgMasterTable tr td {
        padding: 0;
        border: none;
    }

    .RadGrid .rgMasterTable .mainpanel div {
        border-top: 1px solid #808080;
        border-bottom: 1px solid #808080;
        border-left: 1px solid #808080;
        border-right: 1px solid #808080;
    }

    .RadGrid .rgMasterTable .labelpanel {
        text-align: center;
        background-color: #66FFFF;
    }

    .RadGrid .rgMasterTable .labelpanel span {
        color: #A7A7A7;
    }

    .RadGrid .rgMasterTable .txtboxpanel input {
        border: none;
    }
</style>

<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

 

C#

public int TotalNumberOfCells
{
    get
    {
        return 300;
    }
}
public int NumberOfColumns
{
    get
    {
        return 20;
    }
}
public int NumberOfRows
{
    get
    {
        return TotalNumberOfCells / NumberOfColumns;
    }
}

protected void Page_Init(object sender, EventArgs e)
{
    // Create Grid instance
    var grid = new RadGrid() { ID = "RadGrid1" };
    // Hide Column Names
    grid.ShowHeader = false;
    // Make the Grid 0 so that columns will expand it as much as they need, not more
    grid.Width = Unit.Pixel(0);
    // Set the Table Layout to Fixed. Columns will dictate the min-width of the Grid
    grid.MasterTableView.TableLayout = GridTableLayout.Fixed;
    // Set a Width for all the Columns globally
    grid.MasterTableView.HeaderStyle.Width = Unit.Pixel(100);
    // Disable Embedded Skins to be able to customize the styles easier
    grid.EnableEmbeddedSkins = false;
    // Attached the NeedDataSource event
    grid.NeedDataSource += Grid_NeedDataSource;
    // Disable Auto generated columns
    grid.AutoGenerateColumns = false;

    // Create Template columns
    for (int colIndex = 0; colIndex < NumberOfColumns; colIndex++)
    {
        // Create Column instance
        var templateColumn = new GridTemplateColumn();
        // Set the DataField
        templateColumn.DataField = "Col" + (colIndex + 1);
        // Column Header Text (it is only Visible if ShowHeader="true"
        templateColumn.HeaderText = templateColumn.DataField;
        // Create the Template for this column
        templateColumn.ItemTemplate = new MyItemTemplate(templateColumn.DataField);
        // Add column to the ColumnsCollection of MasterTable
        grid.MasterTableView.Columns.Add(templateColumn);
    }
    // Add the Grid controls to the PlaceHolder
    PlaceHolder1.Controls.Add(grid);
}

private void Grid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = MyMatrixTable();
}


private System.Data.DataTable MyMatrixTable()
{
    System.Data.DataTable dt = new System.Data.DataTable();

    for (int i = 0; i < NumberOfColumns; i++)
    {
        dt.Columns.Add(new System.Data.DataColumn("Col" + (i + 1), typeof(string)));
    }

    var cellValueIncremental = 1;

    for (int rowIndex = 0; rowIndex < NumberOfRows; rowIndex++)
    {
        var row = dt.NewRow();

        foreach (System.Data.DataColumn column in dt.Columns)
        {
            row[column] = cellValueIncremental++;
        }
        dt.Rows.Add(row);
    }

    return dt;
}

private class MyItemTemplate : ITemplate
{
    string _columnName;
    public MyItemTemplate(string columnName)
    {
        this._columnName = columnName;
    }
    public void InstantiateIn(Control container)
    {
        var mainPanel = new Panel() { CssClass = "mainpanel" };

        var labelpanel = new Panel() { CssClass = "labelpanel" };
        var lbl = new Label();
        lbl.DataBinding += Lbl_DataBinding;
        labelpanel.Controls.Add(lbl);
        mainPanel.Controls.Add(labelpanel);

        var textboxPanel = new Panel() { CssClass = "txtboxpanel" };
        var txtBox = new RadTextBox() { Width = Unit.Percentage(100) };
        textboxPanel.Controls.Add(txtBox);
        mainPanel.Controls.Add(textboxPanel);

        container.Controls.Add(mainPanel);
    }

    private void Lbl_DataBinding(object sender, EventArgs e)
    {
        Label lbl = (Label)sender;

        GridDataItem gridRow = (GridDataItem)lbl.NamingContainer;

        lbl.Text = ((System.Data.DataRowView)gridRow.DataItem)[_columnName].ToString();
    }
}

 

Result

 

For this structure, you must assign a data source to the Grid which will look like this:

 

This example does not have Create/Update/Delete (CRUD) operations implemented, however, we do have a lot of articles and examples that can help you achieve that.

Review the following articles to get a better understanding:

• Creating a RadGrid Programmatically
• Creating Template Columns Programmatically
• In Place - EditMode
• Update all, individual or selected rows using RadGrid with InPlace edit mode
• Programmatic Data Binding Using the NeedDataSource Event
• Extracting values
• Accessing Values and Controls
• 6 Server-Side Debugging Tips That Will Make Developing Easier
• Debugging Your Application on Client-Side

 

For other examples, check out the Telerik Code Library https://www.telerik.com/support/code-library/aspnet-ajax and the Knowledge Base https://docs.telerik.com/devtools/aspnet-ajax/knowledge-base

 

Regards,
Attila Antal
Progress Telerik