How to Edit Popup on Add New Record (toolbar.create())

[Justing]

How do I change the template that is used on the popup that is displayed when the Add New Record option is clicked on the Kendo Grid? For example, I would like to change the "Edit" title of the popup window as well as not display certain data items as editable, such as the ID. I've looked all over on the forums and cannot find any way to do this.

[Alexander Valchev]

Hi Justin,

You can disable the editing of certain fields in the DataSource model. If a field is defined as editable: false it will not appear in popup editor. As an example:

schema: {
    model: {
        fields: {
            foo: { type: "number", editable: false }
        }
    }
}

To change the title of the editor window I suggest to hook up to the edit event of the Grid and set it in the following way:

edit: function(e) {
    e.container.data("kendoWindow").title("Custom Title");
}

In case you want to modify the inner elements of the editor window please use the template option. Have in case a custom template is used the developer is responsible for creating the MVVM bindings of editor inputs.

Regards,
Alexander Valchev
the Telerik team

[Justing]

How would I do this with the Extensions Razor methods? I used the code below which runs fine, but still displays the Id field as editable.

@(Html.Kendo().Grid(Model.Customers)

.Name("CurrentCustomersGrid")

.Columns(col =>

{

    col.Bound(p => p.FirstName);

    col.Bound(p => p.LastName);

    col.Bound(p => p.StreetAddress);

    col.Bound(p => p.City);

    col.Bound(p => p.State);

    col.Bound(p => p.Zip);

    col.Bound(p => p.Phone);

    col.Bound(p => p.Email);

})

.ToolBar(toolbar => toolbar.Create().Text("Add a new Customer"))

.Editable(editable => editable.Mode(GridEditMode.PopUp))

.DataSource(dataSource => dataSource

    .Ajax()

    .Model(model =>

    {

        model.Field(p => p.FirstName);

        model.Field(p => p.LastName);

        model.Field(p => p.StreetAddress);

        model.Field(p => p.City);

        model.Field(p => p.State);

        model.Field(p => p.Zip);

        model.Field(p => p.Phone);

        model.Field(p => p.Email);

        model.Field(p => p.Id).Editable(false);

        model.Id(p => p.Id);

    })

    .Create(update => update.Action("AddNewCustomer", "Order"))

    .Destroy(update => update.Action("RemoveCustomer", "Order"))

    )

.Selectable()

.Events(e =>

{

    e.Change("UpdateCustomer");

    e.Edit("RenameWindow");

})

)

[Alexander Valchev]

Hi Justin,

The approach is a little different if you use the MVC wrappers. To prevent the editor to appear you have to set the field as [ScaffoldColumn(false)] in the model.

//model
[ScaffoldColumn(false)]
[DisplayName("Product name")]
public string ProductName
{
    get;
    set;
}

This will make the field hidden both in the Grid and in the PopUp editor. To make the field visible in the Grid, but not in the editor you should set the Visible property of the corresponding column.

.Columns(columns => {
    columns.Bound(p => p.ProductName).Visible(true);
    columns.Bound(p => p.UnitPrice).Width(140);
    columns.Bound(p => p.UnitsInStock).Width(140);
    columns.Bound(p => p.Discontinued).Width(100);
    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
})

The DataSource:

.DataSource(dataSource => dataSource
    .Ajax()
    .Events(events => events.Error("error_handler"))
    .Model(model => {
        model.Id(p => p.ProductID);
        model.Field(p => p.ProductName).Editable(false);
    })
    .Create(update => update.Action("EditingInline_Create", "Grid"))
    .Read(read => read.Action("EditingInline_Read", "Grid"))
    .Update(update => update.Action("EditingInline_Update", "Grid"))
    .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
)

Kind regards,
Alexander Valchev
the Telerik team