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

GridEditMode.PopUp with TemplateName("customEdit") fails

2 Answers 795 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mattias Hermansson
Top achievements
Rank 1
Mattias Hermansson asked on 13 Aug 2013, 01:10 PM
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. 
003.@Html.HiddenFor(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.    

2 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 14 Aug 2013, 06:21 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mattias Hermansson
Top achievements
Rank 1
answered on 14 Aug 2013, 08:21 AM
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)
Tags
Grid
Asked by
Mattias Hermansson
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Mattias Hermansson
Top achievements
Rank 1
Share this question
or