Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

kendo mvc4 grid popup edit and add

8 Answers 1023 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chrys
Top achievements
Rank 1
Chrys asked on 13 Feb 2013, 02:37 PM
In a kendo grid is it possible to pick and choose which fields from the given model show in the popup form when popup edit mode is enabled (i.e. i have 10 properities in my model that is past to my grid and I only whish to show 5 specific ones)? How would I go about doing this if it is possible.

8 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 15 Feb 2013, 11:38 AM
Hi Chrys,

I would suggest to use custom PopUp editor in which you can customize to include only the required fields - please check the example below:

//define the custom popup editor template
editable: {
    mode: "popup",
    template: kendo.template($("#customPopUpTemplate").html())
}

<!--//Define the popup template -->
<script id="customPopUpTemplate" type="text/x-kendo-template">
    <div class="k-edit-label">ProductName: </div>
    <div class="k-edit-field">
        <input name="ProductName" required class="k-textbox"/>
    </div>
     
    <div class="k-edit-label">Discontinued: </div>
    <div class="k-edit-field">
        <input name="Discontinued" type="checkbox" />
    </div>
</script>


Kind Regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Chrys
Top achievements
Rank 1
answered on 18 Feb 2013, 09:33 PM
I did this through building the control html:  
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("AddEditUser"))

Which is great but I just found out my add and edit need to be different templates. How do I load the correct template.


@(Html.Kendo().Grid(Model)
.Name("UsersGrid")
.Columns(columns =>
{
    columns.Bound(currentUser => currentUser.UserName);
    columns.Bound(currentUser => currentUser.Email);
    columns.Bound(currentUser => currentUser.CreatedDate);
    columns.Bound(currentUser => currentUser.FirstName);
    columns.Bound(currentUser => currentUser.LastName);
    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(100);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("AddEditUser"))
.Pageable(pages => pages.PageSizes(true))
.Sortable()
.Filterable()
.Scrollable()
.Groupable()
.DataSource(datasource => datasource
    .Ajax()
    .ServerOperation(false)
    .Model(model => model.Id(user => user.UserName))
    .Create(update => update.Action("AddUser", "Account"))
    .Update(update => update.Action("EditUser", "Account"))
    .Destroy(update => update.Action("DeletUser", "Account"))
    )
    )
Here is my grid sofar
0
Vladimir Iliev
Telerik team
answered on 19 Feb 2013, 07:07 AM
Hi Chrys,

 
You can use the Edit event of the Grid to check if the current model is new to modify the template (for example you can include all required fields for both Edit and Add and hide some of them based on current operation) - please check the example below:

function onEdit(e) {
    debugger;
    if (!e.model.isNew()) {
        //Find the required fields and remove them
        //the e.container is the PopUp window
        //e.container.find(.....
    }
}
Kind Regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gerry
Top achievements
Rank 1
answered on 13 Mar 2013, 09:39 PM
Please post page including grid and template.

Thanks

Gerry
0
Accepted
Vladimir Iliev
Telerik team
answered on 15 Mar 2013, 11:16 AM
Hi Gerry,

Please find the example Grid code and the example PopUp editor template below:

Grid code:

@(Html.Kendo().Grid<KendoMVCWrappers.Models.Person>().Name("persons")
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model=>model.Id(m=>m.PersonID))
            .Read(read => read.Action("GetPersons","Home"))
            .Update(update=>update.Action("UpdatePerson","Home"))
            .Create(create=>create.Action("CreatePerson","Home"))
    )   
    .ToolBar(t => t.Create())
    .Columns(columns =>
    {
        columns.Bound(c => c.PersonID).Width(200);
        columns.Bound(c => c.Name);
        columns.Command(cmd => cmd.Edit());
    })      
    .Events(e => e.Edit("onEdit"))
    .Pageable()
    .Sortable()
    .Editable(ed=>ed.Mode(GridEditMode.PopUp).TemplateName("Person"))           
)
 
<script>   
    function onEdit(e) {
        //if current model is not new then remove the Name editor
        if (!e.model.isNew()) {
            //Find the required fields and remove them
            //the e.container is the PopUp window
            e.container.find(".nameEditor").remove();
        }
    }
</script>

PoUp editor template (under the EditorTemplates folder):
@model KendoMVCWrappers.Models.Person
 
