Hello:

I have a Master/Child grid structure like so:

Parent Grid:

Child Grid as DetailTemplate:

The Problem:

I have a #if{# ... #}# statement in the column ClientTemplate, however the Rating value is from the Parent Grid not the current Child Grid (Parent Grid happen has a column also named 'Rating'), to prove that it is from Parent Grid,  if I change Rating to a column that only exists in the Child grid, i.e. SubEleID, it gives error at browser, saying that SubEleID is not found.

The Question:
so what is the syntax for Rating gets the Child Grid value?
just for the sake of trying, I even tried: data.Rating, or $(this).Rating, none worked.

Please advise,
Thank you

Hi,
I am trying to use the Kendo UI Grid with ASP.NET MVC to replace an existing MVC WebGrid which displays a set of data with each row having a Submit button. The Submit button can be displayed as enabled or disabled and when pressed, the form is posted back to the Controller with the selected row identity stored in a a data item.

I can't see how to achieve this relatively simple requirement using the Kendo UI Grid.

The existing code for the MVC WebGrid is below and allows easy definition of the Submit button for each row by using the @item. syntax which is available for the WebGrid.

Is there an equivalent example for the Kendo UI Grid with MVC that shows how you display a submit button (enabled/disabled based on a row property),  submit the form, and then passback the selected row identity to the controller ?

Thanks,
Kevin Wood

@model Vsat_2.Models.AgentTeams
<div id="SearchTeams">
    <div>
        <div id="criteria">
        @Html.HiddenFor( model => model.CompanyId)@Html.HiddenFor( model => model.RegionId )@Html.HiddenFor( model => model.Selection )
        @Html.HiddenFor( model => model.SearchVal)@Html.HiddenFor( model => model.SearchCritId )@Html.HiddenFor( model => model.RowsPerPage )@Html.HiddenFor( model => model.CurrentPage )
        @Html.HiddenFor( model => model.TeamSearch.CompanyId)@Html.HiddenFor( model => model.TeamSearch.RegionId )
        Search @Html.DropDownListFor(model => model.TeamSearch.SearchCritId, Model.TeamSearch.SearchCrit) for @Html.EditorFor(model => model.TeamSearch.SearchVal)
        <input type="submit" value="Search" name="submitButton" id="Search" /> @Html.ValidationMessageFor(model => model.TeamSearch.SearchVal)<span id="Searchwait" style="visibility:hidden"> Please wait..</span>
        </div>    
        <div id="status">
            <span id="statusmessage" style="padding-left:0.5em;color:black">@Html.LabelFor(model => model.TeamSearch.SearchResult, Model.TeamSearch.SearchResult)</span>
        </div>
        <p></p>
        <div id="MainGrid" style="float:left;width:100%">
@{
        var grid2 = new WebGrid(canPage: true, rowsPerPage: Model.TeamSearch.rowsperpageid, canSort: true, defaultSort: "SearchCrit", ajaxUpdateContainerId: "grid3", pageFieldName: "TeamPage");
        grid2.PageIndex = Model.TeamSearch.page;
        grid2.Bind(Model.Teams, rowCount: Model.TeamSearch.TotalRows, autoSortAndPage: false);
        grid2.Pager(WebGridPagerModes.All, numericLinksCount: 10);

        @grid2.GetHtml(htmlAttributes: new { id = "grid3" },
                       columns: grid2.Columns(
                       grid2.Column("InternalName", header: "Agent Team", canSort: false), 
                       grid2.Column(format: @<input type="submit" @item.Disabled onclick="mySelection='@item.Identity'" value="Select Team" name="submitButton" id="Change" style="font-size:90%" />),
                       grid2.Column("Reason", canSort: false) 
                       @*grid2.Column("Name", header: "ID", canSort: false) *@
                       ));
        }
        </div>
    </div>
</div> 

<script>
    var mySelection;

    $(function () {
        $("#Change").live('click', function () {
            $("#Audit").html(""); //Clear Audit Screen
            $("#Search").css({ "visibility": "hidden" });
            $("#Searchwait").css({ "visibility": "visible" });
            $("#Selection").val(mySelection); //Set the Selection field
        });
    });

$(function () {
        $("#Search").live('click', function () {
            $("#Audit").html(""); //Clear Audit Screen
            $("#Search").css({ "visibility": "hidden" });
            $("#Searchwait").css({ "visibility": "visible" });
        });
});


</script>

Hi,

I have a grid that is populated from my Controller. My controller gets its data from an external webservice, and then populates a list in my controller, and then the view is fed with this list.

This is my controller:
And this is my grid (cshtml):
Populating the grid when the page is loaded is no problem, but I'd like to update my grid with a new list of units whenever the user clicks the checkbox. Any help would be appreciated :)

Dear Kendo Team,

