Hi,

For some reason when I try to add a new record to my dataSource ….then refresh the grid  for my hierarchical table that uses detailInit,

…. the formatting is bypassed for my new record added to the dataSource.

After I add the new data to the JavaScript array... and refresh the grid, it does repopulate the child or detail grid:

But it doesn't appear to catch the format: "{0:c}"

I don't know why the new value (monetary) is getting bypassed with the format option? Here is my code for the detailInit(e):

functiondetailInitMainGrid(e) {

       console.log("IN: detailInitMainGrid()");
        var payCodeList = [];
         var data = _view.get("interimDS.interimPayrollRecords");

    //DEBUG:var data2 = e.data;
    
        $.each(data, function (index, value) {

            if (value.payCode != 'Total') {   // add NON-TOTAL records to data array//DEBUG://console.log("    LAST NAME:" + value.fullName + " : RECORD ID: " +value.interimPayrollRecordId);
                payCodeList.push({

                    interimPayrollRecordId: value.interimPayrollRecordId,
                    payCode: value.payCode,
                    amount: value.amount,
                    amountHrsMins: value.amountHrsMins,
                    monetary: value.monetary,

                });

            }
        });

    console.log("event data source: ID:" + e.data.interimPayrollRecordId + ", NAME: " + e.data.fullName);

    //var detailCell = e.detailCell;//detailCell.css("padding-left", "350px");
    

    $("<div/>").appendTo(e.detailCell).kendoGrid({
            dataSource:
            {
                data: payCodeList,
                serverPaging: false,
                serverSorting: false,
                serverFiltering: false,
                filter: { field: "interimPayrollRecordId", operator: "eq", value: e.data.interimPayrollRecordId }
            },
            scrollable: true,
            sortable: true,
            pageable: false,
            columns: [
                { field: "payCode", title: "Pay Code", width: "110px", attributes: { class: "child-table-details" } },
                { field: "amount", title: "Amount<br/>(HRS)", width: "50px", format: "{0:n}", attributes: { class: "child-table-details" } },
                { field: "amountHrsMins", title: "Amount<br/> (HRS:MIN)", width: "50px", attributes: { class: "child-table-details" } },
                { field: "monetary", title: "Monetary<br/>Amount", width: "50px", format: "{0:c}", attributes: { class: "child-table-details" } }
            ]
    });
    
}
 
 
    
                
                
    

I did  manage to debug through the creation of the child table (in the detailInit(e) function) when I click the little triangle on the left of the parent record, but it seems to bypass the new value I pushed to the JavaScript array structure and prints it out with our the $ or the trailing .00. I don't want to create a custom formatter in javascript, I think the format option for the monetary column should be working... but maybe there is something I am doing that causes it to malfunction or convert it to the monetary or currency format?

Thanks again for your help and patience,

George

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.

Hello, the following code works like a charm:

var arr = [
      {text:"Option 11",value:"Value 11"},
      {text:"Option 22",value:"Value 22"}
     ];
    

    arr.push({text:"Option 33",value:"Value 33"});

    var datasource = new kendo.data.DataSource({
      data: arr
    });
    datasource.read();

    jQuery("#operation").data("kendoDropDownList").setDataSource(datasource);

However if I try this:

var arr = [
      {text:"Option 11",value:"Value 11"},
      {text:"Option 22",value:"Value 22"}
     ];

for(i=0;i<operators.length;i++) {
      
      var singleElement = {
        text:operators[i],
        value:operators[i]
      };

      arr.push(singleElement);
}

var datasource = new kendo.data.DataSource({
      data: arr
    });

datasource.read();

jQuery("#operation").data("kendoDropDownList").setDataSource(datasource);

I get [object Object] where I should have the elements
of operators as values and text on the dropdownlist.

If I try this:

var arr = [
      {text:"Option 11",value:"Value 11"},
      {text:"Option 22",value:"Value 22"}
     ];

