Is there a spreadsheet for Angular, if not, what to use with Angular?

I had feedbacks that Spreadsheet for JQuery in Angular does not behave wery well, poor performances. Is there a way to use the Spreadsheet properly with Angular?

i have  enabled the Content Security Policy (CSP) in my mvc project i have view where i have mvc grid hierarchy 

https://demos.telerik.com/aspnet-mvc/grid/hierarchy exmple i have used 

when i add Deferred to the grid the inner grid wont work 

i get an error

jquery-3.6.3.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #Grid_#=EmployeeID#
    at se.error (jquery-3.6.3.min.js:2:13911)
    at se.tokenize (jquery-3.6.3.min.js:2:21922)
    at se.select (jquery-3.6.3.min.js:2:22749)
    at Function.se (jquery-3.6.3.min.js:2:7196)
    at a.find (jquery-migrate.min.js:2:1675)
    at E.fn.init.find (jquery-3.6.3.min.js:2:25319)
    at E.fn.init (jquery-3.6.3.min.js:2:25808)
    at new a.fn.init (jquery-migrate.min.js:2:1276)
    at E (jquery-3.6.3.min.js:2:1051)
    at HTMLDocument.<anonymous> (Index:505:1618)

code cshtml 

@using PM.Common;
@using PM.Common.Helper;
@using PM.PartnerManagement.Models;
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@(Html.Kendo().Grid<PM.PartnerManagement.Common.Employeeviewmodel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(e => e.FirstName).Width(130);
                columns.Bound(e => e.LastName).Width(130);
                columns.Bound(e => e.Country).Width(130);
                columns.Bound(e => e.City).Width(110);
                columns.Bound(e => e.Title);
            })
            .Sortable()
            .Pageable()
            .Scrollable()
            .ClientDetailTemplateId("template")
            .HtmlAttributes(new { style = "height:600px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(6)
                .Read(read => read.Action("HierarchyBinding_Employees", "Test"))
            )
          .Events(events => events.DataBound("dataBound")).Deferred()
  )
<script id="template" type="text/kendo-tmpl" >
    @(Html.Kendo().Grid<PM.PartnerManagement.Common.orderViewmodel>()
                    .Name("Grid_#=EmployeeID#") // template expression, to be evaluated in the master context
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.OrderID).Width(110);
                        columns.Bound(o => o.ShipCountry).Width(150);
                        columns.Bound(o => o.ShipAddress).ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
                        columns.Bound(o => o.ShipName).Width(300);
                    })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(10)
                        .Read(read => read.Action("HierarchyBinding_Orders", "Test", new { employeeID = "#=EmployeeID#" }))
                    )
                    .Pageable()
                    .Sortable().Deferred()
                .ToClientTemplate()
    )


</script>

<script nonce="@PM.Common.Constant.Nonce">
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>

<script nonce="@Constant.Nonce">
    @Html.Kendo().DeferredScripts(false);
</script>

CS

I have a bunch of Kendo grids within divs. I am letting the user sort those divs on the screen. After sorting, my Kendo grid no longer functions correctly, for example, clicking on a column header no longer sorts. I'm sure it has to do with me removing and replacing the element elsewhere on the screen. How do I rebind the grid after the element has been removed from the DOM and replaced. This is the relevant line of JQuery where the kendo grids are, among other html, contained within sortedRows. 

    let sortedRows = [...rows];
    if (direction !== "original") {
        sortedRows.sort(function (a, b) {
            let rowA = a.getElementsByClassName("responsive-table__cell")[columnIndex];
            rowA = $(rowA).find(".js-sort-value").text().toLowerCase();
            let rowB = b.getElementsByClassName("responsive-table__cell")[columnIndex];
            rowB = $(rowB).find(".js-sort-value").text().toLowerCase();
            if (sortType === "number") {
                rowA = parseFloat(rowA);
                rowB = parseFloat(rowB);
            }
            if (direction === "asc") {
                return rowA > rowB ? 1 : -1;
            } else {
                return rowA > rowB ? -1 : 1;
            }
        });
    }