I'm using a simple grid, which I binded with few thousand records, and added a Change event. Below is the code.
@(Html.Kendo().Grid(Model.OtherCompanyVesselsModelList)
                      .Name("grdOtherCompanyVessels")
                      .Columns(columns =>
                      {
                          columns.Bound(p => p.ID).Visible(false).Width(50);
                          columns.Bound(p => p.VesselName).Width(150);
                          columns.Bound(p => p.IMONo).Width(100);
                      })
                              .Pageable(paging => paging.PageSizes(new int[3] { 50, 100, 500 }))
                              .Sortable()
                              .Selectable()
                              .Navigatable()
                              .Scrollable(scrollable => scrollable.Height(480))
                              .Reorderable(reorder => reorder.Columns(true))
                              .Resizable(resize => resize.Columns(true))
                              .Events(e => e.Change("onChange"))
                              .Filterable()
                              .DataSource(dataSource => dataSource
                                                            .Ajax()
                                                            .Read(read => read.Action("FetchOtherCompanyVesselDetails", "OtherCompanyVessels"))
                                                            )
                              )

Now in my Change event, I just kept one alert.

function onChange(e) {
        alert('In Change');
    }

But when I run the page in FireFox 19.0 and selects any row in the grid, it shows alert after long time(approx 10-15 seconds), and second time when I select any other row the FireFox itself stops responding. Finally I've to close FireFox.
And the same thing if I execute in Chrome 24.0, it works perfectly.
And in IE 9, the change event executes twice and prompt alert twice.

Grateful, if you assist me here.
I'm using Kendo.Mvc v4.0.30319 with VS2012.

Regards,
Suraj Kumar Singh.

I have an aggregate on the quantity column returning the sum. Is it possible for it to only return the total for one groupings instead of returning a total for each of my groupings? I would just like a total for the ShippedDate grouping.
        
/// Code ///

Hello all Kendo experts. I'm facing an issue here with MVC Grid batch update. Your help will be appreciated here. So here is my scenario.

1. I'm using ASP.NET MVC 4 with Kendo UI. I'm using a grid  with batch update.
2. There are some rows, that the user types in value (numeric), and there are some rows, that are calculated fields, and are not editable.

Please bear in mind, it's the same column, but rows are editable or not (given the condition). I've alredy acheived at this point.

(See screenshot attached).

What I'm looking for is.

On Save Changes event, calculate the values of the other rows.
The problem I'm facing is, since on the natch update, these rows were not "Edited" by the user, these values are not refreshes at the controller.
So, basically what I'm looking for, is for the same type of column, make some rows non-editable, but refresh with calculated values on the Save changes.

In the screeshot supplied, the rows in blue are my calculated rows.

Any help please?

Greetings, I've been trying to set up a modal popup Window that contains a treeview from which a user can select a single item and then close the window.  

I basically took the code we use all over our site for modal popup windows (without errors) and then just tried putting a treeview in it.   In Firefox the error is not explicitly thrown, the tree itself renders, but anything you tried to put in the window underneath the treeview does not render at all.  In Chrome, the window renders but not the tree and no error is thrown (i.e. you get an empty window).  In IE9 (9.0.8112.16421) you get an error in jQuery-1.8.2.min.js as soon as you try to open the window.  The error says "0x80020101 Microsoft JScript Runtime Error:  could not complete the operation due to error 80020101" (useful, I know).  The window never opens at all.  I am running Windows 7.

I created a dummy test page on my site that includes only the kendo and jQuery libraries/css/js files in the layout and removes everything not involved with housing the treeview in the window and I still get the same error.

The error occurs before calling the controller method to get the data to populate the tree (and I have another treeview that is NOT in a window using the same controller method which one works properly, and if I run in firefox it does actually call the method and populate the tree, just nothing below the tree like buttons - so I am positive the problem is not the controller method).  You can substitute any data you want if you try to repro this since the code below is data agnostic, just give it's type a property called TagName or substitute your own value of DataTextField.

If I remove the code defining the treeview and replace it with a simple "hi", I do not get the error, which proves the problem is the tree + window combination (because remember, the exact same tree works perfectly outside of the window).  

My code is below, distilled down to the absolute simplest case, still throwing the same error in IE9:
(I even got rid of the select handler and the confirm/cancel buttons just to try to get rid of the error)

The versions of jQuery & jQueryUI we include are the full downloaded library from jQuery - we have not customized them in any way.  The specific version number that we are using are ones we've had to upgrade to because of error conflicts with other between other Kendo controls and jQuery.  I suspect something similar is at play here.

If there is a specific way I need to set up the window to support this functionality please let me know, or if there is a problem with the interaction of the window + tree + jQuery that needs to be fixed can we please get a patch for it ASAP?  There are a bunch of places in our app where we'll need to have a tree in a popup window like this.

Thanks in advance, please let me know if you need anything else from me to diagnose the issue!

