Questions on Kendo UI for jQuery Forum

0 answers

49 views

Hello,

I ran into an relatively simple issue and I just can not find out how to do it.
I have a Donut Chart which I want to fill with remote data.

function createCharts() {
                var showLabels = $(document).width() > 677;

                $("#overview-chart").kendoChart({
                    theme: "sass",
                    dataSource: {
                        data: [
                            { value: countOrderFinished, type: "New Orders" },
                            { value: 30, type: "Orders in Process" },
                            { value: 180, type: "Finished Orders" },
                        ]
                    },
                    series: [{
                        type: "donut",
                        field: "value",
                        categoryField: "type",
                        startAngle: 70,
                        holeSize: 55
                    }],
                    legend: {
                        position: "bottom"
                    }
                });

                kendo.resize($(".k-grid"));
            }

            $(document).ready(createCharts);
            $(document).bind("kendo:skinChange", createCharts);

            $(window).on("resize", function () {
                kendo.resize($(".k-chart"));
            });

How would I manage to fill my Variable countOrderFinished with remote data? I tried this way, but it did not work:

var countOrderFinished = new kendo.data.DataSource({
                type: "json",
                read: {
                    url: "Services/OrderServices.asmx/GetCountOrderFinished",
                    contentType: 'application/json; charset=utf-8',
                    type: "POST"
                },
            });

I think it is a simple solution but I just cant get it.

Thank you for your Help!

Data Source

asked on 01 Mar 2023

0 answers

54 views

dir-paginate equivalent

Good afternoon,

I've been working on an effort to replace angularJS with Kendo for JQuery. For the most part, there's been a solution for everything, but I'm running into a bit of a hiccup. Is there some sort of equivalent I can use to replace the dir-pagination directive (which can be applied to things like TR or LI elements) that angular uses?

Thanks,

asked on 13 Feb 2023

0 answers

74 views

How to set attributes to options in Select?

Hi guys,

I want set custom attributes to options in select but I could not find a way to do that. Is there any way to do so?

Data Source

DropDownList

asked on 26 Jan 2023

0 answers

75 views

After resetting the grid's state, page and pagesize (UI) are not updated

I am resetting the grid's state like this:

        const $grid = $gridRoot.find('.xifacts-simple-grid');
        const grid = $grid.data('kendoGrid');
        grid.dataSource.filter({});
        grid.dataSource.sort({});
        grid.dataSource.pageSize(5);
        grid.clearSelection();
        grid.dataSource.page(1);

All is good, the grid state is correctly reset (it goes to page 1) - but it still shows the old page that was selected.

Same for the Items/Page.

Here is a gif for the issue:

Data Source

Grid

asked on 10 Jan 2023

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

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