Questions on Kendo UI for jQuery Forum

1 answer

61 views

Rotate Cell 90 Degree in Exported Excel File Using Kendo Grid

Hi, I need to rotate cell 90 degree in exported excel file as shown below. I'am using kendo grid jquery export excel feature. I don't find any documentation about it.

Data Source

Grid

answered on 01 Feb 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

1 answer

196 views

Debounce Search Panel on KendoGrid

Hi,

Love the search bar addition to the Kendo Grid. Thank you!

The underlying DataSource is set to serverFiltering = true and so I was wondering if it was possible to only begin the search once the user has entered 3 characters or more? The current behavior is that calls to the back end are made as soon as the user starts typing in the search bar but I wanted to see if there was a way to delay that until after the user enters 3 or more characters.

I guess I could achieve this by defining my own read method under the underlying DataSource transport but I wanted to see if there was a more elegant way to achieve this.

Regards,

Data Source

Grid

answered on 14 Dec 2022

1 answer

72 views

Kendo grid loading too slow for a reasonable 1500 rows of data. Total size 250mb.

Hi all,
I am having some performance issue with Kendo grid when retrieving around 1500 rows of data equivalent to the size of 250mb. I was actually able to make it load faster by setting ServerOperation(true); But using this broke my import export functionality being used in the page. The reason is unknown. The only change I made was setting the serverOperation to true. Is there any way to improve performance with ServerOperation as false. Personally i think the amound of data that actually renders shouldn't hamper the performance as it is doing right now. Any help will be appriciated. Thank you!

Data Source

Grid

answered on 12 Dec 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

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

698 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

678 views

Data in kendogrid only shown after refreshing the grid manually, for some users

I have a strange problem, that only happens to some users.

The data is not shown for some users, although there is data. It's a really complexed application, so I hope I can give enough information.

function getWorkListItems() {

        setFieldValues();
        options = localStorage["grid-options" + viewStatesFilter];
        var gridSettings = {
            selectable: "multiple row",
            sortable: true,
            filterable: true,
            pageable: {
                refresh: true,
                pageSizes: [10, 20, 50, 100],
                buttonCount: 5
            },
            resizable: true,
            autoBind: !options,
            columns: [
                {
                    field: "EncryptedID",
                    hidden: true
                },
                {
                    field: "RequestHandler",
                    title: "Behandelaar",
                },
                {
                    field: "SpecialCharacteristicsIndicator",
                    title: "Bijzonder kenmerk",
                    filterable: { multi: true }
                },
                {
                    field: "CustomerRequestID",
                    title: "Aanvraag ID",
                },
                {
                    field: "ExternalID",
                    title: "SD nummer"
                },
                {
                    field: "Facility",
                    title: "Vestiging"
                },
                {
                    field: "PostalCode",
                    title: "Postcode",
                    width: '80px'
                },
                {
                    field: "BuildingNumber",
                    title: "Huisnummer",
                    width: '80px'
                },
                {
                    field: "Status",
                    title: "Status"
                },
                {
                    field: "DocumentDateTime",
                    title: "Aanvraag datum",
                    format: "{0: dd-MM-yyyy}"
                },
                {
                    field: "PlannedWeekNumber",
                    title: "Wensweek"
                },
                {
                    field: "TypeOfWork",
                    title: "Dienst"
                },
                {
                    field: "SubTypeOfWork",
                    title: "Subdienst."
                },
                {
                    field: "ConcernsMultipleAddressesIndicator",
                    title: "Meerdere adressen",
                    filterable: { multi: true }
                },
                {
                    field: "IsCombiRequestIndicator",
                    title: "Solo/Combi",
                    filterable: { multi: true }
                }
            ],
            change: function () {
                var row = this.select();
                var id = this.dataItem(row[0]).EncryptedID;
                window.location = 'Bpm/Werkvoorraad/WerkvoorraadDetails.aspx?rowtag=' + id + '&source=' + window.location;
            },
            sortable: {
                allowUnsort: false
            }
        };

        var customFields = [{
            field: "DocumentDateTime",
            filterable: {
                ui: function (element) {
                    element.kendoDatePicker({
                        format: '{0: d-M-yyyy}'
                    });
                    element.attr("readonly", true);
                },
                operators: {
                    string: {
                        eq: "Is gelijk aan",
                        gt: "Is na",
                        lt: "Is voor",
                    }
                }
            },
            format: '{0: d-M-yyyy}',
        }, {
            field: "BuildingNumber",
            sortable: {
                compare: function compare(a, b) {
                    return a.BuildingNumber - b.BuildingNumber;
                }
            }
        }];

        $.each(customFields, function (customFieldIndex, customField) {

            $.each(gridSettings.columns, function (columnIndex, column) {
                if (column.field == customField.field) {
                    if (customField.sortable) {
                        column.sortable = customField.sortable;
                    }
                    if (customField.template) {
                        column.template = customField.template;
                    }
                    if (customField.headerTemplate) {
                        column.headerTemplate = customField.headerTemplate;
                    }
                    if (customField.filterable) {
                        column.filterable = customField.filterable;
                    }
                    if (customField.filter) {
                        column.filter = customField.filter;

                    }
                    if (customField.format) {
                        column.format = customField.format;

                    }
                }
            });
        });

        searchGrid = $("#searchGrid").kendoGrid(gridSettings).data("kendoGrid");        
        searchGrid.thead.find("[data-field=IsSelected]>.k-header-column-menu").remove();
        searchGrid.thead.find("[data-field=ID]>.k-header-column-menu").remove();

        loadData();

    }

