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

2 Answers 66 Views
Grid
anna
Top achievements
Rank 1
Bronze
Iron
anna asked on 29 Dec 2021, 10:05 AM


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.

 

 

 

 

 

2 Answers, 1 is accepted

Sort by
0
Darrin
Top achievements
Rank 1
Iron
answered on 29 Dec 2021, 09:17 PM
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
Top achievements
Rank 1
Bronze
Iron
commented on 29 Dec 2021, 10:20 PM

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

0
Attila Antal
Telerik team
answered on 31 Dec 2021, 05:15 PM

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:

 

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
anna
Top achievements
Rank 1
Bronze
Iron
Answers by
Darrin
Top achievements
Rank 1
Iron
Attila Antal
Telerik team
Share this question
or