for(i=0;i<operators.length;i++) {
      
      var singleElement = "{text:\""+operators[i]+",value:\""+operators[i]+"\"}";


      arr.push(singleElement);
}

var datasource = new kendo.data.DataSource({
      data: arr
    });

datasource.read();

jQuery("#operation").data("kendoDropDownList").setDataSource(datasource);

I get "undefined" where I should have the elements
of operators as values and text on the dropdownlist.

Any idea on how can get the values from "operators" into the datasource and show up on the dropdownlist ? 

Thanks,

Rafael

I am trying to bind it with dynamic columns SQL table paging. The issue is on the second scroll/page it failed the method.

Razor Page

@model System.Data.DataTable
@(Html.Kendo().Grid<dynamic>()
    .Name("Grid")
    .Sortable()
    .Scrollable(sc => sc.Endless(true))
    .Filterable()
    .Groupable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(100)
            .Model(model =>
            {
                var id = "Id";
                model.Id(id);
            })
            .Read(read => read.Action("Data_Read", "DynamicColumn"))
        )
)

Controller DynamicColumn

 public IActionResult Data_Read([DataSourceRequest] DataSourceRequest request)
 {
     var dt = GetViewsData(request.PageSize, request.Page);
     var data = dt.ToDataSourceResult(request);
     var viewData = new DataSourceResult()
     {
         Data = data.Data, //this return NULL on the second page/scroll request
         Total = 181480 //total rows of table, just make it static
     };
     return Json(viewData);
 }

public DataTable GetViewsData(int pageSize, int page)
    {

        try
        {
            int offSet = (page - 1) * 100;
            string connString = "Server=.; Database=TheVault_VMC; Trusted_Connection=true; MultipleActiveResultSets=True; Encrypt=False;";
            SqlConnection con = new SqlConnection(connString);
            con.Open();
            SqlCommand cmd = new SqlCommand("sp_GetData", con);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@OFFSetRows", offSet);
            cmd.Parameters.AddWithValue("@PageSize", pageSize);
            SqlDataAdapter dataAdapter = new SqlDataAdapter(cmd);
            var dataTable = new DataTable();

            dataAdapter.Fill(dataTable);
            dataAdapter.FillSchema(dataTable, SchemaType.Mapped);
            con.Close();
            return dataTable;

        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

}

SQL Server Procedure

CREATE PROCEDURE [dbo].[sp_GetData] 
   @OFFSetRows INT,
   @PageSize INT
As
BEGIN    
SELECT Id, [Column1], [Column2], [Column3],[Column4],[Column5],[Column6]
FROM
[StagingDetail]
ORDER BY Id
OFFSET @OFFSetRows ROWS
FETCH NEXT @PageSize ROWS ONLY
END

I have a kendo grid in JSTL format where I'm trying to override a filter choice for date (making the filter look for the span of an entire day like in this example. But setting a simple hardcoded filtergives no results in the kendo grid, even when there are results matching the filter:

let startOfFilterDate = new Date(2000,1,1,0,0,0) 
let endOfFilterDate = new Date(2000,1,1,23,59,59) 
var filter = { 
  logic: "and", 
  filters: [ 
    { field: "date", operator: "gte", value: startOfFilterDate }, 
    { field: "date", operator: "lte", value: endOfFilterDate } 
  ] 
}; 
e.sender.dataSource.filter(filter);

I've tried putting in various places...

1) <kendo:dataSource-change></kendo:dataSource-change

2) <kendo:grid name="search-result-grid" ... filterable="true" columnMenu="true" columnMenuInit="doFilter">

And then my "doFilter" method is pretty much the same as the given example linked to above.

If I console.log the dataSource.filter, it shows that the filters are there. But the datasource is not being updated/refreshed with the filter for whatever reason.

Download kendo ui trial and in exmaple i just try following code

place these two file at "Kendo 2023\examples\dropdownlist" and run you will find "Blocked a frame with origin "null" from accessing a cross-origin frame."

