<template>
  <div class="example-wrapper row">
    <div class="col-xs-12 col-sm-6 example-col">
      <localization :language="'pt-br'">
        <intl :locale="'pt-br'">
          <p>NumericTextBox</p>
          <numerictextbox :default-value="123.45" :format="'c'">
          </numerictextbox>
          <p>Slider</p>
          <slider
            :buttons="true"
            :step="1"
            :default-value="7"
            :min="1"
            :max="10"
          >
          </slider>
        </intl>
      </localization>
    </div>
  </div>
</template>
<script>
import {
  IntlProvider,
  load,
  loadMessages,
  LocalizationProvider
} from "@progress/kendo-vue-intl";
import { NumericTextBox, Slider } from "@progress/kendo-vue-inputs";

import likelySubtags from "cldr-core/supplemental/likelySubtags.json";
import currencyData from "cldr-core/supplemental/currencyData.json";
import esNumbers from "cldr-numbers-full/main/es/numbers.json";
import esCurrencies from "cldr-numbers-full/main/es/currencies.json";

load(likelySubtags, currencyData, esNumbers, esCurrencies);

import esMessages from "./es.json";
loadMessages(esMessages, "es");

export default {
  components: {
    numerictextbox: NumericTextBox,
    slider: Slider,
    intl: IntlProvider,
    localization: LocalizationProvider
  }
};
</script>

  @(Html.Kendo().Spreadsheet()
            .Name("spreadsheet").HtmlAttributes(new { style = "width:100%;" })

        )
<script>
$(document).ready( function () {
        var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
        
 $.ajax({
    type: "POST",
    url: '@Url.Action("GetFileFromDetails", "Spreadsheets")',
            contentType: "application/json; charset=utf-8",
            data: { data: myData },
            dataType: "json",
            success: function (recData) {
                //alert(recData);
                spreadsheet.fromJSON(recData.response);
            },
            error: function (ex) {
                alert(ex);
            }
        });
  });
        </script>

  [HttpPost]
        public ActionResult GetFileFromDetails()
        {
           

var workbook = Workbook.Load(file.InputStream, Path.GetExtension(file.FileName));
            return Content(workbook.ToJson(), Telerik.Web.Spreadsheet.MimeTypes.JSON);

        }

  [HttpPost]
        public ActionResult Upload(HttpPostedFileBase file)
        {            
            var workbook = Workbook.Load(file.InputStream, Path.GetExtension(file.FileName));
            return Content(workbook.ToJson(), Telerik.Web.Spreadsheet.MimeTypes.JSON);
        }

Support

 I am new to Telerik Grid.  This code I put together from a couple of the sites examples

to show "proof of concept" for a newly assigned project.  The display of the grid works fine

if I remove the "TRANSPORT section of the datasource.  The popup edit will save to the cached data but

will not call the update action as specified.  As you see the data is generated as a list and converted

to JSON on entry to the view.  Any assistance would be greatly appreciated.  Thank you.

Bill Lawler 

Below is my controller, model, and View snippets 

MY CONTROLLER

    public class TankTagItemVM
    {
        public string Tank { get; set; }
        public string Level_Tag { get; set; }
        public string Material_Tag { get; set; }
        public string Temperature_Tag { get; set; }
        public string Water_Level_Tag { get; set; }
        public string Gross_Pumpable_Tag { get; set; }
        public string Gross_Heel_Tag { get; set; }
        public string Gross_Volume_Tag { get; set; }
        public string Gross_Max_Tag { get; set; }
        public string Net_Volume_Tag { get; set; }
        public string Mvmt_Level_Tag { get; set; }
        public string Mvmt_Gross_Pumpable_Tag { get; set; }
        public string Mvmt_Gross_Heel_Tag { get; set; }
        public string Mvmt_Gross_Volume_Tag { get; set; }
        public string Mvmt_Gross_Max_Tag { get; set; }
        public string Mvmt_Net_Volume_Tag { get; set; }
    } 

MY CONTROLLER

MY CSHTML 

@model List<WebApplication5.Models.TankTagItemVM>
@{
    ViewBag.Title = "GetTankTags";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Vat Grid</title>
    <link rel="stylesheet" href="styles/kendo.common.min.css">
    <link rel="stylesheet" href="styles/kendo.default.min.css">
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css">
    <link rel="stylesheet" href="styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="styles/kendo.silver.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/estilo.css">
    <link rel="stylesheet" href="css/daterangepicker.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jszip.min.js"></script>
    <script src="js/pako_deflate.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    
        <div id="grid"></div>
    

    <script id="noDataTemplate" type="text/x-kendo-tmpl">
        <div>
            No data found. Do you want to add new item - '#: instance.filterInput.val() #' ?
        </div>
        <br/>
        <button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.filterInput.val() #')">Add new item</button>
    </script>

    <script>
        $(document).ready(function(){
            var dataSource = new kendo.data.DataSource({
                data: categories
            });

            var gridDataSource = new kendo.data.DataSource({
                data : [ {
                    "Commen": "-",
                    "Confirmed": 1,
                    "Stat": 1
                },
                {
                    "Commen": "-",
                    "Confirmed": 1,
                    "Stat": 1
                },
                {
                    "Commen": "-",
                    "Confirmed": 1,
                    "Stat": 1
                },
                {
                    "Commen": "Some Comment",
                    "Confirmed": 1,
                    "Stat": 1
                }]
            });

            $("#grid").kendoGrid({
                dataSource: gridDataSource,
                height: 550,
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                        field: "Stat",
                        title: "Status"
                    }, {
                        field: "Confirmed",
                        title: "Confirmed",
                        template: " <input name='Confirmed' class='Confirmed' type='checkbox' data-bind='checked: Confirmed' #= Confirmed ? checked='checked' : '' #/>"
                    }, {
                        field: "Commen",
                        title: "Comment",
                        editor: commentCategoryEditor,
                        template:  "#=Commen#",                      
                        //template: "<input id='Commen'>",
                        width: 450,
                        nullable : true
                    }]
            }); 

        });

        var categories = [{
            "CategoryName": "-"
        },{
            "CategoryName": "Category 1"
        }, {
            "CategoryName": "Category 2"
        }];

        function commentCategoryEditor(container, options){
        $('<input name="Commen">')
                .kendoDropDownList({
                    filter: "startswith",
                    dataTextField: "CategoryName",
                    dataValueField: "CategoryID",
                    dataSource: dataSource,
                    noDataTemplate: $("#noDataTemplate").html()
            });
        }

        function addNew(widgetId, value) {
            var widget = $("#" + widgetId).getKendoDropDownList();
            var dataSource = widget.dataSource;

            if (confirm("Are you sure?")) {
                dataSource.add({
                    CategoryID: 0,
                    CategoryName: value
                });
                dataSource.one("sync", function() {
                    widget.select(dataSource.view().length - 1);
                });
                dataSource.sync();
            }
        };
            
                
            

    </script>
</div>


    

</body>
</html>

let grid = $('#myGrid').data("kendoGrid");

// This works, apply filter from object
grid.dataSource.filter({ field: "amount", operator: "eq", value: 7 });

// read the grid' filter as string
let filterstring = grid.dataSource.transport.parameterMap({ filter: grid.dataSource.filter() }).filter;
// value is now "amount~eq~7"

// Q: can something like this be done in some way?
grid.dataSource.filter("amount~eq~1234567"); // bad code