Text Box Size Ignored in Add/Edit Popup of Grid

4 posts, 0 answers
  1. Adam
    Adam avatar
    7 posts
    Member since:
    Nov 2011

    Posted 14 Feb 2013 Link to this post

    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?

     

     

     

     

     

     

  2. Daniel
    Admin
    Daniel avatar
    2219 posts

    Posted 18 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Adam
    Adam avatar
    7 posts
    Member since:
    Nov 2011

    Posted 18 Feb 2013 Link to this post

    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,

  4. Daniel
    Admin
    Daniel avatar
    2219 posts

    Posted 20 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top