Questions on Kendo UI for jQuery Forum

1 answer

411 views

kendo scheduler : TypeError: Cannot read properties of null (reading 'getTimezoneOffset')

Hi,

What I am trying to achieve:

Have a local array of my objects to be displayed by the scheduler, then I would need to remove some of them, and at the same time insert new ones

When the page first loads, it works ok, as soon as I try to update the underline data source I get the error:

TypeError: Cannot read properties of null (reading 'getTimezoneOffset')

To reproduce, please press the "Update" button. (I have attached a sample) PS: Please note that I am currently using: kendo.2022.1.412 ( I forgot to update the sample, but it throws the same error)

And one more question, for the scheduler then to reflect the changes , do I need to call the scheduler.view? or will it be ok to just trigger the scheduler.dataSource.read()?

	  //update scheduler
          var scheduler = $("#scheduler").data("kendoScheduler");
          scheduler.dataSource.read();
          //scheduler.view(scheduler.view().name)  ----> do we really need this?

Thanks,

Data Source

Scheduler

answered on 08 Dec 2022

1 answer

97 views

Gantt chart performance issues with large amount of data

Hi,

I have a question regarding Gantt chart performance, when having large amount of data. I expect that my Gantt chart will have ~10.000 rows minimum, but I am starting to face some performance issues with this amount of data. The widget becomes laggy and responses to user actions with a delay.

So my question is what is the maximum row count that Gantt supports? Maybe I've reached it?

Thank you)

Data Source

Gantt

answered on 24 Nov 2022

0 answers

61 views

want to create expandable grid using telerik kendo controls. arrow is not coming for grid. can anyone please help me. using vb.net mvc.

I have written detail expand function on index page and my kendo grid is on another page. my other functions are accessible but can't access detail expand and other functions related to kendo grid. need vb.net mvc code.
can anyone please help.

function detailExpand(e) {           
            if (expandedRow != null && expandedRow[0] != e.masterRow[0]) {
                var grid = $('#drgdgrid').data('kendoGrid');
                $(".k-master-row").each(function (index) { grid.expandRow(this); });
                grid.collapseRow(expandedRow);
                expandedRow.next().remove();
            }
            expandedRow = e.masterRow;
            //id = expandedRow[0].cells[0].innerText;
            var masterDataItem = $('#drgdgrid').data('kendoGrid').dataItem(expandedRow);
            expandedDataItem = masterDataItem;
            if (masterDataItem.code != null && masterDataItem.code != '') {
                $(".hideAddButton").hide();
           }
            else {
               $(".hideAddButton").show();
            }

            

        }

Data Source

Grid

asked on 21 Nov 2022

0 answers

59 views

Kendo Grid foreign column custom Editor

Hi,

I want to add custom field to combobox Editor in Kendo grid but it's not working can anyone help me? Many thanks!
In the image below I have an IsActive : true column when loading data, but when I edit I don't see it.

ComboBox

Data Source

Grid

asked on 18 Nov 2022

0 answers

67 views

Application state management with redux and kendo jquery

Hello, I'm using Kendo Jquery to create my SPAs applications, I'm missing using a state controller, because I need some components to communicate and update according to a general action.

For example, instead of adding all listeners to the datasource's change event or the observable object,
I thought about using Redux.

Imagining the following scenario, I have a datasource that will provide a list of all system notifications. When receiving the notification from the server, this datasource will be updated, in the update we will perform specific functions according to the new notification. For example, we can display a message or open an application.

I could register all possible operations in each new notification within the "CHANGE" event of the datasource, however, with each new function to handle a new type of notification, I will have to change the "CHANGE" event of this datasource.

I'm thinking of using redux, this would be responsible for notifying any change of state for the components subscribed to the store, executing the store dispatch on the "change" trigger of the datasource or observable object, thus giving more freedom for the new components to use the event change of state without having to change the "CHANGE" trigger of the datasource.

I would like to know if this would be a good practice and if anyone has used redux with kendo jquery and what are your recommendations?

Thanks

Data Source

asked on 05 Nov 2022

0 answers

64 views

Column field width

Hi,

