How can I implement the following grid?

[Herman Gouw]

Hi,

In my current project, I have to implement a grid which looks like http://www.gouw.ws/SmartGrid.pdf where the user has to enter the min and max values for each month of the next 8 quarters.

On the grid:

- each row represent 24 columns (the min and max for each month of type integer)

- the shaded areas are read only

- the user can only enter values on the non shaded areas

Can you please show me :

- how to display multi level grid header text as shown on the grid

- how to dynamically display the correct number of rows on the grid depending on today's date

- how to dynamically set the appropriate cells on the grid to read only depending on today's date

- any samples which are relevant to the grid above?

Thank you for your help.

Kind regards,

Herman Gouw

Skype: hermangouw

[Herman Gouw]

Hi,

I have figured out how to dynamically display the correct number of rows on the grid depending on today's date.

But I still need help :

- to dynamically set the appropriate cells on the grid to read only

  (Can I do it OnItemDataBound by checking the value of the item? If yes how can I check the value?)

- to display multi level grid header text 

Can anybody please help?

Thanks & regards,

Herman Gouw

Skype: hermangouw

[Princy]

Hi Herman,

I would suggest you to use a GridTemplateColumn to achieve the desired scenario. Here is sample aspx code which i tried on my end.

ASPX:

      <MasterTableView >
                    <Columns>
                        <telerik:GridTemplateColumn UniqueName="JanuaryColumn">
                            <HeaderTemplate>
                                <table id="Table1" cellspacing="1" cellpadding="1" width="300" border="1" >
                                    <tr>
                                        <td colspan="2" align="center">
                                            <b>January</b></td>
                                    </tr>
                                    <tr>
                                        <td width="50%">
                                            <b>Max</b></td>
                                        <td width="50%">
                                            <b>Min</b></td>
                                    </tr>
                                </table>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <table id="Table2" cellspacing="1" cellpadding="1" width="300" border="1" >
                                    <tr>
                                        <td width="50%">
                                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                                        </td>
                                        <td width="50%">
                                            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                </table>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn UniqueName="FebruaryColumn">
                            <HeaderTemplate>
                                <table id="Table1" cellspacing="1" cellpadding="1" width="300" border="1">
                                    <tr>
                                        <td colspan="2" align="center">
                                            <b>February</b></td>
                                    </tr>
                                    <tr>
                                        <td width="50%">
                                            <b>Max</b></td>
                                        <td width="50%">
                                            <b>Min</b></td>
                                    </tr>
                                </table>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <table id="Table2" cellspacing="1" cellpadding="1" width="300" border="1">
                                    <tr>
                                        <td width="50%">
                                            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                                        </td>
                                        <td width="50%">
                                            <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                </table>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                </MasterTableView>

Here is sample to code to access the textbox from the GridTemplateColumn in the code behind.

CS:

 protected void RadGrid2_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = (GridDataItem)e.Item;
            ((TextBox)item["JanuaryColumn"].FindControl("TextBox1")).Enabled = false;
            ((TextBox)item["JanuaryColumn"].FindControl("TextBox2")).Enabled = false;

        }


    }

Customizing with GridTemplateColumn

Thanks
Princy

[Herman Gouw]

Hi Princy,

Thank you very much for your prompt & useful information.

I was just informed today that the user requirement has been changed and no longer requires to have a 2 level headers.

However, it still requires the application to dynamically set some grid cells to read only and paint these grid cells as black color.

I have implemented similar to the source code given below.

The appropriate cells are disabled and painted as black color correctly.

However, in edit mode the cells are not painted as black.

Can you please show me:

1. How to have the read only grid cells painted as black in edit mode?

2. The users can only enter the values between 0 to 100 in the editable grid cells.
    I can not set editor.NumericTextBox.MaxValue to 100 in radGrid_ItemCreated because this will incorrectly change the read
    only grid cells which contain the values 999 to 100.
    How can I implement editor.NumericTextBox.MaxValue  in another way so that when the user enters a value greater than 100 in
    any editable grid cell, I would like the application to automatically change the value to 100 when the focus loses (i.e. similar to set
    editor.NumericTextBox.MaxValue to 100).