This is customized Person edit template
<br />
@Html.HiddenFor(model => model.PersonID)
 
<div class="nameEditor">
    <div class="editor-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>
</div>
<div class="birthDateEditor">
    <div class="editor-label">
        @Html.LabelFor(model => model.BirthDate)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.BirthDate)
        @Html.ValidationMessageFor(model => model.BirthDate)
    </div>
</div>


Kind Regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Chrys
Top achievements
Rank 1
answered on 05 Apr 2013, 02:35 PM
So how would I handle dropdowns in the editor template. Every time my editor template is intialized my selectlist for my dropdowns are null. Do I need to set up an empty list and populate on the dropdown on edit in jquery?

Here is my grid: 
@(Html.Kendo()
      .Grid(Model)
      .Name("MediaIterations")
      .HtmlAttributes(new { @style = "primaryGridStyle" })
      .Columns(columns =>
      {
          columns.Bound(form => form.Date).Format("{0:mm/yyyy}").Title("Month");
          columns.Bound(form => form.Name).Title("Ad Name");
          columns.Bound(form => form.TopicDesc).Title("Message Topic");
          columns.Bound(form => form.TypeDesc).Title("Media Type");
          columns.Bound(form => form.OutletName).Title("Media Outlet");
          columns.Bound(form => form.TimesAdRan).Title("Runs");
          columns.Command(command => { command.Edit(); command.Destroy(); });
      })
      .Editable(edit => edit.Mode(GridEditMode.PopUp).TemplateName("AddEditMediaForm"))
      .ToolBar(toolbar => toolbar.Create())
       .Events(e => e.Edit("onEdit"))
      .DataSource(datasource => datasource
      .Ajax()
      .ServerOperation(true)
      .Model(model => model.Id(form => form.Id))
      .Create(create => create.Action("AddMediaForm", "Form", new { planActivityId = ViewBag.planActivityId }))
      .Destroy(destroy => destroy.Action("DeleteMediaForm", "Form", new { planActivityId = ViewBag.planActivityId }))
      .Update(destroy => destroy.Action("DeleteMediaForm", "Form", new { planActivityId = ViewBag.planActivityId }))
      )
      )
Here is my editor template in the editortemplates views folder:

@model Papr2WebMvc4.Models.PiprForms.MediaForm
<h2>Edit Media</h2>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
 
    <fieldset>
        <legend>MediaForm</legend>
        <div>
            <label>Month ads ran @Html.Kendo().DatePickerFor(model => model.Date).Format("mm/yyyyy")</label>
            <label>Ad Name @Html.TextBoxFor(model=>model.Name)</label>
        </div>
        <div>
            <label>Message Topic: @Html.DropDownListFor(model=>model.TopicId,Model.TopicsList)</label>
        </div>
    </fieldset>
}
Model.TopicsList is null when the template is being intialized causing an exception.

0
Vladimir Iliev
Telerik team
answered on 08 Apr 2013, 05:32 AM
Hi Chrys,

 
Your last question is not related to the original topic of this support conversation, so please open a new support thread for it. In this way you can be sure that your query will reach the corresponding staff member in time and will be answered faster and accurately.

Kind regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Almond
Top achievements
Rank 1
answered on 11 Apr 2013, 04:36 AM
Hello Vladimir,

I just downloaded the new version of the KendoUI and is very much interested in your product. I would just like to inquire based on your code below:
<div class="nameEditor">
    <div class="editor-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>
</div>
<div class="birthDateEditor">
    <div class="editor-label">
        @Html.LabelFor(model => model.BirthDate)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.BirthDate)
        @Html.ValidationMessageFor(model => model.BirthDate)
    </div>
</div>
Would there be any chance to have the fields side by side meaning the display is on the saw row?  I have a concern as most of the popup template i am seeing is basing just on a two (2) column layout basically the description/label for the field and the Editor for the Field.  

I saw in one of your post that you were able to do it, particularly in the screencast that you showed located at http://screencast.com/t/Mi1EdykN could you please help me on how to go about  it as i have a table which has a lot of fields and having it a just a single or two colums will really make it a long form in the pop up template I really do hope you can help me.

Thanks in advance and keep up the good work :D

regards,
almond
Tags
Grid
Asked by
Chrys
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Chrys
Top achievements
Rank 1
Gerry
Top achievements
Rank 1
Almond
Top achievements
Rank 1
Share this question
or