I'm trying to set the width of the column filed ( in the picture "organization Name") but the width of the item is not to the end of the row(only goes up to 15cm)
The solution I came up with is to set the two fields("organization Name" and "amount" ) width like following:

                    columns:
    [
        {
            field: "OrganizationName"//,
                                //width: "35%"
                            },
        {
            field: "Amount"//,
                                //width: "65%"
                            }
    ],

but the problem is that now "Organization Name" column is shorter than "Amount" column.

What can I do to make both columns length the same and the items inside the dropdown go all the way to the edges.

Data Source

Grid

asked on 25 Oct 2022

0 answers

46 views

Kendo Grid Large Parameters Value

Hy This code is part of my grid.

    grid._parameterMap = function (data, type) {

        if (type !== "read" && data.models)
            return { models: kendo.stringify(data.models) };

        var warehouseCodeList = [];


        var selectedWarehouse_OnPhysicalCountDefinition = '';

        $.each(KendoData('mltWarehouse_OnPhysicalCountDefinition').dataItems(), function (index, value) {
            selectedWarehouse_OnPhysicalCountDefinition += value.WarehouseCode + ',';
        });


        selectedWarehouse_OnPhysicalCountDefinition = selectedWarehouse_OnPhysicalCountDefinition.slice(0, -1);


        debugger;

        var parameters = {
            warehouseCodeList: selectedWarehouse_OnPhysicalCountDefinition,
            periodDateString: $('#dpcPeriodDate_OnPhysicalCountDefinition').val(),
            Page: data.page,
            PageSize: data.pageSize
        }

        return kendo.data.transports["odata"].parameterMap(parameters, type);
    };

And parameters value is

Page: 1
PageSize: 50
periodDateString: "17/10/2022"
warehouseCodeList: "480176,480172,480003,480166,480109,480025,480090,480089,480002,480088,
480061,480101,480016,480009,480095,480008,480094,480093,480006,480092,480005,480091,480004,
480117,480033,480114,480060,480113,480163,480030,480059,2011,480157,480028,480045,480048,
480039,480029,480120,480046,480156,480049,480072,480063,480062,48006100,480071,480070,480069,
480068,480067,480066,480065,480064,480077,480076,480085,480084,480082,480078,480073,480075,480079,
480074,480083,480127,480128,480057,480129,480058,480081,480080,480141,480132,480131,480130,480140,
480138,480137,480136,480135,480134,480133,480146,480145,480154,480153,480151,480147,480142,480144,
480148,480143,480152,480139,480150,480149,480106,480126,480055,480165,480167,480100,480123,480053,
480096,480168,480162,480159,480158,480038,480102,480017,480013,480122,480047,480116,480032,480034,
480107,480040,480118,480098,480051,480110,480026,480111,480027,480108,480103,480115,480031,480035,
480087,480086,480036,480119,480112,480010,480097,480155,480124,480054,480019,480099,480104,480171,
480164,480041,480042,480121,480043,480044,480014,480052,480170,480037,480050,480012,480105,480169,
480161,480174,480173"

You can see that my data and that large data not going my controller becouse of that large warehouseCodeList.