Many thanks & regards,
Herman

        <telerik:RadScriptManager ID="radScriptManager" runat="server" />
        <telerik:RadGrid ID="radGrid" AllowSorting="false" AutoGenerateColumns="false" GridLines="Vertical" OnItemCreated="radGrid_ItemCreated" OnNeedDataSource="radGrid_NeedDataSource" OnUpdateCommand="radGrid_UpdateCommand" OnPreRender="radGrid_PreRender" runat="server" >
            <ClientSettings AllowKeyboardNavigation="true">
                <Scrolling UseStaticHeaders="true" />
            </ClientSettings>
            <MasterTableView EditMode="InPlace" TableLayout="Fixed">
                <Columns>
                    <telerik:GridNumericColumn DataField="CalendarYear"  NumericType="Number" DataType="System.Int32" HeaderStyle-Width="6%" ItemStyle-HorizontalAlign="Center" ReadOnly="true" UniqueName="CalendarYear" />
                    <telerik:GridNumericColumn DataField="Jan" NumericType="Number" DataFormatString="{0:N0}" DataType="System.Int32" HeaderText="January"   HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="7%" ItemStyle-HorizontalAlign="Left" UniqueName="Jan" />
                    <telerik:GridNumericColumn DataField="Feb" NumericType="Number" DataFormatString="{0:N0}" DataType="System.Int32" HeaderText="February"  HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="7%" ItemStyle-HorizontalAlign="Left" UniqueName="Feb" />
                    <telerik:GridNumericColumn DataField="Mar" NumericType="Number" DataFormatString="{0:N0}" DataType="System.Int32" HeaderText="March"     HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="7%" ItemStyle-HorizontalAlign="Left" UniqueName="Mar" />
                    <telerik:GridNumericColumn DataField="Apr" NumericType="Number" DataFormatString="{0:N0}" DataType="System.Int32" HeaderText="April"     HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="7%" ItemStyle-HorizontalAlign="Left" UniqueName="Apr" />
                    <telerik:GridNumericColumn DataField="May" NumericType="Number" DataFormatString="{0:N0}" DataType="System.Int32" HeaderText="May"       HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="7%" ItemStyle-HorizontalAlign="Left" UniqueName="May" />
                    <telerik:GridNumericColumn DataField="Jun" NumericType="Number" DataFormatString="{0:N0}" DataType="System.Int32" HeaderText="June"      HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="7%" ItemStyle-HorizontalAlign="Left" UniqueName="Jun" />
                    <telerik:GridNumericColumn DataField="Jul" NumericType="Number" DataFormatString="{0:N0}" DataType="System.Int32" HeaderText="July"      HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="7%" ItemStyle-HorizontalAlign="Left" UniqueName="Jul" />
                    <telerik:GridNumericColumn DataField="Aug" NumericType="Number" DataFormatString="{0:N0}" DataType="System.Int32" HeaderText="August"    HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="7%" ItemStyle-HorizontalAlign="Left" UniqueName="Aug" />
                    <telerik:GridNumericColumn DataField="Sep" NumericType="Number" DataFormatString="{0:N0}" DataType="System.Int32" HeaderText="September" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="7%" ItemStyle-HorizontalAlign="Left" UniqueName="Sep" />
                    <telerik:GridNumericColumn DataField="Oct" NumericType="Number" DataFormatString="{0:N0}" DataType="System.Int32" HeaderText="October"   HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="7%" ItemStyle-HorizontalAlign="Left" UniqueName="Oct" />
                    <telerik:GridNumericColumn DataField="Nov" NumericType="Number" DataFormatString="{0:N0}" DataType="System.Int32" HeaderText="November"  HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="7%" ItemStyle-HorizontalAlign="Left" UniqueName="Nov" />
                    <telerik:GridNumericColumn DataField="Dec" NumericType="Number" DataFormatString="{0:N0}" DataType="System.Int32" HeaderText="December"  HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="7%" ItemStyle-HorizontalAlign="Left" UniqueName="Dec" />
                    <telerik:GridEditCommandColumn ButtonType="LinkButton" UniqueName="Edit" />
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>

    public partial class SmartGrid : Page
    {
        private List<Data> _data = null;
        private string[] Months = new string[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                this._data = Data.Load();
                Session["DATA"] = this._data;
            }
            else
            {
                this._data = (List<Data>)Session["DATA"];
            }
        }

        protected void radGrid_ItemCreated(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridEditableItem && e.Item.IsInEditMode)
            {
                GridEditableItem item = (GridEditableItem)e.Item;
                for (int i = 0; i < 12; i++)
                {
                    GridNumericColumnEditor editor = (GridNumericColumnEditor)item.EditManager.GetColumnEditor(Months[i]);
                    editor.NumericTextBox.EmptyMessage = "0";
                    editor.NumericTextBox.MaxLength = 3;
                    editor.NumericTextBox.MinValue = 0;
                    editor.NumericTextBox.NumberFormat.AllowRounding = true;
                    editor.NumericTextBox.NumberFormat.DecimalDigits = 0;
                    editor.NumericTextBox.Width = Unit.Percentage(100);
                }
            }
        }

        protected void radGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
        {
            this.radGrid.DataSource = this._data;
        }

        protected void radGrid_PreRender(object sender, EventArgs e)
        {
            foreach (GridDataItem item in this.radGrid.Items)
            {
                foreach (TableCell cell in item.Cells)
                {
                    if (cell.Text == "999")
                    {
                        cell.Text = "";
                        cell.BackColor = System.Drawing.Color.Black;
                        cell.ForeColor = System.Drawing.Color.Black;
                        cell.Enabled = false;
                    }
                }
            }
        }

        protected void radGrid_UpdateCommand(object sender, GridCommandEventArgs e)
        {
            if (e.Item is GridEditableItem && e.Item.IsInEditMode)
            {
                GridEditableItem item = e.Item as GridEditableItem;
                try
                {
                    ((Data)(this._data[item.ItemIndex])).Jan = int.Parse(((RadNumericTextBox)item["Jan"].Controls[0]).Text);
                }
                catch
                {
                    ((Data)(this._data[item.ItemIndex])).Jan = null;
                }
                try
                {
                    ((Data)(this._data[item.ItemIndex])).Feb = int.Parse(((RadNumericTextBox)item["Feb"].Controls[0]).Text);
                }
                catch
                {
                    ((Data)(this._data[item.ItemIndex])).Feb = null;
                }
                try
                {
                    ((Data)(this._data[item.ItemIndex])).Mar = int.Parse(((RadNumericTextBox)item["Mar"].Controls[0]).Text);
                }
                catch
                {
                    ((Data)(this._data[item.ItemIndex])).Mar = null;
                }
                try
                {
                    ((Data)(this._data[item.ItemIndex])).Apr = int.Parse(((RadNumericTextBox)item["Apr"].Controls[0]).Text);
                }
                catch
                {
                    ((Data)(this._data[item.ItemIndex])).Apr = null;
                }
                try
                {
                    ((Data)(this._data[item.ItemIndex])).May = int.Parse(((RadNumericTextBox)item["May"].Controls[0]).Text);
                }
                catch
                {
                    ((Data)(this._data[item.ItemIndex])).May = null;
                }
                try
                {
                    ((Data)(this._data[item.ItemIndex])).Jun = int.Parse(((RadNumericTextBox)item["Jun"].Controls[0]).Text);
                }
                catch
                {
                    ((Data)(this._data[item.ItemIndex])).Jun = null;
                }
                try
                {
                    ((Data)(this._data[item.ItemIndex])).Jul = int.Parse(((RadNumericTextBox)item["Jul"].Controls[0]).Text);
                }
                catch
                {
                    ((Data)(this._data[item.ItemIndex])).Jul = null;
                }
                try
                {
                    ((Data)(this._data[item.ItemIndex])).Aug = int.Parse(((RadNumericTextBox)item["Aug"].Controls[0]).Text);
                }
                catch
                {
                    ((Data)(this._data[item.ItemIndex])).Aug = null;
                }
                try
                {
                    ((Data)(this._data[item.ItemIndex])).Sep = int.Parse(((RadNumericTextBox)item["Sep"].Controls[0]).Text);
                }
                catch
                {
                    ((Data)(this._data[item.ItemIndex])).Sep = null;
                }
                try
                {
                    ((Data)(this._data[item.ItemIndex])).Oct = int.Parse(((RadNumericTextBox)item["Oct"].Controls[0]).Text);
                }
                catch
                {
                    ((Data)(this._data[item.ItemIndex])).Oct = null;
                }
                try
                {
                    ((Data)(this._data[item.ItemIndex])).Nov = int.Parse(((RadNumericTextBox)item["Nov"].Controls[0]).Text);
                }
                catch
                {
                    ((Data)(this._data[item.ItemIndex])).Nov = null;
                }
                try
                {
                    ((Data)(this._data[item.ItemIndex])).Dec = int.Parse(((RadNumericTextBox)item["Dec"].Controls[0]).Text);
                }
                catch
                {
                    ((Data)(this._data[item.ItemIndex])).Dec = null;
                }
            }
        }
    }

    public class Data
    {
        public int CalendarYear { get; set; }
        public int? Jan { get; set; }
        public int? Feb { get; set; }
        public int? Mar { get; set; }
        public int? Apr { get; set; }
        public int? May { get; set; }
        public int? Jun { get; set; }
        public int? Jul { get; set; }
        public int? Aug { get; set; }
        public int? Sep { get; set; }
        public int? Oct { get; set; }
        public int? Nov { get; set; }
        public int? Dec { get; set; }

        public Data(int calendarYear, int? jan, int? feb, int? mar, int? apr, int? may, int? jun, int? jul, int? aug, int? sep, int? oct, int? nov, int? dec)
        {
            CalendarYear = calendarYear;
            Jan = jan;
            Feb = feb;
            Mar = mar;
            Apr = apr;
            May = may;
            Jun = jun;
            Jul = jul;
            Aug = aug;
            Sep = sep;
            Oct = oct;
            Nov = nov;
            Dec = dec;
        }

        public static List<Data> Load()
        {
            List<Data> data = new List<Data>();
            data.Add(new Data(2009, 999, 999, 999, 999, 999, 999, null, null, null, null, null, null));
            data.Add(new Data(2010, null, null, null, null, null, null, 999, 999, 999, 999, 999, 999));
            return data;
        }
    }

