My upload works but fires the error event and not success.
the controller returns a empty contentresult, I get no server or js errors. Upload fires error event and shows retry, yet image is uploaded and saved to database

any help. thanks

Hi everyone,

I have some problems on using Kendo UI Grid. The first problem is when I click on page number at bottom tool bar of grid, the grid was loading for data base on page index; but while data is loading, I just suddenly clicked on another page number, then the grid is mess up with data from page index; data of this page index is viewed for data of other page index, and the page number buttons also changed automatically. It was just look like a real mess on the grid.

EG: If I click on page index 10, and while data is loading, I suddenly click on page index 6. Then the number 6 is change to red color, but the data is viewed for page 10.

EG: If grid is viewing data of page index 1, and I click page 10. While data is loading for page, I click on page 6. Then the data is viewed for page 10, but the page number button is changing red color at page 1 then jump at page 6 and then jump at page 10.

It just look like a graphic error on Kendo UI Grid. So I end up here to ask for a help.

My solution is disable all page index buttons while data in grid is loading. For example, if click on page 10 then other page number from 1 - 100 must be disable except page 10. But if the grid is finished loading, then all page number must be re-enable.

Is there JavaScript function to detect while Kendo Grid is loading data, and how to disable page index buttons, and how to re-enable page index buttons?

I need your help on my issue.

Tri

This code library project (http://www.kendoui.com/code-library/permalink/NkytUzlZ1ESWI9C7cOx7MQ) works fine with the 2012.2.913 version of the MVC wrapper and script library, but it doesn't work with the 2013.1.319 version of the MVC wrapper and script library.

The thing that i've noticed with this version of the wrapper is the ModelState object is not being serialized properly by the .ToDataSourceResult() method and it returns a null value, in turn the .Json() method is returning an empty result set to the client.

Is this a bug with the .ToDataSourceResult() method? or is there a new way to return ModelState information that I'm not aware of?

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>