This is a migrated thread and some comments may be shown as answers.

[Solved] Grid editing in editor template

1 Answer 78 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Ivan
Top achievements
Rank 1
Ivan asked on 17 Aug 2012, 10:27 AM
Hello I have problem with grid editing in editor template. When I click on edit or insert command, grid is not rendering editor controls so the row is blank (see attachment). If I move grid outside the editor template it works fine.

Here is my editor template:
<script type="text/javascript">
    function AutoComplete_OnChange(e) {
        var myRegexp = /\(([^)]*)\)/;
 
        var match = myRegexp.exec(e.value);
        if (match != null && match.length == 2)
            $(e.target).val(match[1]);
    }
 
    function ContactsGrid_OnCommand(e) {
        e.preventDefault();
 
        if (e.name == "ChooseContact") {
            var prefix = e.target.id.replace('ContactsGrid', '');
 
            $('#' + prefix).val(e.dataItem.Phone);
            $('#' + prefix + 'Window').data('tWindow').close();
        }
    }
</script>
@(Html.Telerik().AutoCompleteFor(m => m)
    .Encode(false)
    .DataBinding(binding => binding.Ajax().Select("GetFilteredContacts", "Contact").Delay(100).Cache(true))
    .ClientEvents(events => events.OnChange("AutoComplete_OnChange"))
    .AutoFill(false)
    .HighlightFirstMatch(true)
    .HtmlAttributes(new { @class = "text-box single-line", type = "tel" })
    .Filterable(filtering =>
    {
        filtering.FilterMode(AutoCompleteFilterMode.Contains);
        filtering.MinimumChars(2);
    })
)
@if (Request.IsAuthenticated)
{
    <img alt="Najít kontakt" src="@Url.Content("~/content/images/contacts-icon.png")" onclick="$('#@ViewData.TemplateInfo.HtmlFieldPrefix' + 'Window').data('tWindow').center().open()" style="margin:0 0 0 -3px" />
    Html.Telerik().Window()
        .Name(ViewData.TemplateInfo.HtmlFieldPrefix + "Window")
        .Title("Výběr kontaktu")
        .Width(700)
        .Height(425)
        .Draggable(true)
        .Modal(true)
        .Buttons(b => b.Close())
        .Content(
            @<text>
                @(Html.Telerik().Grid<FakeId.Models.ContactModel>()
                    .Name(ViewData.TemplateInfo.HtmlFieldPrefix + "ContactsGrid")
                    .PrefixUrlParameters(false)
                    .EnableCustomBinding(true)
                    .DataKeys(keys => keys.Add(c => c.ID))
                    .ToolBar(t=>t.Insert().ButtonType(GridButtonType.Image))
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.ID).Hidden();
                        columns.Bound(o => o.Nickname);
                        columns.Bound(o => o.Phone).Width(125);
                        columns.Bound(o => o.FirstName);
                        columns.Bound(o => o.LastName);
                        columns.Bound(o => o.Email);
                        columns.Command(commands =>
                        {
                            commands.Custom("ChooseContact").Text("Vybrat").Ajax(true).ButtonType(GridButtonType.Text);
                            commands.Edit().ButtonType(GridButtonType.Image);
                            commands.Delete().ButtonType(GridButtonType.Image);
                        });
                             
                    })
                    .ClientEvents(events => events.OnCommand("ContactsGrid_OnCommand"))
                    .DataBinding(dataBinding => dataBinding
                        .Ajax()
                            .Select("Select", "Contact")
                            .Insert("Insert","Contact")
                            .Update("Update", "Contact")
                            .Delete("Delete", "Contact")
                        )
                    .Sortable(sorting =>
                    {
                        sorting.Enabled(true);
                        sorting.SortMode(GridSortMode.SingleColumn);
                    })
                    .Pageable(paging => paging.Total(ViewData["total"] == null ? default(int) : (int)ViewData["total"]))
                    .Scrollable(scrollable => scrollable.Height(310))
                    .Groupable(o => o.Visible(false))
                    .Filterable()
                )
            </text>
        )
        .Visible(false)
        .Render();
}

Here is my model:
public class ContactModel
{
    [ScaffoldColumn(false)]
    public int ID { get; set; }
 
    [Required]
    [DataType(DataType.PhoneNumber)]
    [DisplayName("Telefonní číslo")]
    [Display(Name = "Telefonní číslo")]
    public string Phone { get; set; }
 
    [Required]
    [DataType(DataType.Text)]
    [DisplayName("Přezdívka")]
    [Display(Name = "Přezdívka")]
    public string Nickname { get; set; }
 
    [DataType(DataType.Text)]
    [DisplayName("Jméno")]
    [Display(Name = "Jméno")]
    public string FirstName { get; set; }
 
    [DataType(DataType.Text)]
    [DisplayName("Příjmení")]
    [Display(Name = "Příjmení")]
    public string LastName { get; set; }
 
    [DataType(DataType.EmailAddress)]
    [DisplayName("Email")]
    [Display(Name = "Email")]
    public string Email { get; set; }
}

Thank you for any help.
Best regards Ivan

1 Answer, 1 is accepted

Sort by
0
Ivan
Top achievements
Rank 1
answered on 20 Aug 2012, 02:49 PM
Maybe If I make it simplier it will help some of you guys. If you don't know solution just please point me where should I look or debug to find out more info about this bug so I can fix it and post solution here. Last time I didn't say that I'm using last version of Teleric MVC Extensions which is avaible on codeplex (http://telerikaspnetmvc.codeplex.com/).

So simpliest sample would be like so:

View/Contact/Index.cshtml
@model Models.ContactModel
@{
    ViewBag.Title = "Contacts";
}
 
@Html.EditorFor(m => m.Phone)

View/Contact/EditorTemplates/PhoneNumber.cshtml
@(Html.Telerik().Grid<Models.ContactModel>()
    .Name("ContactsGrid")
    .DataKeys(keys => keys.Add(c => c.ID))
    .ToolBar(t => t.Insert().ButtonType(GridButtonType.Image))
    .Columns(columns =>
    {
        columns.Bound(o => o.ID).Hidden();
        columns.Bound(o => o.Nickname);
    })
    .DataBinding(dataBinding => dataBinding
        .Ajax()
            .Select("Select", "Contact")
            .Insert("Insert", "Contact")
    )
)

Models/ContactModel.cs
namespace Models
{
    public class ContactModel
    {
        [ScaffoldColumn(false)]
        public int ID { get; set; }
 
        [Required]
        [DataType(DataType.PhoneNumber)]
        [DisplayName("Phone number")]
        [Display(Name = "Phone number")]
        public string Phone { get; set; }
    }
}
Tags
Grid
Asked by
Ivan
Top achievements
Rank 1
Answers by
Ivan
Top achievements
Rank 1
Share this question
or