[Herman Gouw]

Hi Princy,

Just to simplify of the problems that I still encounter in my project right now:

1. Need to know how to disable and change the color of a grid cell in edit mode

2. Need to know how to automatically change the content of a grid cell of type GridNumericColumn to 100 (for example)

    if the users enter a value greater than 100.

    (I can not do it by setting GridNumericColumnEditor.NumericTextBox.MaxValue to 100

     because I need to be able to initially assign some grid cells to 999).

Thanks & regards,

Herman

[Princy]

H Herman,

1.You can try the following code snippet to disable and change the backcolor of a RadNumericTextbox in edit mode.

ASPX:

    <telerik:GridNumericColumn DataField="Cost" UniqueName="NumCol"   HeaderText="NumCol" ></telerik:GridNumericColumn>

CS:

  protected void RadGrid2_ItemCreated(object sender, GridItemEventArgs e)
    {
        if ((e.Item is GridEditableItem) && (e.Item.IsInEditMode))
        {
            GridEditableItem editItem = (GridEditableItem)e.Item;
            RadNumericTextBox numTxtbx = (RadNumericTextBox)editItem["NumCol"].Controls[0];
            numTxtbx.BackColor = System.Drawing.Color.Black;
            numTxtbx.Enabled = false;
        }
    }

2. I suppose your second requirement is to default the NumericTextbox entry to 100 if it is greater than 100(in edit mode). If so try the following approach.

