Telerik Forums
UI for ASP.NET MVC Forum
5 answers
424 views

Hi,

I looked at the example in  http://demos.kendoui.com/web/grid/editing-popup.html (ASP.NET MVC)

Kendo.Mvc.Examples.Models.ProductViewModel is a simple object,

I am interested in supporting Create and Update of an object that relates to other objects (in a Parent child manner)

For example : Lets say the grid shows  Students and a Student relates to Phones via StudentPhones
The popup should enable the user to edit/create a Student with its Phones all together.

I wonder if you can supply me  a project that shows how to handle the Create and Update in a similar scenario to the one I described.

 

Thanks in advance.

Lauri

p.s. My app is an N-Tier app using EntityFramework

 

Vladimir Iliev
Telerik team
 answered on 15 Aug 2013
1 answer
68 views
I have a grid where a filter gets set through the API automatically, but I want to be able to display what that current filter is, and allow the under to easily remove it.  I'm thinking of using MultiSelect to accomplish this purely from the standpoint of how it looks to the user and could allow them to click on that X to easily remove the filter.  But I'm not sure this is the right or even a workable approach.  I figure before I go to effort to try to implement this and go through testing, that I'd ask the experts here and see what your recommendations may be to accomplish something like this.

Any input would be most appreciated, thank you!
Vladimir Iliev
Telerik team
 answered on 15 Aug 2013
2 answers
567 views
I am having the following issue when I’m using Kendo UI Grid in partial view loaded by Ajax.ActionLink.
Sorting and everything works as long as I‘m not adding any events, but I need to use Change event in order to implement
 Master-Child grid.
After I add the event, sorting stops working, event is not firing. My test code is
Controller
public class TestKendoAjaxController : Controller
    {
        public ActionResult Index()
        {           
           return View();
       }
        public ActionResult PartialGrid()
        {
            List<TestKendoAjaxModel> result = new List<TestKendoAjaxModel>();
            result.Add(new TestKendoAjaxModel { FirstName = "Test1", LastName = "test1Last" });
            result.Add(new TestKendoAjaxModel { FirstName = "test2", LastName = "test2Last" });
            Main nn = new Main();
            nn.blah = result;
            return PartialView("_TestPartial", nn.blah);
        }
          [HttpPost]
        public ActionResult Data_Read([DataSourceRequest]DataSourceRequest request)
        {
            List<TestKendoAjaxModel> result = new List<TestKendoAjaxModel>();
            result.Add(new TestKendoAjaxModel { FirstName = "test1", LastName = "test1Last" });
            result.Add(new TestKendoAjaxModel { FirstName = "test2", LastName = "test2Last" });
            return
Json(result.ToDataSourceResult(request));
       }
   }

View

@model Johnson.OAT.MVC4.Models.Main
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
@Ajax.ActionLink("Load partial view", "PartialGrid", new AjaxOptions
{
    OnSuccess = "updatePlaceholder",
    UpdateTargetId = "result"
})
</p>

 <div id="result"></div>
<script type="text/javascript">
   function updatePlaceholder(context) {
        // the HTML output of the partial view
        var html = context.get_data();

        // the DOM element representing the placeholder
        var placeholder = context.get_updateTarget();

        // use jQuery to update the placeholder. It will execute any JavaScript statements
        $(placeholder).html(html);

        // return false to prevent the automatic update of the placeholder
        return false;
    }
</script>

Partial view

@model IEnumerable<Johnson.OAT.MVC4.Models.TestKendoAjaxModel>

 @(Html.Kendo().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(o => o.FirstName).Format("{0:d}").Width(80);
            columns.Bound(o => o.LastName).Width(200);
           
                             
        }).Sortable().Pageable(p => p.PageSizes(new[] { 20, 30, 50 })
        ).Filterable()
        .Selectable()
         .DataSource(datasource => datasource
           .Ajax()
           .Read(read=> read.Action("Data_Read","TestKendoAjax").Type(HttpVerbs.Post))
           
 )
 .Events(events => events.Change("change"))
 )


<script>
    function change(e) {
       alert("")
    }
</script>



 

Thank you in advance!

 

Halina
Halina
Top achievements
Rank 1
 answered on 14 Aug 2013
1 answer
452 views
Hi.

I currently have the following Model:
public class AwesomeDTO
{
  public string ID {get;set;}
  public string Name {get;set;}
  public string Description {get;set;}
 
}
I currently have a following partial view with a grid.
@model IEnumerable<AwesomeDTO>
 
@(Html.Kendo().Grid(Model)
    .Name("AwesomeGrid")
    .Columns(columns =>
            {
                             
                columns.Bound(u => u.Name).Title("Name").Filterable(true).Width(200);
                columns.Bound(u => u.Description).Title("Description").Filterable(false).Width(200);
                columns.Command(command => command.Custom("Manage").Click("manageUser").Text("Manage")).Title("Manage");
            }
        )
    .Pageable()    
    .Filterable(filter => filter.Enabled(true))
    .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
            .PageSize(10)
            .Model(model => model.Id(u => u.ResourceID))
            .Events(events => events.Error("onError"))
                .Read(read => read.Action("GetAwesome", "Awesome"))
       )
     )

