I have a grid with 'Age' as one of the columns. By default the null values showed as 'null' so I modified the template use a non-breaking space instead. The problem is, no matter if there is no template, or I use a template with ' ' (single space) or nbsp, sorting treats null and 0 the same so the resulting sorted column can display as [null, null, 0, null, 0, 0, 1, 2, 3, 4...].  I would think null should appear before 0.

Is there a way to enforce a sort order of [null/undefined, 0, 1, 2, 3...] ?

Possible Bug: Internet Explorer and Chrome sort the values differently. Being an age colum, the numbers are grouped correctly but withing the 'Age = 15 rows' the order is not the same.  The orders are reversed from each other as far as I can tell with my limited testing.

I have an array of JSON objects being returned from a server that looks something like the following:

[{State: Finished, ID: 1234, Owner: John}, {State: Finished, ID: 5678, Owner: Joe}, {State: Active, ID: 8765, Owner: Jane}, {State: Active, ID: 4321, Owner: Jill}]

I would like to put this in a hierarchy Kendo UI grid (NOT groupable but rather as shown at http://demos.kendoui.com/web/grid/hierarchy.html) with the master record being State (Finished, Active) and the detail records being the rest of the JSON object each "state" is associated with. Since there are no master/detail relationships, per se, I don't think the grid detailInit function can work here (unless I create my own pseudo master/detail relationship for this purpose?), but please correct me if I'm wrong. In any event, let me know if what I'm is even possible without jumping through too many hoops to get to the end to get there. Having a small working example here or in JSFiddle would be phenomenal too. :) Thanks.

I have a grid with enabled  autoSync: true in the data source. I need to update the item Id after create otherwise I can't delete the item without refreshing the grid. Is there any solution for this ?

Hi,

I am using Kendo UI async upload for uploading files to our storage.

I am retrieving the Modified file name after each upload and return to the UI. (for unique  identification)

Since I am having multiple upload I need a facility to delete any row after uploading it. (which will delete from the storage using the controller method)

but when I try to delete the second row onwards I am getting the concatenated file names in the controller instead of the selected file name.

So I tried different things. but no luck. (including the onComplete(e) function given below)

So all I need is find the index of the Remove button clicked. Then I can find the actual <li> element and set its value as the corresponding file name.

Please help.. Please let me know if you need any more information. Thanks.

This is my code :

<section>
<script>
    function onSuccess(e) {
        if (e.operation == 'upload') {
            if (e.response.data != '') {
                $('.k-upload-files.k-reset').each(function () {
                    $(this).find('span.k-filename').each(function (index) {
                        var current = $(this);
                        if (current.children().size() > 0) {
                            var fileName = e.response.data[0].FileName;
                            if (current.children().size() == 1 && index == 0) {
                                $(this).text('');
                                $(this).text(fileName);
                            }
                            else if (current.children().size() <= index) {
                                $(this).text('');
                                $(this).text(fileName);
                            }
                        }
                    });
                });
            }
        }
    }

    function onComplete(e) {
        $('.k-upload-files.k-reset').each(function () {
            $(this).find('span.k-filename').each(function (index) {
                var current = $(this);
                var fileName = current.text();
                if (fileName != '') {
                    if (e.files != undefined) {
                        if (e.files[index] != undefined) {
                            e.files[index].name = fileName;
                        }
                    }
                }
            });
        });
    }

    function onFileRemove(e) {
        // Here I need to find the index of the Remove button clicked <li>.
        var fileName = $("span.k-filename").text();
        if (fileName != '') {
            e.files[0].name = fileName;
        }
    }
</script>

<div>
        @(Html.Kendo().Upload()
        .Name("files")
        .Messages(msg => msg
            .DropFilesHere("Please drop the files here to upload..")
            .Select("Please select the file to upload by clicking the Select File button..<br /><br />")
            .StatusUploaded("File Successfully Uploaded to Azure Storage..      File Name : ")
            .StatusFailed("File Uploading Failed..")
            .StatusUploading("Uploading the file now....."))
        .ShowFileList(true)
        .Multiple(true)
        .Async(a => a
            .Save("Save", "Upload")
            .AutoUpload(true)
            .Remove("Remove", "Upload"))
                .Events(events => events
                     .Success("onSuccess")
                     .Complete("onComplete")
                     .Remove("onFileRemove")
                 )
        )
    </div>
</section>

Controller

=======

public ActionResult Save(IEnumerable<HttpPostedFileBase> files)
        {
            // getting the filename after uploading and send back to the client.
            return Json(
               new
               {
                   status = 1,
                   data = new[] {
                        new { FileName = fileName }
                    }
               }, "text/plain");
        }

        public ActionResult Remove(string[] fileNames)
        {
            var errors = new List<string>();
            if (fileNames != null)
            {
                foreach (var fileName in fileNames)
                {
                    errors = DeleteFroStorage(filename); //here I am getting myfile4V_6.txtmyfile4V_7.txt” when I upload 2 txt files instead of the selected file name
                }
            }

            return Json(
              new
              {
                  status = 1,
                  data = new[] {
                        new { Error = errors }
                    }
              }, "text/plain");
        }

My rendered html looks like this.

  <div class="k-widget k-upload">
    <div class="k-dropzone">
      <div class="k-button k-upload-button">
        <input id="files" name="files" type="file" data-role="upload" multiple="multiple" autocomplete="off" />          
      </div>
      <em>Please drop the files here to upload..</em>
    </div>
    <ul class="k-upload-files k-reset">
      <li class="k-file">
        <span class="k-icon k-success">File Successfully Uploaded to Azure Storage..      File Name : </span>
        <span class="k-filename" title="myfile4.txt">myfile4V_6.txt</span>
        <button type="button" class="k-button k-button-icontext k-upload-action">
          <span class="k-icon k-delete"></span>Remove
        </button>
      </li>
      <li class="k-file">
        <span class="k-icon k-success">File Successfully Uploaded to Azure Storage..      File Name : </span>
        <span class="k-filename" title="myfile4.txt">myfile4V_7.txt</span>
        <button type="button" class="k-button k-button-icontext k-upload-action">
          <span class="k-icon k-delete"></span>Remove
        </button>
      </li>
    </ul>
  </div>

Hello,

I'm getting following error on menu item mouse hover event:
Uncaught TypeError: Cannot call method 'open' of undefined  kendo.web.min.js:20

Where can I get full (not minimized) versions of kendo js files?

Thank you in advance

We are using Kendoui on a project to rewrite an existing Adobe Flash UI in HTML 5. Initial results are very promising. However, the Upload component treats HTTP 200 OK as an error if the response is not empty, but the file has actually uploaded successfully. Since we have other client code that uses the same server to upload files, we are not able to change the server to send an empty response. Is there a way to configure a response handler to validate the response or simply treat HTTP 200 OK as success regardless of the response?

Hi - I've been following your excellent guide for using a custom icon (http://docs.kendoui.com/getting-started/mobile/icons) but haven't been able to get this to work.  I've downloaded a font from Fontello as suggested and have added the following style rules:

I have the following markup which should be displaying the custom icons:

When I try to view my page, I see the tabstrip but not the custom icons, just two square buttons.  Any suggestions as to what I'm missing would be appreciated.

Thanks!

Hi,
I have to send some additional parameters in the header of my request for authentication purposes for which I need to call the before send function. As there is no direct way to override this method in Razor so I have added a script after the @Html.Kendo().Grid() but the issue is that the first time the request is sent before the script is executed. Below is my code snippet 

@(Html.Kendo().Grid<TEST.ViewModel>()
      .Name("Grid")
      .TableHtmlAttributes(new {Class="kendoGrid"})
      .Columns(columns =>
      {
          columns.Bound(a => a.ContactPerson)
              .Title("Name");
          columns.Bound(a => a.CellPhoneNumber)
              .Title("Mobile Number");
          columns.Command(c =>
          {
              c.Edit();
              c.Destroy();
          });
      })
      .Sortable()
      .Pageable()
      .Filterable()
      .Resizable(resize => resize.Columns(true))
      .DataSource(dataSource => dataSource
        .Ajax()
            .Model(model =>
            {
                model.Id(a => a.Id);
            })
            .Read(read => read.Url("../api/User").Type(HttpVerbs.Get))
            .Destroy(destroy => destroy.Url("../api/User").Type(HttpVerbs.Delete))
      )
    )


<script>
    $(function () {
        var grid = $("#Grid").data("kendoGrid");

        grid.dataSource.transport.options.read.beforeSend = function (req) {
            req.setRequestHeader('Authorization', 'Basic abc:123');
        };


        grid.dataSource.transport.options.destroy.beforeSend = function (req) {
            req.setRequestHeader('Authorization', 'Basic abc:123');
        };

        // WebAPI needs the ID of the entity to be part of the URL e.g. DELETE /orionws/Agent/80
        grid.dataSource.transport.options.destroy.url = function (data) {
            return "../api/User/" + data.Id;
        };
    });
</script>

Hi
We are using Kendo (v2012.3.1315) with the jQuery 1.8.2 and jQuery UI 1.10.1
We also tried Kendo 2012.3.1114 (Q3 2012) - jQuery 1.8.2 and  custom combined script file from Kendo Custom Download  but it did not work.
We have an error when running our site in IE 9 or IE 10.
"SCRIPT5007: Unable to get value of the property 'clone': object is null or undefined" with dots in the web page.
The charts work fine in FireFox.
Included the following script files :

    <script type='text/javascript' src="@Url.Content("~/Scripts/jquery-1.8.2.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.10.1.js")" ></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/MicrosoftAjax.js")" ></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" ></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/MicrosoftMvcValidation.js")" ></script>
    <script type='text/javascript' src="@Url.Content("~/Scripts/kendo.all.min.js")"></script>
    <script type='text/javascript' src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>

Let me know how to work around this issue with Kendo Charts in IE

Thanks
KendoUser

Hi,

I am looking at building a Mobile Dashboard.

Not sure if kendo ui for mobile has any controls for it. How do i go about building a Dashboard which has the following.

I need to build a dashboard with the following.

1. A Geographical Map Report
2. A KPI Scorecard Report
3. A Trend Report

Are there any tutorials which can help with this