CS:

 protected void RadGrid2_ItemCreated(object sender, GridItemEventArgs e)
    {
        if ((e.Item is GridEditableItem) && (e.Item.IsInEditMode))
        {
            GridEditableItem editItem = (GridEditableItem)e.Item;
            RadNumericTextBox numTxtbx = (RadNumericTextBox)editItem["NumCol"].Controls[0];

            numTxtbx.AutoPostBack = true;
            numTxtbx.TextChanged += new EventHandler(numTxtbx_TextChanged);


        }
    }

    void numTxtbx_TextChanged(object sender, EventArgs e)
    {
        RadNumericTextBox numTxtbx = (RadNumericTextBox)sender;
        int value = Convert.ToInt32(numTxtbx.Value);
        if (value > 100)
            numTxtbx.Value = 100;
    }

Regards
Princy.

[Herman Gouw]

Thanks Princy for the prompt reply.

Regarding changing the backcolor of a RadNumericTextbox in edit mode, I only want to change the color if the content of the cell is 999.

I implemented it as follows in my project but it does not work in edit mode:

protected void RadGrid_PreRender(object sender, EventArgs e)
{
    foreach (GridDataItem item in this.RadGrid.Items)
    {
        foreach (TableCell cell in item.Cells)
        {
            if (cell.Text == "999")
            {
                cell.Text = String.Empty;
                cell.BackColor = System.Drawing.Color.Black;

                cell.Enabled = false;
            }
        }
    }
}

