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

Hello All,
I'm new at this. I'm trying to show a grid based on a linq dataset.
Basically, I have a table myTable, I want to display all rows of that table in a grid.
what's the simplest way to do it. I want my table to be editable (add, edit and remove rows).

Thank you,                    

I've trying to change to another view using navigate() function. The view is changed but the header and footer of the layout are not shown.

As I have a Tabstrip in the footer I try to change the tab at the same time.

I've create an example where youu can see this behavior.

Does anybody know a way to make it work? Thanks in advance.