This is a migrated thread and some comments may be shown as answers.

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

3 Answers 852 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Justing
Top achievements
Rank 1
Justing asked on 03 Dec 2012, 07:05 PM
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.

3 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 05 Dec 2012, 12:54 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Justing
Top achievements
Rank 1
answered on 06 Dec 2012, 12:09 AM

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");
})
)
0
Accepted
Alexander Valchev
Telerik team
answered on 07 Dec 2012, 02:03 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Justing
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Justing
Top achievements
Rank 1
Share this question
or