Questions on Kendo UI for jQuery Forum

1 answer

58 views

Kendo Grid dynamic columns Endless scrolling implementation ASP.NET

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

The issue is the function ToDataSourceResult() returns NULL Data on the second request

Data Source

Grid

answered on 13 Sep 2023

1 answer

50 views

Cannot get datasource to acknowledge changes to filter

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.

Data Source

Filter

Grid

answered on 30 Aug 2023

1 answer

95 views

I want to create a function that can switch favorites per row using a star icon.

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!

Button

Data Source

Grid

answered on 03 Aug 2023

1 answer

63 views

Kendo TreeView filtering became slow with version upgrade

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

Data Source

TreeView

answered on 02 Aug 2023

2 answers

141 views

Change event triggered when not changing virtualized dropdownlist

I have a dropdown list with virtualization (https://dojo.telerik.com/AhuQEDEL/2). When I open and close the dropdownlist without actually changing anything the change event is occasionally triggered. I reproduced the odd behavior in this this Dojo. You will notice that the "change" is logged in the console when you open and close the list without selecting anything. This behavior is also inconsistent as sometimes it logs the change and sometimes it doesn't.

Data Source

DropDownList

answered on 04 Jul 2023

1 answer

69 views

Dropdownlist with virtualization returning blank for value

https://dojo.telerik.com/ezOJuzog

I have a kendo dropdownlist with virtualization that uses a local json object (the real list is longer than my example). When I set the value and immediately try to log that new value out, I get nothing. How do I log out the value after setting it when using virtualization? Here is a dojo example where you will see it logs "The value is now:" with no answer. If I remove virtualization it logs the answer out.

Data Source

DropDownList

answered on 27 Jun 2023

1 answer

95 views

Display grid dataSource schema model field content as HTML hyperlink

I'm trying to display the content of a Kendo UI Grid dataSource schema model field as an HTML hyperlink. However, I'm getting its content as a string instead.

Here is my code:

var initDSStock = [
  {% for ligne in liste_logements %}
    {% set logement = ligne.logement %}
    {
      log_etat_log: 'test'
    },
  {% endfor %}
];

var dataSource = new kendo.data.DataSource({
  pageSize: 25,
  data: initDSStock,
  schema: {
    model: {
      fields: {
        log_etat_log: { template: '<a href="\\#">#= log_etat_log#</a>' }
      },
    },
  }
});

grid.data("kendoGrid").setDataSource(dataSource);

Is that doable? If so, how should I fix my code? Any idea?

Data Source

Grid

answered on 06 Jun 2023

1 answer

279 views

Remote .Net Core - TypeError: cannot create property 'Id' on string

I get this error when trying to bind remote data from a .Net Core endpoint to jQuery UI Grid.

Im hitting a .Net Core endpoint which returns a List<MyModel>

[HttpGet("/api/[controller]/[action]/{applicationId}/")]
public async Task<IActionResult> GetProducts(int applicationId)
{
    //return List<MyModel>
    var products = await this._mortgageApplicationService.GetMortgageApplicationProducts(applicationId);
    var json = JsonConvert.SerializeObject(products);
    return Ok(json);
}

In jQuery UI i have following javascript method which tries to display the json results.
Note I recreated the products json object locally and it worked as shown in the method below.
Why doesn't it work from the remote end point?

function getReportData() {
    var applicationId = $("#MortgageApplicationId").val();
    var url = "/api/MortgageStageProductsApi/GetProducts/" + applicationId;

    //This does NOT work
    $("#productGrid").kendoGrid({
        dataSource: {
            transport: {
                read: url,
                dataType: "json"
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: { type: "number" },
                        ProductProvider: { type: "string" },
                        ProductTypeName: { type: "string" },
                        MortgageExpiry: { type: "string" }
                    }
                }
            },
            pageSize: 20,
            serverPaging: false,
            serverFiltering: false,
            serverSorting: false
        },
        filterable: true,
        sortable: true,
        pageable: false,
        columns: [{
            field: "Id",
            filterable: false
        }, {
            field: "ProductProvider",
            title: "Provider"
        }, {
            field: "ProductTypeName",
            title: "Product Type"
        }, {
            field: "MortgageExpiry",
            title: "Expiry"
        }
        ]
    });


    //This works using json object created using the same json returned
    var products = [
        {
            Id: 1,
            MortgageApplicationId: 2171,
            ProductProvider: "Ulster Bank",
            MortgageTermYears: 5,
            MortgageTermMonths: 10,
            MortgageRepaymentType: 1,
            ProductTypeId: 1,
            ProductTypeName: "Fixed",
            MortgageProductTermYears: 5,
            MortgageExpiry: "2025-01-21T00:00:00",
            MortgageLenderRate: null,
            MortgageAdviceFee: 120,
            ProductBrokerCommissionPercentage: 10,
            ProductBrokerCommissionFlatFee: null,
            DocumentsUploadedList: []
        },
        {
            Id: 2,
            MortgageApplicationId: 2171,
            ProductProvider: "Ulster Bank",
            MortgageTermYears: 5,
            MortgageTermMonths: 10,
            MortgageRepaymentType: 1,
            ProductTypeId: 1,
            ProductTypeName: "Fixed",
            MortgageProductTermYears: 5,
            MortgageExpiry: "2025-01-21T00:00:00",
            MortgageLenderRate: null,
            MortgageAdviceFee: 120,
            ProductBrokerCommissionPercentage: 10,
            ProductBrokerCommissionFlatFee: null,
            DocumentsUploadedList: []
        }
    ];

    $("#productGrid1").kendoGrid({
        dataSource: {
            data: products,
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: { type: "number" },
                        ProductProvider: { type: "string" },
                        ProductTypeName: { type: "string" },
                        MortgageExpiry: { type: "string" }
                    }
                }
            },
            pageSize: 20,
            serverPaging: false,
            serverFiltering: false,
            serverSorting: false
        },
        filterable: true,
        sortable: true,
        pageable: false,
        columns: [{
            field: "Id",
            filterable: false
        }, {
            field: "ProductProvider",
            title: "Provider"
        }, {
            field: "ProductTypeName",
            title: "Product Type"
        }, {
            field: "MortgageExpiry",
            title: "Expiry"
        }
        ]
    });
}

Data Source

Grid

answered on 18 May 2023

1 answer

57 views

Globally override or tap into all Kendo Grids

Hi,

We are looking into ways on how we can globally Html Sanitize/Purify anything that is rendered on a Kendo Grid. We are looking into the following options:

1. Create a custom widget that extends the Kendo Grid

2. Globally tap into databinding event

It would be awesome if the second option is possible.

Data Source

Grid

answered on 15 May 2023

1 answer

74 views

In my SQL query, I used the WITH clause to construct a Common Table Expression (CTE)

I once noticed the error code "ORA-00933: SQL command not properly ended" while working on a project that required creating SQL queries in an Oracle database.

The problem occurred when I attempted to utilise the WITH clause in my SQL query to construct a Common Table Expression (CTE). The inquiry was written as follows:

WITH my_cte AS (
  SELECT *
  FROM my_table
)
SELECT *
FROM my_cte
WHERE id = 1;

When I attempted to run the query, however, I received the following error message:

ORA-00933: SQL command not properly ended

This error notice perplexed me because the syntax of my query appeared correct to me. So, I read this, which suggested changing the query in order to avoid utilizing the column alias in that subquery. Is that correct? I don't think this could work. Can someone help me out?

Data Source