Click here to Skip to main content
15,903,388 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello
I am using Telerik grid in my applications view as
@Html.Telerik().Grid(Model).Name("Grid").DataKeys(o => o.Add(O => O.EmployeeId)).ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Text)).Columns(columns =>
        {
            
            columns.Bound(o => o.Employee_Name).ReadOnly().Column.Title = "Employee Name";
            
            
            columns.Template(o => @Html.DropDownList("Department_Name", new SelectList(ViewBag.Department_Name))).Width(100).Column.Title = "Dept Name";
            
            columns.Command(O =>
            {
                O.Edit();
                O.Delete().HtmlAttributes(new { onclick = "return confirm('Are you sure you wish to delete this article?');" });
            }).Width(100);
            
            
        }).DataBinding(B => B.Server()
                                     
                                            .Insert("GridInsert", "Employee")
                                                                  .Update("GridUpdate", "Employee")
                                                                  .Delete("GridDelete", "Employee"));


In this i want to disable when grid is idle. and make it editable when user click on edit command.

How can i achieve this ?

Please please please .. guide me.
Thanks in advance
Posted

1 solution

You can use the edit event for the grid and change the text box to a dropdown list in that event.

So
C#
columns.Template(o => @Html.DropDownList("Department_Name", new SelectList(ViewBag.Department_Name))).Width(100).Column.Title = "Dept Name";

would change to this.
C#
columns.Bound(d => d.Department_Name).Width(100).Title("Dept Name");

Than you would create your OnEdit event to change the text box to a dropdown and populate the dropdown with its options.

JavaScript
<script type="text/javascript">
function Grid_onEdit(e) {
    var dataItem = e.dataItem;
    var mode = e.mode;
    var form = e.form;
    if (mode == "edit") {
        var parent = document.getElementById(e.currentTarget.id)
        var deptTextBox = $(form).find("#Department_Name");
        var deptSelect = document.createElement('select');
        deptSelect.Id = "Department_Name";
        deptSelect.Name = "Departmant_Name";

        // Need to code the getting of the department names.
        foreach (var dept in departments)
        {
            deptSelect.add(dept);
        }
        parent.replace(deptTextBox.get(0), deptSelect);
    
    }

}
</script>

This code is just an example and probably won't work right out of the box but should get you started.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900