Text Box Size Ignored in Add/Edit Popup of Grid

[Adam]

I have a grid that is showing fields and one of them is a Name field that can be long. When adding and editing a record, I want the Name field to be a textbox that is 2 rows high.

I created a EditorTemplate that looks as follows:

@(Html.TextArea("Name", new{style="width:200px;height:30px;",row="2",cols="30"})

I placed this at the top of the Name field in the ViewModel:

[UIHint("SponsorNameMultilineText")]

I am now seeing a text box but it has too many lines in it - I want it to be shorter. How do I do that?

 

 

 

 

 

 

[Daniel]

Hello Nancy,

I am not sure if this is not just a typo but the correct attribute is "rows". Also if the default styles from the Site.css are used, the textarea will have a min-height:

textarea
{
    min-height: 75px;
}

which will also needs to be overridden.

Regards,
Daniel
the Telerik team

[Adam]

The min-height worked. Thanks.
However, now the pop-up for adding and editing is no longer wrking. When I edit, there is no data showing.
Here is my ViewModel for that field:

        [Required(AllowEmptyStrings = false, ErrorMessage = "Sponsor Name is required")]
        [RegularExpression(@"^[a-zA-Z0-9 ]{2,50}$",
            ErrorMessage = "Special characters are not allowed and the value cannot be more than 50 characters.")]
        [Display(Name = "Sponsor Name")]
        [UIHint("SponsorNameMultilineText")]
        public string Name { get; set; }

Here is the EditorTemplate:

@(Html.TextArea("Name", new{style="min-height:30px;",rows="2",cols="30"}))

and here is the grid:

    @(Html.Kendo().Grid<SponsorViewModel>()
        .Name("SponsorTypeGrid")
        .Columns(columns =>
            {
                columns.Bound(item => item.SponsorID);
                columns.Bound(item => item.Name);
                columns.Bound(item => item.Address1);
                columns.Bound(item => item.Address2);
                columns.Bound(item => item.City);
                columns.Bound(item => item.State);
                columns.Bound(item => item.ZipCode);
                columns.ForeignKey(p => p.SponsorType, (IEnumerable<LRRI.QAM.ViewModels.SponsorTypeWithIDViewModel>)ViewData["SponsorTypeList"], "SponsorTypeID", "SponsorType");
                columns.Bound(item => item.SponsorCode);
                columns.ForeignKey(p => p.Active, (IEnumerable)ViewData["ActiveList"], "ActiveID", "Active");
                columns.Command(command =>
                                    {
                                        command.Edit();
                                        command.Destroy();
                                    });      
            })
            .DataSource(ds => ds
                .Ajax()
                .Model(model =>
                {
                    model.Id(m => m.SponsorID);
                })
                .Sort(sort =>
                {
                    // Sort by Name in descending order
                    sort.Add(m => m.Name).Ascending();
                })
                .Read(read => read.Action("SponsorDataSource", "Sponsor"))
                .Create(create => create.Action("SponsorCreate","Sponsor"))
                .Update(update => update.Action("SponsorUpdate", "Sponsor"))
                .Destroy(destroy => destroy.Action("SponsorDelete", "Sponsor"))
                .Events(events => events.Error("listValueDataSource_error"))
                .Events(events => events.RequestEnd("grid_requestend"))
            )
        .Pageable()
        .Sortable()
        .Filterable()
        .ToolBar(commands => commands.Create())
        .Editable(edit => edit.Mode(GridEditMode.PopUp))
        .Events(events => events.Edit("PopUpEdit"))
        )

The Name is the one I converted to use the multiline text. Once I did that, I cannot add or edit using the pop-up from the grid.

Thanks,

[Daniel]

Hi again,

The textarea name will be prefixed with the current HtmlFieldPrefix when used in an editor template so it will not match the property name. Using the TextAreaFor helper should resolve the problem:

@(Html.TextAreaFor(m=> m, new{style="min-height:30px;",rows="2",cols="30"}))

Kind regards,
Daniel
the Telerik team