[Solved] How to prevent certain characters to be entered into an editable grid column of type string

[Herman Gouw]

Hi,

I have a simple grid with an editable column of type string as follows:

<form id="form1" runat="server">
<div>
    <telerik:RadScriptManager ID="radScriptManager1" runat="server" />
    <telerik:RadGrid ID="radGrid1" AutoGenerateColumns="false" GridLines="Vertical" OnItemCreated="radGrid_ItemCreated" OnNeedDataSource="radGrid_NeedDataSource" OnUpdateCommand="radGrid_UpdateCommand" runat="server">
        <ClientSettings>
            <Scrolling UseStaticHeaders="true" />
        </ClientSettings>
        <MasterTableView EditMode="InPlace" TableLayout="Fixed">
            <Columns>
                <telerik:GridBoundColumn DataField="Description" DataType="System.String" HeaderText="Description" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" UniqueName="Description" />
                <telerik:GridEditCommandColumn ButtonType="LinkButton" UniqueName="Edit" />
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
</div>
</form>

I would like to prevent the following characters to be entered by the user into the editable column:

<

>

&

"

'

The code behind for the code is as follows:

public partial class Grid : System.Web.UI.Page
{
    private ArrayList _data;

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

    protected void radGrid_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditableItem && e.Item.IsInEditMode)
        {
            GridEditableItem item = (GridEditableItem)e.Item;
            TextBox textbox = (TextBox)item["Description"].Controls[0];
            textbox.Width = Unit.Percentage(99);
        }
    }

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

    protected void radGrid_UpdateCommand(object sender, GridCommandEventArgs e)
    {
        if (e.Item is GridEditableItem && e.Item.IsInEditMode)
        {
            GridEditableItem item = (GridEditableItem)e.Item;
            ((Data)(this._data[item.ItemIndex])).Description = ((TextBox)item["Description"].Controls[0]).Text;
            Session["DATA"] = this._data;
        }
    }
}

public class Data
{
    public string Description { get; set; }

    public Data(string description)
    {
        Description = description;
    }

    public static ArrayList Load()
    {
        ArrayList arrayList = new ArrayList();
        arrayList.Add(new Data("Cheeses"));
        arrayList.Add(new Data("Prepared meats"));
        arrayList.Add(new Data("Seaweed and fish"));
        return arrayList;
    }
}

Can you please help me how to do this? Do I need to write an event handler for the textbox in radGrid_ItemCreated?

Please show me the code to be inserted above to do this job.

Thanks & regards,

Herman Gouw

Skype: hermangouw

[Herman Gouw]

More information on what I want to achieve :

when the user types in any of the following characters on the editable grid column:

<

>

&

"

'

no character will be displayed on the editable grid column.

This is similar to what is implemented on the site http://www.ingdirect.com.au when the user tries to enter any of the above characters in the account name.

Hope this is clear enough.

[Mira]

Hello Herman,

To prevent some characters to be entered by the user I recommend that you add a validator to the edit field in the RadGrid as described in this help topic.

I hope this helps.

Sincerely yours,
Mira
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Herman Gouw]

Hi Mira,

I have read the information that you have given.

However, the solution that I require needs to be done on the client side.

When the user types in any of the following characters < > " ' & then the character will not be displayed on the screen.

Can you show me any examples on how to do this and/or show me the code to do this?

Thanks & regards,

Herman

[Mira]

Hello Herman,

To prevent entering some characters in a RadTextBox I recommend that you handle the OnKeyPress client event and limit the characters' input. I am also attaching a sample project showing how it is done.

All the best,
Mira
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Herman Gouw]

Hi Mira,

Thank you for your reply and sample. That is exactly the solution that I am looking for. However, your example only applies to a standalone RadTextBox.

Can you show me how to apply the JavaScript function CheckValue to the RadGrid GridBoundColumn Description in my original example below:

<telerik:GridBoundColumn DataField="Description" DataType="System.String" HeaderText="Description" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" UniqueName="Description" />

Thanks & regards,

Herman

[Shinu]

Hi,

I tried following approach in order to prevent some characters to be entered into GridBoundColumn TextBox when in editmode.

ASPX:

<telerik:GridBoundColumn DataField="Description" DataType="System.String" HeaderText="Description" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" UniqueName="Description" >
</telerik:GridBoundColumn>

CS:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
        GridEditableItem item = (GridEditableItem)e.Item;
        TextBox textbox1 = (TextBox)item["CompanyName"].Controls[0];
        textbox1.Attributes.Add("onkeyup", "CheckSpecial(this, event)");
    }
}

JavaScript:

<script type="text/javascript">
function CheckSpecial(text,e)
{
    if(e.keyCode == 188 || e.keyCode == 190 || e.keyCode == 55 || e.keyCode == 222 )
    {
        var val=text.value;
        val=val.substr(0,(val.length)-1)
        text.value=val;
    }
}
</script>

-Shinu.

[Herman Gouw]

Hi Shinu,

Thank you for your prompt reply and sample.

This works perfectly fine for the input typed in by the user.

However, it does not work if the input is pasted onto the radgrid (i.e. still accepts any string pasted in which contains < > " ' &).

Can you give me any solution which handles this case?

Thanks & regards,

Herman

[Kara Eser]

ok understand thanks