I have tried modifying your code snippet as follows but it also does not work as numTxtbx.Text is empty.

protected void RadGrid_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
        GridEditableItem item = (GridEditableItem)e.Item;
        RadNumericTextBox numTxtbx = (RadNumericTextBox)item["NumCol"].Controls[0];
        if (numTxtbx.Text == "999")
        {
            numTxtbx.BackColor = System.Drawing.Color.Black;
            numTxtbx.Enabled = false;
        }
    }
}

Can you please help me again?

Kind regards,

Herman

[Vlad]

Hello Herman,

ItemCreated is too early to check values - you should use ItemDataBound instead.

Kind regards,
Vlad
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Herman Gouw]

Hi Princy & Vlad,

I have already tried this (in fact, this was the first thing I tried) but it does not work in edit mode, i.e.

- the background color of the grid cell does not change to black in edit mode

- however, the grid cell becomes disabled.

protected void RadGrid_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
        DataRowView dataRowView = (DataRowView)e.Item.DataItem;
        if ((int)dataRowView.Row.ItemArray[0] == 999)) // Assuming the column NumCol is the FIRST column
        {
            GridEditableItem gridItem = e.Item as GridEditableItem;
            gridItem["NumCol"].BackColor = Color.Black; // This code does NOT work
            gridItem["NumCol"].Enabled = false; // This code works
        }
    }
}

Can you please help?

Regards,

Herman

[Herman Gouw]

Thanks for all your help. I have finally got it working as follows:

protected void RadGrid_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
        DataRowView dataRowView = (DataRowView)e.Item.DataItem;
        if ((int)dataRowView.Row.ItemArray[0] == 999)) // Assuming the column NumCol is the FIRST column
        {
            GridEditableItem editItem = (GridEditableItem)e.Item;
            RadNumericTextBox numericTextBox = (RadNumericTextBox)editItem["NumCol"].Controls[0];
            numericTextBox.BackColor = Color.Black;
            numericTextBox.Enabled = false;
        }
    }
}

Thanks again,

Herman