Grid Formatting

[Mark]

I was reviewing the following example and had a couple of questions I was hoping to get help on.
http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/threelevel/defaultcs.aspx

Is there a way to filter out special characters in the fields when updating/inserting?

Is there a way to format the Update/Insert and Cancel link buttons?  For example to space them further apart or make the Update/Insert link buttons bold.

Thanks,
Mark

[Shinu]

Hi,

Please take a look into the following code snippet to make the insert,update and cancel button bold.

C#:

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (e.Item.IsInEditMode)
    {
        if (e.Item is GridEditFormInsertItem)
        {
            GridEditableItem editItem = (GridEditableItem)e.Item;
            LinkButton InsertButton = (LinkButton)editItem.FindControl("PerformInsertButton");
            InsertButton.CssClass = "bold";
            LinkButton CancelButton = (LinkButton)editItem.FindControl("CancelButton");
            CancelButton.CssClass = "bold";
        }
        else
        {
            GridEditableItem editItem = (GridEditableItem)e.Item;
            LinkButton updateButton = (LinkButton)editItem.FindControl("UpdateButton");
            updateButton.CssClass = "bold";
            LinkButton CancelButton = (LinkButton)editItem.FindControl("CancelButton");
            CancelButton.CssClass = "bold";
        }
     }
}

CSS:

<style type="text/css">
    .bold
    {
        font-weight: bold;
    }
</style>

Thanks,
Shinu.

[Mark]

Thanks!  I'll give that a try.

Any thoughts on preventing the User from entering in special characters into the Insert/Update fields?

[Mark]

Here's an interesting question: Is there a way to right align only the Cancel button?  I tried a bunch of CSS tricks, but it was always bumping the button down to the following line, even when using float: right;

[Shinu]

Hi Mark,

1.Try setting different CssClass for the cancel and update buttons. Please take a look into the following code snippet.

C#:

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (e.Item.IsInEditMode)
    {
        if (e.Item is GridEditFormInsertItem)
        {
            GridEditableItem editItem = (GridEditableItem)e.Item;
            LinkButton InsertButton = (LinkButton)editItem.FindControl("PerformInsertButton");
            InsertButton.CssClass = "bold";
            LinkButton CancelButton = (LinkButton)editItem.FindControl("CancelButton");
            CancelButton.CssClass = "Cancel";
        }
        else
        {
            GridEditableItem editItem = (GridEditableItem)e.Item;
            LinkButton updateButton = (LinkButton)editItem.FindControl("UpdateButton");
            updateButton.CssClass = "bold";
            LinkButton CancelButton = (LinkButton)editItem.FindControl("CancelButton");
            CancelButton.CssClass = "Cancel";
        }
    }
}

CSS:

<style type="text/css">
    .bold
    {
        font-weight: bold;
    }
        .Cancel
    {
        font-weight: bold;
        float:right;
    }
</style>

2.Here is the sample code snippet I tried to prevent user from typing special characters from the TextBox.

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
        GridEditableItem edit = (GridEditableItem)e.Item;
        foreach (GridColumn col in RadGrid1.MasterTableView.Columns)
        {
            if (col.ColumnType == "GridBoundColumn")
            {
                (edit[col.UniqueName].Controls[0] as TextBox).Attributes.Add("onkeyup", "CheckSpecial(this, event)");
            }
        }
    }
}

Javascript:

<script type="text/javascript">
    function CheckSpecial(text, e) {
        var regx, flg;
        regx = /[^0-9a-zA-Z'' ]/
        flg = regx.test(text.value);
        if (flg) {
            var val = text.value;
            val = val.substr(0, (val.length) - 1)
            text.value = val;
        }
    }
</script>

Thanks,
Shinu.

[Mark]

Shinu,

Thank you so much!  The javascript works perfectly! 

My apologies for updating this message multiple times.  I had create a custom column type and had to use col.ColumnType.ToString() in order to apply the script to it.

The Cancel linkbutton still keeps getting kicked down to the next line.  I even attempted to set the width to 50% each with no success.  Placing HTML tags around the buttons to form a table formatted them correct, but they seemed to no longer function as LinkButtons afterward.  Do you have any other suggestions?

Thanks,
Mark

[Mark]

Apparently the issue with the float was an IE7 issue.  I have since updated my VM, and that has cured the problem.  All is well!

Thanks Again!

-Mark