parent.html is as below

<html lang="en">

<head>
    <title>Parent Frame</title>
    <script>
        ___data = [
            { CityID: 1, CityName: "Lisboa" },
            { CityID: 2, CityName: "Moscow" },
            { CityID: 3, CityName: "Napoli" },
            { CityID: 4, CityName: "Tokyo" },
            { CityID: 5, CityName: "Oslo" },
            { CityID: 6, CityName: "Pаris" },
            { CityID: 7, CityName: "Porto" },
            { CityID: 8, CityName: "Rome" },
            { CityID: 9, CityName: "Berlin" },
            { CityID: 10, CityName: "Nice" },
            { CityID: 11, CityName: "New York" },
            { CityID: 12, CityName: "Sao Paulo" },
            { CityID: 13, CityName: "Rio De Janeiro" },
            { CityID: 14, CityName: "Venice" },
            { CityID: 15, CityName: "Los Angeles" },
            { CityID: 16, CityName: "Madrid" },
            { CityID: 17, CityName: "Barcelona" },
            { CityID: 18, CityName: "Prague" },
            { CityID: 19, CityName: "Mexico City" },
            { CityID: 20, CityName: "Buenos Aires" }
        ]
    </script>
</head>

<body>
    <iframe src="./child.html" style="height: 100vh;width: 100vw;border: 0;"></iframe>
</body>

</html>

and child.html is as below

Hello, I am studying a lot because I am using Kendo for JQuery for the first time in this project.

Currently, I am creating a function that registers a favorite for each row of data, and I need to create it as shown in the picture.

The favorite column is assigned a Y/N cutoff value, and the icon changes accordingly.

And when the icon is clicked, the icon should change if the favorite status is successfully switched through ajax communication.

Thanks a lot for all your help!

Hi,

I am using kendo ui treeview for sort of selectable hierarchical menu. This menu can contain pretty much data with deep tree hierarchy.

Ever since we implemented it (few years ago), we used approach suggested here:
https://docs.telerik.com/kendo-ui/knowledge-base/filter-out-search-results

This was working fine so far. However, we finally started updating things to the newer versions, and after update to 2022.2.802 this method became 3-4 times slower than before.
For example same filtering method with exactly same dataset and the same search keyword has following values:

Before update:
measure filter 0.4153999999985099

After update:
measure filter 2.279300000000745

Even this piece of code gets slower

      if (data) {
        // Re-apply the filter on the children.
        dataSource.filter({ field: "hidden", operator: "neq", value: true });
      }

(same iteration)

Old:
measure dsFilter 0.001200000002980232

New:
measure dsFilter 0.013800000000745058

Unfortunately, we cannot update directly to the latest version to test if it is better. This is because of styling braking changes which we have to address and other constraints that we have. We have to do it gradually.

Could you please advise what to do, since depending on the dataset size, filtering can last more than 7-8 seconds, and reseting filtering even longer. This basically renders the feature unusable. 

Thank you very much.

Regards, Vedad

¿Alguien ha trabajado con esto? Tengo configurado el web service y me esta retornando el json que debe leerme y mostrarme en el grid, pero no consigo realizar que se visualicen los datos 

<body>
    <div id="grid"></div>
    <script>
        $(document).ready(function () {
            const dataSource = new kendo.data.DataSource({


                dataSource: {
                    type: "odata",
                    transport: {
                        read: "http://localhost:53072/Service.svc/ObtenerDatos"
                    },
                    pageSize: 20
                },
                schema: {
                    model: {
                        fields: {
                            Id: { type: "number" },
                            Nombre: { type: "string" },
                            Precio: { type: "number" }
                        }
                    }
                },
                pageSize: 10
            });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                height: 400,
                sortable: true,
                pageable: true,
                columns: [
                    { field: "Id", title: "ID" },
                    { field: "Nombre", title: "Nombre" },
                    { field: "Precio", title: "Precio" }
                ],

            });
        });
    </script>
</body>