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

[Solved] How I can to add a select control in a Grid?

1 Answer 65 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.
Deise
Top achievements
Rank 1
Deise asked on 25 Jul 2012, 02:59 PM
Hello!
I'm starting to use telerik extensions for mvc and I'm having problem to add a select control in a Grid.


I have that:
Html.Telerik()
.Grid(((BRIC.Web.ViewModel.ProcessoImportacaoViewModel)Model).gridProcessos)
.Name("GridProcessos")
.DataKeys(dkeys => dkeys.Add(a => a.Processo))
    .DataBinding(binding => binding.Ajax().Select("GridProcessos", "ProcessoImportacao"))
    .Columns(columns =>
    {
    columns.Bound(b => b.Processo).Title("Processo");
    columns.Bound(b => b.grupo).ClientTemplate(
            Html
            .Telerik()
            .DropDownList()
            .Name("ddlGrupo")
            .BindTo(new SelectList((System.Collections.IEnumerable)ViewData["Grupo"], "Id", "descricao"))
            .Enable(true)                                                  
            .ToHtmlString()
            ).Title("Grupo").HtmlAttributes(new { disabled = "false" });
    columns.Bound(b => b.IdGrupo).ClientTemplate(
        "<select id='Select_<#= Processo #>_<#= IdGrupo #>' style='width:200px;'> options='<#= grupo #>'" +                           
        "</select>"
    ).Title("Grupos");
    columns.ForeignKey(fkey => fkey.IdGrupo,(System.Collections.IEnumerable)ViewData["Grupo"], "Id", "descricao");})
.ClientEvents(clientEvents => clientEvents.OnDataBinding("OnDataBindingProcessos"))
.Sortable(sorting => sorting.SortMode(GridSortMode.SingleColumn))
.Pageable(paging => paging.Style(GridPagerStyles.NextPreviousAndNumeric).Position(GridPagerPosition.Bottom).PageSize(10))
.Filterable()
.Selectable(x=> x.Enabled(true))
.Scrollable()
I tried to insert a select of 3 different ways but anyone of them are not working.
1st - The component is shown but is not possible to select a value
2nd - The component is shown but I don't know how I can add the values do select, 'cause I need to add values from database.
3rd - The component isn't shown.

I need to bind the select component and to select a value if the field IdGrupo is different of 0.

P.S.: I attached a image of my grid.

Someone here have any idea?
Thanks and Best Regard!

1 Answer, 1 is accepted

Sort by
0
Deise
Top achievements
Rank 1
answered on 01 Aug 2012, 01:19 PM
Hi;
I found a solution to my problem.
I created a Editor Tamplete inside the folder ~/Views/Shared/EditorTemplates with the name DropDownListGroup. Then, in my model I did this:
[UIHint("DropDownListGroup")]
public string Group { get; set; }
On this way, when I'm editing the grid, the column Group is replaced automatically by the DropDownList. 
Below is my DropDownListGroup:
@model BRIC.Web.Data.Group
            
@(
 Html.Telerik().DropDownList().Name("Group")
        .HtmlAttributes(new { Name = "Group", Style = "margin:4px;width:200px" })
        .DataBinding(dataBinding => dataBinding.Ajax().Select("GetGroup", "Group"))
)
In the method OnEdit of the grid I find the property Group (string) and if it is not null I set a selected value of the DropDownList.
function OnEdit(e) {
    if (e.dataItem['Group'] != null && e.dataItem['Group'] != "") {
        $(e.form).find('#Group').data('tDropDownList').text(e.dataItem['Group']);
    }
}

Thanks.
Tags
Grid
Asked by
Deise
Top achievements
Rank 1
Answers by
Deise
Top achievements
Rank 1
Share this question
or