function loadData() {
        debugger;
        var url = BpmCore.GetRelativeWebUrl() + "_vti_bin/DeviationService.svc/GetGebruikersVestigingen";
        $.ajax({
            type: "POST",
            url: url,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            beforeSend: null,
            xhrFields: {
                withCredentials: true
            },
            success: function (result) {
                getGebruikersVestigingenSuccessCallback(result);

            },
            error: function (e) {
                getGebruikersVestigingenErrorCallback(e);
            }
        });


    }

function getGebruikersVestigingenSuccessCallback(result) {
        var request = {
            CustomerRequestID: $("#txtAanvraagID").val(),
            States: $("#selStates").val() == null ? states : $("#selStates").val(),
            RequestHandler: $("#txtBehandelaar").val(),
            Street: $("#txtStraat").val(),
            PostalCode: $("#txtPostcode").val(),
            BuildingNumber: $("#txtHuisnummer").val(),
            City: $("#txtPlaats").val(),
            FacilityIDs: result.data[0].Vestiging
        };

        enexis.helpers.storage.setStorage(viewStatesFilter, request, "json");

        var ds = new kendo.data.DataSource({
            transport: {
                read: function read(options) {
                    enexis.services.customerrequests.find(request, function (result) {
                        if (result.Success) {
                        } else {
                            enexis.helpers.forms.showError(result.ErrorMessages);
                        }

                        options.success(result.Items || []);
                        searchGrid.refresh();
                    }, function (result) {
                        options.error(result);
                    });
                }
            },
            schema: {
                model: {
                    fields: {
                        DocumentDateTime: {
                            type: 'date',
                            parse: function (date) {
                                return kendo.parseDate(date, "dd-MM-yyyy");
                            }
                        }
                    }
                }
            },
            pageSize: 20,
            sort: { field: "DocumentDateTime", dir: "asc" }

        });

        searchGrid.setDataSource(ds);
        searchGrid.dataSource.read();
       
        searchGrid.thead.find("[data-field=IsSelected]>.k-header-column-menu").remove();
        searchGrid.thead.find("[data-field=ID]>.k-header-column-menu").remove();
        if (options) {
            searchGrid.setOptions(JSON.parse(options));
        }
    }

At first Id didn't have the line

searchGrid.dataSource.read();

I added this, because sometimes the read function of the grid is not fired (for users who get the data this was working)

When I added that line the read function was fired and the data was collected (through the webapi). I can see that because result.Items countains the items.

I also added the line