Edit Dropdown field on edit click

Question

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 22-Sep-11 0:17am

Member 8100743

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

GateKeeper22 · Answer 1 · 2011-12-28T08:54:00

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.