Change row color based on error happened in backend while updating records

2 posts, 0 answers
  1. Omar
    Omar avatar
    3 posts
    Member since:
    Sep 2016

    Posted 07 Oct Link to this post

    I am updating spreadsheet rows one by one. I want to change row color of those rows which got error in the backend. 

    @(Html.Kendo().Spreadsheet()
    .Name("spreadsheet")
    .Sheetsbar(false)
    .Toolbar(x => x.Data(false).Insert(false))
    .HtmlAttributes(new { style = "width:100%;" })
    .Rows(5000)
    .Events(e => e.ExcelImport("niinStockImport"))
    .Sheets(sheets =>
    {
    sheets.Add()
    .Name("NiinStock")
    .DataSource<DynMRO.DTO.Logistics.Planning.NiinStockSearchResultDTO>(ds => ds
    .Ajax()
    .Batch(true)
    .Read(r => r.Action("NiinStockBulkSearchResults", "Logistics").Data("getCriteria"))
    .Update(u => u.Action("NiinStockBulkUpdate", "Logistics").Data("getCriteria"))
    .Events(e => e.Change("onChange"))
    .Model(m =>
    {
    m.Id(p => new { p.NiinStockID, p.ORGID });
    })
    )
    .Columns(columns =>
    {
    columns.Add().Width(100);
    columns.Add().Width(415);
    columns.Add().Width(0);
    columns.Add().Width(0);
    columns.Add().Width(145);
    })

    ;
    })
    )

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    287 posts

    Posted 11 Oct Link to this post

    Hi Omar,

    As far as I can understand, you need to report back to the client, which is the row from your DataSource that cause a server error. If this is your case, I could suggest you to try the following:

    - My suggestion is based on our DataSource binding demo, so I will explain how to modify it to achieve the desired result;

    - You will have to modify the Update controller action in such way, that it returns information about the item that has caused the error. You could return its ID, or an array of ID, as in my test scenario:
    // This is for test purposes. It forses the action to always return an error
    Response.StatusCode = (int)HttpStatusCode.InternalServerError;
    var ids = new List<int>();
    // With below you will return all the IDs of the products being uploaded
    foreach (var product in products)
    {
        ids.Add(product.ProductID);
    }
     
    return Json(ids);

    - You will have to subscribe for the DataSource Error event:
    .DataSource<Kendo.Mvc.Examples.Models.SpreadsheetProductViewModel>(ds => ds
        .Events(e => e.Error("onError"))
    ........

    - When error occurs, you could retrieve the data for the IDs of the items being updated, get their indexes in the array returned from the DataSource data() method, find the rows, based on the above indexes and style them:
    function onError(e) {
        var errorIds = e.xhr.responseJSON;
        var spreadsheet = $('#spreadsheet').data('kendoSpreadsheet');
        var firstSheet = spreadsheet.sheetByIndex(0);
        var data = firstSheet.dataSource.data();
     
        for (var i = 0; i < data.length; i++) {
            var itemId = data[i].id;
            if ($.inArray(itemId, errorIds) > -1) {
                var lineNumber = i + 2;
                var rangeDefinition = 'A' + lineNumber + ':Z' + lineNumber;
                var line = firstSheet.range(rangeDefinition);
                line.background("red");
            }
        }
    }

    Regards,
    Veselin Tsvetanov
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top