[Solved] GridEditMode.PopUp with TemplateName("customEdit") fails

[Mattias Hermansson]

I've been looking around and found a few examples, this one for example.

But I cant get it to work, if I set it to use the standard Kendo popup editor, it works as expected. 

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

But when I use my template, it does not run/call the action defined in .update(), although I can see the change in the grid behind it, but nothing happens when "updated" button is clicked, cancel works, and that of course cancels changes.

I've probably missed something basic... Below is my code!

GarbageRouteIndex.cshml:

01.@(Html.Kendo().Grid<GarbageRouteViewModel>()
02.    .Name("garbageRoutes")
03.    .DataSource(dataSource => dataSource
04.        .Ajax()
05.        .ServerOperation(false) // Needs to be used if Grouping or filtering is done in linq-qry(on WeekSchedule or Season), cos ToDataSourceResult() won be able to revers from VM. //uni0jh
06.        .Model(model => model.Id(x => x.ID))
07.        .Read(read => read.Action("GetGarbageRoutes", "GarbageRoute"))
08.        .Update(update => update.Action("UpdateGarbageRoute", "GarbageRoute"))
09.        .Group(groups => groups.Add(model => model.WeekSchedule))
10.        //.PageSize(2)
11.    )
12.    .Columns(columns =>
13.    {
14.        columns.Bound(x => x.ID).Visible(false);
15.        columns.Bound(x => x.SortOrderIndex).Width(10).Title("^");
16.        columns.Bound(x => x.ObjectName);
17.        columns.Bound(x => x.Season);
18.        columns.Bound(x => x.WeekSchedule);
19.        columns.Bound(x => x.Description);
20.        columns.Bound(x => x.PartAreaName);
21.        columns.Bound(x => x.PartAreaId).Visible(false);
22.        columns.Command(command => command.Edit().UpdateText("Uppdatera").CancelText("Avbryt"));
23.    })
24.
25.    .ToolBar( toolbar => {
26.            toolbar.Template(@<text>
27.           <div class="toolbar">
28.                    <label class="partArea-label" for="partArea">PartArea:</label>
29.                        @(Html.Kendo().DropDownList()
30.                            .Name("partAreaFilter")
31.                            .OptionLabel("Alla")
32.                            .DataTextField("Name")
33.                            .DataValueField("ID")
34.                            .AutoBind(false)
35.                            .Events(e => e.Change("partAreaFilterChange"))
36.                            .DataSource(ds =>
37.                            {
38.                                ds.Read("GetPartAreas", "PartArea");
39.
40.                            })
41.                        )
42.                        </div>
43.        </text>);
44.    })
45.    //.HtmlAttributes(new { style = "height: 460px" })
46.    //.Editable(editable => editable.Mode(GridEditMode.PopUp)) //detta är kendos built in-variant.
47.    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("GarbageRouteEdit"))
48.    //.Groupable()
49.    .Pageable()
50.    .Sortable()
51.
52.)

GarbageRouteIndex.cshtml:

001.@model Roa.Common.DTO.GarbageRouteViewModel
002.
[e-mail](model => model.ID)
004.
005.    <div class="span8">
006.        <div class="span3">
007.            <div class="editor-label">
008.                Beskrivning
009.            </div>
010.            <div class="editor-field">
011.                @Html.TextAreaFor(model => model.Description, new { @required="*", @placeholder="Beskrivning här..." } )
012.                @Html.ValidationMessageFor(model => model.Description)
013.            </div>
014.            <div class="editor-label">
015.                Veckodag
016.            </div>
017.            <div class="editor-field">
018.                @Html.TextBoxFor(model => model.Weekday, new { @required="*" })
019.                @Html.ValidationMessageFor(model => model.Weekday)
020.            </div>
021.
022.            <div class="editor-label">
023.                Start månad
024.            </div>
025.            <div class="editor-field">
026.                @Html.TextBoxFor(model => model.StartMonth, new { @required="*" })
027.                @Html.ValidationMessageFor(model => model.StartMonth)
028.            </div>
029.            <div class="editor-label">
030.                Start dag
031.            </div>
032.            <div class="editor-field">
033.@*                @(Html.Kendo().DateTimePickerFor(model => model.StartDay)
034.                  .Value(DateTime.Now)
035.                  .Max(DateTime.Now)
036.                  .Events(e => e.Change("startChange"))
037.                  )*@
038.                @Html.TextBoxFor(model => model.StartDay, new { @required="*" })
039.                @Html.ValidationMessageFor(model => model.StartDay)
040.            </div>
041.
042.            <div class="editor-label">
043.                Start timma
044.            </div>
045.            <div class="editor-field">
046.                @Html.TextBoxFor(model => model.StartHour, new { @required="*" })
047.                @Html.ValidationMessageFor(model => model.StartHour)
048.            </div>
049.        </div>
050.        <div class="span4">
051.
052.
053.            <div class="editor-label">
054.                Slut månad
055.            </div>
056.            <div class="editor-field">
057.                @Html.TextBoxFor(model => model.EndMonth, new { @required="*" })
058.                @Html.ValidationMessageFor(model => model.EndMonth)
059.            </div>
060.
061.            <div class="editor-label">
062.                Slut dag
063.            </div>
064.            <div class="editor-field">
065.                @Html.TextBoxFor(model => model.EndDay, new { @required="*" })
066.                @Html.ValidationMessageFor(model => model.EndDay)
067.            </div>
068.
069.            <div class="editor-label">
070.                Slut timma
071.            </div>
072.            <div class="editor-field">
073.                @Html.TextBoxFor(model => model.EndHour, new { @required="*" })
074.                @Html.ValidationMessageFor(model => model.EndHour)
075.            </div>
076.
077.            <div class="editor-label">
078.                Ojämn vecka
079.            </div>
080.            <div class="editor-field">
081.                @Html.CheckBoxFor(model => model.OddWeeks, new { @required="*" })
082.                @Html.ValidationMessageFor(model => model.OddWeeks)
083.            </div>
084.
085.            <div class="editor-label">
086.                Jämn vecka
087.            </div>
088.            <div class="editor-field">
089.                @Html.CheckBoxFor(model => model.EvenWeeks, new { @required="*" })
090.                @Html.ValidationMessageFor(model => model.EvenWeeks)
091.            </div>
092.        </div>
093.        <div class="span8">
094.            <input type="file" name="files" id="files" multiple="multiple" value=" " />
095.            <p>
096.
097.            </p>
098.
099.        </div>
100.    </div>
101.

[Dimiter Madjarov]

Hi Anders,


The provided sample code seems correct. Please check the developer tools console for JavaScript errors when the update button is clicked and also the network tab to check whether the request is send or not. You could also take a look at the following Code Library, which contains a complete example on how to define a custom popup editor.

If the problem is still persisting, could you please send me a small sample project, where it is reproducing, so I could inspect it locally and assist you further? I wish you a great day!

 

Regards,
Dimiter Madjarov
Telerik

[Mattias Hermansson]

Hi again!

No errors, and no Post was done, so I started looking at the validation.

It turns out that "required"-attribute i set with value of *, in combination with false-value from model, does not make it through validation,
but wont show msg.  

@Html.CheckBoxFor(model => model.EvenWeeks, new { @required="*" })

So just removed that for Checkboxes:

@Html.CheckBoxFor(model => model.EvenWeeks)