{"customerSatisfactionChart":[{"KPIColumnName":"Time To Reach Qualified Tech","KPIColumnValue":3.579831},{"KPIColumnName":"Completeness Of Solution","KPIColumnValue":3.359243},{"KPIColumnName":"Opinion Of Overall Service","KPIColumnValue":3.720588},{"KPIColumnName":"Tech Ability And Prod Knowledge","KPIColumnValue":3.636554},{"KPIColumnName":"Time To Provide Solution","KPIColumnValue":3.285714},{"KPIColumnName":"Ease Of Requesting Help","KPIColumnValue":3.758403},{"KPIColumnName":"How Well Are You Kept Informed","KPIColumnValue":3.262605}]}

        dataSource: {
            transport: {
                read: {
                    url: '../Test/GetData',
                    dataType: "json"
                }
            }
        },
        schema: {
            data: "customerSatisfactionChart"
        },
        series: [{
            field: "KPITestColumnValue"
        }],
        categoryAxis: {
            field: "KPITestColumnName"
        },

[
""KPIColumnName":"Time T...ColumnValue":"3.579831""
            , 
            
""KPIColumnName":"Comple...ColumnValue":"3.359243""
            , 
            
""KPIColumnName":"Opinio...ColumnValue":"3.720588""
            , 4 more...]
            

var customerSatisfactionDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: '../Test/GetData',
            dataType: "json"
        }
    }
});

function createkpiBreakdownChart(labelPosition) {
    $("#kpiBreakdownChart").kendoChart({
        theme: $(document).data("kendoSkin") || "metro",
        dataSource: customerSatisfactionDataSource,
        schema: {
            a: "a"
        },
        series: [{
            field: "KPIColumnValue"
        }],
        categoryAxis: {
            field: "KPIColumnName"
        },
        title: {
            text: "Customer Satisfaction"
        },
        legend: {
            position: "bottom",
            visible: false,
        },
        chartArea: {
            background: "#ffffff"
        },
        seriesDefaults: {
            type: "bar"
        },
        //series: [{
        //    name: "Performance Metrics",
        //    data: [4.552162849872774, 4.391752577319588, 4.215633423180593, 4.345108695652174, 4.4728682170542635, 4.387005649717514, 4.351351351351352]
        //},],
        valueAxis: {
            minorUnit: .25,
            majorUnit: 1,
            min: 0,
            max: 5,
            plotBands: [{
                from: 4,
                to: 5,
                color: '#000000',
                opacity: .1
            }],
            labels: {
                labels: {
                    format: "N0"
                },
 
            },
            tooltip: {
                visible: true,
                format: "N0"
            }
        },
        //categoryAxis: {
        //    categories: ['Ease of requesting help', 'Time to reach qualified technician', 'Time to provide a solution', 'Completeness of solution', 'Technical ability & product knowledge', 'How well we kept you informed', 'Overall opinion of service'],
        //},
        tooltip: {
            visible: true,
            format: "#.##"
        }
    });
}

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>