@model NeedleFinder.WebUI.Areas.CaseMgmt.Models.Tag.ManageTagsViewModel
@using Kendo.Mvc.UI
@{
    ViewBag.Title = "TreeWindowPopup";
    Layout = "~/Views/Shared/_TestLayout.cshtml";
}
<div>  <input type="button" name="btnChooseParent" value="Select" onclick="openParentTagList();" />
</div>
<script id="parentTagSelection" type="text/x-kendo-template">

  @(Html.Kendo().TreeView()
        .Name("trvParentTag")
        .DataTextField("TagName")
       .DataSource(dataSource => dataSource
                                      .Read(read => read
                                                        .Action("GetTagsForTree", "Tag", new { area = "CaseMgmt" }))
        )
   )  

     
</script>
  
<script type="text/javascript">

    function openParentTagList() {
        var kendoWindow = $("<div />").kendoWindow({
            title: "Select parent tag",
            resizable: false,
            modal: true,
            height: 500,
            width: 400
        });

        kendoWindow.data("kendoWindow")
            .content($("#parentTagSelection").html())
            .center().open();

       
        return false;
    }
   
    </script>


My layout looks like this:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
     <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/redmond/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <!-- PROTOTYPE CSS -->

    <link href="@Url.Content("~/Content/Kendo/2013.1.319.340/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Kendo/2013.1.319.340/kendo.default.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Kendo/2013.1.319.340/kendo.web.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Kendo/2013.1.319.340/kendo.aspnetmvc.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.10.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jQuery.Validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

    @if (false)
    {
        <script src="@Url.Content("~/Scripts/jquery-1.5.1-vsdoc.js")" type="text/javascript"></script>
    }
</head>

    <body>
       
        @RenderBody()
</body>
</html>

Hello All,

I set up a parent/child grid much like the Hierarchy demo.  In my case I wanted to make both grids editable (inline).  But I kept getting an invalid template error on my child grid as soon as I added the .Editable() section to it.  After some investigation and commenting/uncommenting things on the child grid and my model I discovered that the error was related to my Required validator message on the model.  My validation message was "The field '{0}' is required."  It seems like the single quotes in the validation message aren't being escaped properly when the template is created or something like that because when I changed the validation message to "The field {0} is required." everything works fine.  So I'm able to get around the issue, but I thought I'd let you know in case this is something that can be fixed in the core code.  Thanks!

Regards,
Brian

In my application, I frequently use multiple DropDownLists on the same page. Most of the time, the data sources for those lists (which are connected to a SQL Server database) load quickly and there's no problem. Every once in a while, however, the load hangs and all the dropdowns show the spinning 'loading' icon. Sometimes they resolve on their own and finish loading. Sometimes they throw one of several errors that I know relate to simultaneous SQL transactions running in the database (I apologize, I don't have the error text for any of them at the moment, but I will update this thread if and when I do).

Anyone know about this issue or have suggestions on how I can avoid the problem and improve performance?

While working through a process of batch editing a database tables that
had a timestamp field in each row for concurrency checking. It was not
immediately apparent the the return value for the update could be the
same as that for the create procedure.

Could you update your
documentation to explain that during an update you can return the
results of the update process to the grid.
so using generics the insert process can be:-

public
static DataSourceResult AddChanges<TEntity>([DataSourceRequest]
DataSourceRequest request, System.Data.Entity.DbContext context,
System.Web.Mvc.ModelStateDictionary modelState,
System.Collections.Generic.IEnumerable<TEntity> dbes)
where TEntity : class
{
   var results = new System.Collections.Generic.List<TEntity>();
   if (dbes != null && modelState.IsValid)
   {
      foreach (var dbe in dbes)
      {
         if (AddChanges<TEntity>(context, modelState, dbe))
            results.Add(dbe);
      }
   }
   return results.ToDataSourceResult(request, modelState);
}

and the update process can also be:-

public
static DataSourceResult SaveChanges<TEntity>([DataSourceRequest]
DataSourceRequest request, System.Data.Entity.DbContext context,
System.Web.Mvc.ModelStateDictionary modelState,
System.Collections.Generic.IEnumerable<TEntity> detached)
   where TEntity : class
{
   var results = new System.Collections.Generic.List<TEntity>();
   if (modelState.IsValid)
   {
      foreach (var dbe in detached)
      {
         if (SaveChanges<TEntity>(context, modelState, dbe))
            results.Add(dbe);
      }
   }
   return results.ToDataSourceResult(request, modelState);
}


NOTE the return of the results from the Save process

so in a controller the create and edit ActionResults would like :-
[AcceptVerbs(HttpVerbs.Post)]
public virtual ActionResult ProductPricingClientCreate([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<ProductPricing> prices)
{
   return Json(PS.Common.DataAccess.AddChanges<ProductPricing>(request, db, ModelState, prices));
}

[AcceptVerbs(HttpVerbs.Post)]
public virtual ActionResult ProductPricingGridUpdate([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<ProductPricing> prices)
{
   return Json(PS.Common.DataAccess.SaveChanges<ProductPricing>(request, db, ModelState, prices));
}