GridEditMode.PopUp with TemplateName("customEdit") fails

3 posts, 0 answers
  1. Mattias Hermansson
    Mattias Hermansson avatar
    24 posts
    Member since:
    May 2010

    Posted 13 Aug 2013 Link to this post

    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. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2277 posts

    Posted 14 Aug 2013 Link to this post

    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!
  3. Mattias Hermansson
    Mattias Hermansson avatar
    24 posts
    Member since:
    May 2010

    Posted 14 Aug 2013 Link to this post

    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)
Back to Top