[Solved] Hiding Columns - In Form Edit Mode

[Ali]

Hi,

I need to hide some columns in the edit mode only .Any Helps??

Regards.

[John DeVight]

Hi Ali,

The grid has a client event called OnEdit.  You can implement an event handler for this and then hide the appropriate fields when the record is being edited.

Let's say I have a model defined as this:

public class Person
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Title { get; set; }
}

The grid is defined as follows:

@{
    Html.Telerik().Grid(Model)
        .Name("PeopleGrid")
        .DataKeys(keys => keys.Add(m => m.Id))
        .Columns(columns =>
        {
            columns.Bound(m => m.Name);
            columns.Bound(m => m.Title);
            columns.Command(c => c.Edit());
        })
        .DataBinding(db => db.Ajax().Update("UpdatePerson", "Home"))
        .ClientEvents(events => events.OnEdit("onEdit"))
        .Editable(editing => editing.Mode(GridEditMode.InForm))
        .Render();
}

When I click on the edit button for a row, I see a form that includes a label and input field for the Id column.  The HTML generated for the label and input field for the Id column look like this:

<div class="editor-label">
    <label for="Id">Id</label>
</div>
<div class="editor-field">
    <input type="text" value="0" name="Id" id="Id" data-val-required="The Id field is required." data-val-number="The field Id must be a number." data-val="true" class="text-box single-line">
    <span data-valmsg-replace="true" data-valmsg-for="Id" class="field-validation-valid"></span>
</div>

To hide the label and input field for the Id column, in the onEdit function, I can do the following:

<script type="text/javascript">

    onEdit = function (e) {
        $('div.t-edit-form-container').find('#Id').closest('div.editor-field').css('visibility', 'hidden').css('position', 'absolute');
        $('div.t-edit-form-container').find('#Id').closest('div.editor-field').prev('div.editor-label').css('visibility', 'hidden').css('position', 'absolute');
    }

</script>

The jQuery in the onEdit function hides the label and input field for the Id column and also sets the position to absolute so that it doesn't leave a space in the form.

Let me know if you have any questions.

Hope this helps...

Regards,

John DeVight

[Ali]

thanx  ...it worked ...

[Louis]

Thank you a lot.  It's really help.

BTW, I want to dispose fields in the table way like <td>field1</td><td>field2</td>...

It's possible In-Form ?

Have nice day.