RadGrid Model Binding for Custom Edit Forms

[Angelo]

Hi,

Trying to gather some info on how to bind the model to a RadGrid when in Edit mode for a dropdown list (or even a RadDropDownList).

I have the following markup:

<telerik:RadGrid ID="rgTest" runat="server"
    AutoGenerateColumns="false"
    AllowPaging="true"
    AllowSorting="true"
    ClientSettings-EnableRowHoverStyle="true"
    OnItemCommand="rgTest_ItemCommand"
    OnDeleteCommand="rgTest_DeleteCommand"
    OnItemDataBound="rgTest_ItemDataBound"
    PageSize="10" >
    <PagerStyle Mode="NextPrevAndNumeric" />
    <MasterTableView AutoGenerateColumns="false"
        DataKeyNames="Id"
        SelectMethod="GetData"
        UpdateMethod="UpdateData"
        ItemType="Model.TestData"
        CommandItemDisplay="Top">
        <CommandItemSettings ShowAddNewRecordButton="false" />
        <Columns>
            <telerik:GridButtonColumn
                UniqueName="EditItem"
                CommandName="Edit"
                ItemStyle-Width="40"
                ItemStyle-HorizontalAlign="Center"
                ItemStyle-ForeColor="White"
                Text="Edit"
                ButtonType="LinkButton"
                ButtonCssClass="btn btn-primary btn-sm">
            </telerik:GridButtonColumn>
            <telerik:GridTemplateColumn UniqueName="Id" HeaderText="ID">
                <ItemTemplate>
                    <asp:Label ID="lblID" runat="server" Text='<%# Item.Id %>'></asp:Label>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn UniqueName="TestTitle" HeaderText="Title">
                <ItemTemplate>
                    <asp:Label ID="lblTestTitle" runat="server" Text='<%# Item.TestTitle %>'></asp:Label>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn UniqueName="TestType" HeaderText="Type">
                <ItemTemplate>
                    <asp:Label ID="lblTestType" runat="server" Text='<%# Item.TestType %>'></asp:Label>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>

        <EditFormSettings EditFormType="Template">
            <FormStyle />
            <FormTemplate>
                <label for="txtTestTitle" class="col-md-4 control-label">Title</label>
                <asp:TextBox ID="txtTestTitle" runat="server" ClientIDMode="Static" Text='<%# BindItem.TestTitle %>' CssClass="form-control" autocomplete="off"></asp:TextBox>
                <label for="ddlType" class="col-md-4 control-label">Type</label>
                <asp:DropDownList ID="ddlType" runat="server" Width="100%" CssClass="form-control" >
                </asp:DropDownList>
            </FormTemplate>
        </EditFormSettings>
    </MasterTableView>
</telerik:RadGrid>

My code behind as follows:

public IQueryable<Model.TestData> GetData()
{
    DbContext ctx = new DbContext();
    return (from c in ctx.TestData
       select c).OrderBy(a => a.Id);
}

public void UpdateWebProjectRequest(int Id)
{
    using(DbContext ctx = new DbContext())
    {
        Model.TestData td = ctx.TestData.Where(a => a.Id == Id).FirstOrDefault();

        TryUpdateModel(td);
        if (ModelState.IsValid)
        {
        ctx.SaveChanges();
        }
    }
}

protected void rgTest_ItemDataBound(object sender, GridItemEventArgs e)
{
    if(e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
        GridEditableItem editItem = (GridEditableItem)e.Item;

        // Populate the DropdownList here.
        DropDownList ddlType = (DropDownList) editItem.FindControl("ddlType");

        // Some method here to load the dropdownlist.
        var list = new List<Models.TestTypes>();
        ddlType.DataSource = lst;
        ddlType.DataValueField = "TypeId";
        ddlType.DataTextField = "TypeName";
        ddlType.DataBind();

        ddlType.SelectedValue = DataBinder.Eval(editItem.DataItem, "TestType").ToString();

    }
}

The issue I am having is that when I changed the value in the dropdownlist and invoke an update command, the new value selected on the dropdownlist is not being propagated to the model, hence, the correct data is not being saved.

I've looked at the article in this link:

http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/custom-edit-forms

But I am not able to figure out how to bind the dropdownlist value properly.

Any suggestions or ideas would be appreciated.

Thanks.

~A

 

[Viktor Tachev]

Hello Angelo,

Please examine the following article that describes in detail how you can use RadGrid and Model Binding.

• http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-binding/model-binding-and-strongly-typed-data-controls-support

Regards,
Viktor Tachev
Telerik by Progress