$(`#myCodeBlock`).find(".responsive-table__body").empty().append(sortedRows);

In Export as Excel limited data is only Shown, If we add more data in the Kendo Table Grid, Additionally,  When we click on Export as Excel, only the same set of data is shown, without any new data being added to the  Excel Sheet.

See here Data is upto 45 in Kendo Table but when we export as Excel then only upto 32 data is loading, no new data is being loaded on Excel Sheet.

https://demos.telerik.com/kendo-ui/editor/pdf-export

The button works but it's blank.  How would one put a PDF icon or say PDF in text for the button?

I am creating a dynamic line chart (see previous https://www.telerik.com/account/support-center/view-ticket/1623605) I am facing another issue with the line chart - in which entries are appending for some apparent reason at the end. Instead of the horizontal (x) axis being a consecutively ordered, the chart itself restarts the axis for the second series of data.

Here is an image of the current issue I am facing.

As you can see above, instead of filling these entries in back at the beginning, the entire horizontal axis restarts from 0. 

The only points that work "correctly" are points that exactly match each other in the beginning.

At 4:54:00 both points share that exact "second" in time so the "green" point appears appropriately.

If the point does not "match" exactly, it is added and appended to the very end of the horizontal axis as I showed above.

What is causing this? Why does the horizontal axis restart?

My code is as follows:

 <div id="example">        
      <div class="demo-section wide">
        <div id="chart"></div>
      </div>
      <script>
          var testNum = "Test Data for #" + '@Model.testNum';       

          var datareader = JSON.parse(Model.dynamicDataRetrievedFromCSV);         

          function createChart() {
              $("#chart").kendoChart({
                  renderAs: "canvas",
                  title: {
                      text: testNum
                  },
                  legend: {
                      visible: true
                  },
                  seriesDefaults: {
                      type: "line",
                      /*stack: true,*/             

                      labels: {
                          visible: false,
                          format: "{0}",
                          background: "transparent"
                      }
                  },
                  valueAxis: {
                      labels: {
                          format: "{0}"
                      },
                      line: {
                          visible: false
                      },
                      min: 0,
                      max: 300

                  },
                  categoryAxis: {
                      majorGridLines: {
                          visible: false
                      },
                      min: 0,
                      max: 10
                  },
                  tooltip: {
                      visible: true,
                      template: "#= series.name #: #= value #"
                  },
                   pannable: {
             
                  },
                  zoomable: {
                      mousewheel: {
                          rate: 0.1
                      },
                      selection: {
                         
                      }
                  }
                
              });
          }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
          $(document).ready(function () {
              let chart = $("#chart").data("kendoChart");
              var dataParsed = datareader;

              let ds = new kendo.data.DataSource({
                  data: dataParsed,
                  group: "label"
              });
              

              chart.setOptions({
                  dataSource: ds,
                  series: [{
                      field: "value",
                      categoryField: "time",
                      visible: false
                  }]
              }); 
          });
     
      </script>
    </div>

Thank you for any help, and thanks for the support you guys have provided over the last couple weeks!

seems just work perfectly if the tag is FORM, if div, submit will not be fired, would be great to have one of two options:

1 - use div tag (all works well except submit)

2 - give the ability to get a model from the form, like when submitting (e.model), form.model or form.model(), now have to form._model & get to string & back to json to be able to post

P.S some time we cant use form tag to do not have it nested

Hi,

I think the filter widget has been omited from the messages file.

I changed the demo code to show that the grid widget getting the messages in the right language (fr-CA) while the filter widget remains in en-US.

Here's the dojo example of the problem.  I alos included a picture.

I took a look at the messages files and only few cultures seems to have implemented the the filter widget messages (ru-RU, zh-CN, zh-HK, zh-TW).

I know I can set my own message thru the filter's configuration messages but ain't that something that should be handled kendo's culture?

Or maybe I'm doing something wrong?

Regards,

Simon