Request URL: https://zzzz/Inv/yyy/xxxx/?%24inlinecount=allpages&%24format=json&warehouseCodeList=480176%2C480172%2C480003%2C480166%2C480109%2C480025%2C480090%2C480089%2C480002%2C480088%2C480061%2C480101%2C480016%2C480009%2C480095%2C480008%2C480094%2C480093%2C480006%2C480092%2C480005%2C480091%2C480004%2C480117%2C480033%2C480114%2C480060%2C480113%2C480163%2C480030%2C480059%2C2011%2C480157%2C480028%2C480045%2C480048%2C480039%2C480029%2C480120%2C480046%2C480156%2C480049%2C480072%2C480063%2C480062%2C48006100%2C480071%2C480070%2C480069%2C480068%2C480067%2C480066%2C480065%2C480064%2C480077%2C480076%2C480085%2C480084%2C480082%2C480078%2C480073%2C480075%2C480079%2C480074%2C480083%2C480127%2C480128%2C480057%2C480129%2C480058%2C480081%2C480080%2C480141%2C480132%2C480131%2C480130%2C480140%2C480138%2C480137%2C480136%2C480135%2C480134%2C480133%2C480146%2C480145%2C480154%2C480153%2C480151%2C480147%2C480142%2C480144%2C480148%2C480143%2C480152%2C480139%2C480150%2C480149%2C480106%2C480126%2C480055%2C480165%2C480167%2C480100%2C480123%2C480053%2C480096%2C480168%2C480162%2C480159%2C480158%2C480038%2C480102%2C480017%2C480013%2C480122%2C480047%2C480116%2C480032%2C480034%2C480107%2C480040%2C480118%2C480098%2C480051%2C480110%2C480026%2C480111%2C480027%2C480108%2C480103%2C480115%2C480031%2C480035%2C480087%2C480086%2C480036%2C480119%2C480112%2C480010%2C480097%2C480155%2C480124%2C480054%2C480019%2C480099%2C480104%2C480171%2C480164%2C480041%2C480042%2C480121%2C480043%2C480044%2C480014%2C480052%2C480170%2C480037%2C480050%2C480012%2C480105%2C480169%2C480161%2C480174%2C480173&periodDateString=17%2F10%2F2022&Page=1&PageSize=50
Request Method: GET
Status Code: 200 OK
Remote Address: 10.6.243.40:443
Referrer Policy: strict-origin-when-cross-origin
Cache-Control: private
Content-Length: 406
Content-Type: application/json; charset=utf-8
Date: Mon, 17 Oct 2022 11:51:47 GMT
Server: Microsoft-IIS/10.0
Set-Cookie: LanguageValue=tr-TR; path=/
Set-Cookie: LanguageIndex=1; path=/
Vary: Accept-Encoding
X-AspNet-Version: 4.0.30319
X-AspNetMvc-Version: 5.2
X-Powered-By: ASP.NET
Accept: application/json, text/javascript, */*; q=0.01
Accept-Encoding: gzip, deflate, br
Accept-Language: tr-TR,tr;q=0.9,en-US;q=0.8,en;q=0.7
Connection: keep-alive
Cookie: BIGipServerASG-CP20-CORE-TEST2-443-GM.app~ASG-CP20-CORE-TEST2-443-GM_pool=1542653450.47873.0000; _hjSessionUser_744605=eyJpZCI6IjE2NjBiZDJhLWViMGUtNWY5OC04OTkxLTc4ZDM3YTEzOWJkNyIsImNyZWF0ZWQiOjE2NjQ4ODYyMDIzMDIsImV4aXN0aW5nIjp0cnVlfQ==; ASP.NET_SessionId=m3qxmvgkq4ur4tv1dcy5dg24; client_code=9931c35f-d1c6-46fd-a9ef-cced60ff1bd5; access_token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiQVRBTEFZIiwiVXNlcklkIjoiNzQ3MSIsIk9yZ2FuaXphdGlvbkNvZGUiOiJBQyIsIkZhY2lsaXR5Q29kZSI6IjQ4IiwiT3JnYW5pemF0aW9uSWQiOiIxIiwiRmFjaWxpdHlJZCI6IjEiLCJUb2tlbkNvZGUiOiJmNWI4MDkzMC0zYjZlLTRhNmItOTIwNC1lMzg2M2M0Njg3OTAiLCJqdGkiOiJlZTQxMzkxYy04OGU1LTQ3OGUtOGIwNi03NjdmYTAxZjVmZjMiLCJhdWQiOlsiNjdEREM3M0MtQjQ4Ni00MTdBLTk1NjMtRDIzRUYxOEMzNkM3IiwiOUE3NzVEODctRkFBMS00QTNCLTlFNDAtMDRCOTcwODUxQzNFIiwiMDg0OEIwQUEtNERFNC00RjU5LTk4OTgtNTZEM0E0QTZCMTVCIiwiOTkyQTY5NzgtQ0U4OS00NkJGLTk4MkEtQzc4MzJGNDk4QkYwIiwiMDc4MEIwQzUtNzBDQi00MzcwLTk2QjktQTk1NzhDOEQ4MDI3IiwiRDFGNkUzOEItQjdGMy00RTk1LTlEMkEtNjA0QjMyRTY3MUMwIiwiMDg0OEIwQUEtNERFNC00RjU5LTk4OTgtNTZEM0E0QTZCMTVBIl0sIm5iZiI6MTY2NjAwNzAxOSwiZXhwIjoxNjY2MDUwMjE5LCJpc3MiOiI2N0REQzczQy1CNDg2LTQxN0EtOTU2My1EMjNFRjE4QzM2QzcifQ.y93UK_lZDXV5nFK71xOvmrcJSHX9oVR3TFJQDcO6x-c; NameSurname=EROL%2BATALAY; themeCp=dark; langCp=tr; langIdCp=1; PersonnelCode=XX9331; FacilityName=Ac%C4%B1badem%20Ata%C5%9Fehir%20Hst.; FacilityId=1; OrganizationName=ACIBADEM; dateTimeFormatCode=tr-TR; LanguageValue=tr-TR; LanguageIndex=1

And Finaly I try the give dataSource remote but not work .But ı can gice that data ın Ajax call.Can you Help me ?

What can I do in this situation?

Data Source

Grid

asked on 17 Oct 2022

1 answer

699 views

Is there a way to declare a databound function for kendo grid inside an another grid?

I want to resize my grid that inside another grid. These grids are hierarchical. I wrote something for that but this works for second click. The processes I mentioned are seen in the pictures (firstclick, secondclick). the red circle shows extand button.

The js code block I wrote for solution but it does not work properly:

// The code inside the databound function of master grid
    $("#SiparisListeleGrid td a.k-icon").click(function () { // onclick for a element that opens second grid inside the row
        if ($(this).hasClass("k-i-expand")) { // if the grid is expand

            // uid of tr element
            var tr_UID = $(this).parents("tr").data("uid");

            // master grid
            var ustGrid = $("#SiparisListeleGrid").data("kendoGrid");

            $(ustGrid.dataSource.data()).each(function (i, item) {
                if (item.uid == tr_UID) {
                    var altGrid = $("#Grid_SiparisSatir_" + item.SipUstID).data("kendoGrid");
                    var rowCount = altGrid.dataSource.view().length;

                    $("#Grid_SiparisSatir_" + item.SipUstID).attr("style", "height:" + (rowCount * 40 + 125) + "px;");

                    $("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content").css("height", (rowCount * 40));

                    $("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content-locked").css("height", (rowCount * 40));
                }
            });
        }
    });
    // This code block only works on second clicking the expan button.
    // Does not recognize the second grid when clicked for the firs time
    // Should I use databound for second grid? However I do not know how can I do that.

Data Source

Grid

Hierarchical Data Source

Templates

answered on 13 Oct 2022

0 answers

75 views

how to set group data for Bullet chart

Hi, I want to create a bullet chart in the form of group data and set a unique target data, color, tooltip-template for each bar like "column chart" in picture but I can't find how to bind data for bullet chart

Is there a way to make the chart look like the example? Please advise if there is a more suitable graph format to display this type of data.

var testData3 = [
{ name: "data 1", data: [[200, 350], [150, 170]], color: "#E56997", target: { color: "#E56997" }, tooltip: { template: "#= dataItem #" } },
{ name: "data 2", data: [[210, 250], [190, 300]], color: "#062cda", target: { color: "#062cda" }, tooltip: { template: "#= dataItem.name #" } },
{ name: "data 3", data: [[350, 200], [200, 200]], color: "#fd0166", target: { color: "#fd0166" }, tooltip: { template: "#= value #" } },
{ name: "data 4", data: [[450, 200], [270, 400]], color: "#9F00FF", target: { color: "#9F00FF" }, tooltip: { template: "#= value #" } },
]

$("#testChart").kendoChart({
title: {
text: "Bullet",
font: fontSize
},
legend: { visible: false },
dataSource: {
data: testData3,
},
seriesDefaults: {
type: "verticalBullet",
overlay: { gradient: "none" },
labels: {
visible: true,
background: "transparent",
color: "white"
},
tooltip: {
visible: true,
}
},
series: testData3,
categoryAxis: {
categories: ["Jul", "Aug", "Sep"]
}
});

BulletChart

Charts

Data Source

updated question on 21 Sep 2022

1 answer

56 views

Datasource Sort not working on Chart

I want the chart in this dojo example to be in descending order. Currently it is in ascending order. I used the sort on the datasource but it doesn't seem to be reflecting in the chart. I'm sure i am missing something simple here but any help would be appreciated.

https://dojo.telerik.com/UNENAfos

Thanks.

Charts

Data Source