The custom command calls the following Javascript function "manageUser" defined as follows:

function manageUser(e) {
        e.preventDefault();
 
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var result;
 
        debugger;
        $.ajax({
            url: '@Url.Action("ManageAwesoem", "Awesome")',
            type: 'POST',
            data: JSON.parse(JSON.stringify(dataItem)),
            content: 'text/html',
            success: function (data) {
                alert(data);
            },
            error: function (data) {
                alert('error:' + data);
            }
        });
    }

My Controller is as follows:
public ActionResult ManageAwesome(AwesomeDTO userToManage)
{
    return View(userToManage);
}

I would like the View to render with the AwesomeDTO properties. The step where I am not quite understanding is when and how to call the ManageAwesome view so that it renders in a new location in the browser. I do not want to expose the ID of the AwesomeDTO in the URL string and so I am looking for an alternative way to achieve this from the Kendo Grid.

Any help would be appreciated.

Thanks,
Navin
Atanas Korchev
Telerik team
 answered on 14 Aug 2013
2 answers
1.7K+ views
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.    

Mattias Hermansson
Top achievements
Rank 1
 answered on 14 Aug 2013
1 answer
133 views
Additionally to out of the box Kendo Validator features I need to:
1. style whole Kendo widgets when they are invalid
2. style labels when associated input\widget is invalid
3. and some other features...

I wan't modify Kendo source code so far as possible. So I wrote my own jQuery plugin "xxxValidator" that internally uses (applies) Kendo validator and initializes MutationObserver to react to Kendo Validator activity and perform additional tasks.

Is there "legal" and "elegant" way to attach my customized validator to pop-up\inline editor in the Grid? I look at kendoEditable and the first idea is to "override" "refresh()" function: call original refresh() and then call xxxValidator(). And in this case xxxValidator() should not call kendoValidator  on the container again if it's already present.




Atanas Korchev
Telerik team
 answered on 14 Aug 2013
4 answers
614 views
Is is possible to specify a POST action when defining items in the Kendo MVC UI Menu?

For example, I would like to include a menu item for the user to logout, which is supported by the following controller action:
(AccountController)
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult LogOff()
{
_webSecurityService.Logout();
return RedirectToAction("Index", "Home");
}


(sample.cshtml)
@(Html.Kendo().Menu()
          .Name("menu")
          .Items(items =>
          {
                  items.Add().Text("Home").Action("Index", "Home");
                  //...
                  items.Add().Text(User.Identity.Name)
                  .Items(children =>
                  {
                         //...
                        // this results in a 404 error
                         children.Add().Text("Sign out").Action("LogOff", "Account");
                  });
 
        })
)

I'm trying to replicate the out-of-box MVC sample project that looks similar to this:
(_LoginStatus.cshtml)
<text>
        Hello, @Html.ActionLink(User.Identity.Name, "Manage", "Account", routeValues: null, htmlAttributes: new {           @class = "username", title = "Manage" })!
        @using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" })) {
            @Html.AntiForgeryToken()
            <a href="javascript:document.getElementById('logoutForm').submit()">Sign out</a>
        }
</text>



Vladimir Iliev
Telerik team
 answered on 14 Aug 2013
1 answer
1.1K+ views
Hello.

I'm using the Datepicker, but it will not work when the Date has a Kind of type Local.

It renders as :

<input data-val="true" data-val-date="The field FechaInicio must be a date." data-val-required="El campo FechaInicio es obligatorio." id="FechaInicio" name="FechaInicio" type="date" value="2013-07-20T15:00:00.000Z" />

Instead of the proper way which works that is :

<input data-val="true" data-val-date="The field FechaInicio must be a date." data-val-required="El campo FechaInicio es obligatorio." id="FechaInicio" name="FechaInicio" type="date" value="15/07/2013" />
I'm using the Kendo UI MVC Wrapper, and I'm getting this weird behaviour when posting the date to the controller from javascript with:
date.toISOString()
Kiril Nikolov
Telerik team
 answered on 13 Aug 2013
1 answer
159 views
By default the KendoUI MVC project template for VS 2012 is an internet project.  After I create the project, I want to make it an intranet project(window integrated authentication).  I have done the following on the project properties:

1.  Disabled the Anonymous Authentication
2. changed Managed Pipeline Mode to Integrated.
3. Enabled Windows Authentication

but it always redirects me to http://localhost:55063/login.aspx?ReturnUrl=%2F.  Of course, the file doesn't exist.  It works when I refresh with the url.
Please let me know how to remove this redirect.

Thanks.

Yingyi
Kiril Nikolov
Telerik team
 answered on 13 Aug 2013
3 answers
168 views
Hi,

What I'm trying to do is relatively close to the Grid Editing custom editor sample. The difference in my case is that the list of categories must not be the same for all products. In fact, depending on the product properties, I want to display only a subset of all categories.
In the EditorTemplate ClientCategory.cshtml a model is defined "@model Kendo.Mvc.Examples.Models.ClientCategoryViewModel" but this model is always null. Is there a way to access the ClientCategoryViewModel in the EditorTemplate partial view ?
Or is there another way to acheive this ?

Thank you,
Regards,


Vladimir Iliev
Telerik team
 answered on 13 Aug 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?