Questions on Kendo UI for jQuery Forum

0 answers

957 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

searchGrid.refresh();

after

options.success(result.Items || []);

because It is working when I click the refresh button, but that also didn't solve my problem

But nevertheless, the data is not shown in the grid, only when I manually click the refresh button of the grid (then the read function fires again).

It is really strange why it works for some users and for other users it isn't working.

FYI this is build in a SharePoint application,

Data Source

Grid

asked on 06 Sep 2022

1 answer

117 views

Need server-side Upload script used by Spreadsheet Server Import example

Using this example: https://demos.telerik.com/kendo-ui/spreadsheet/server-side-import-export

I can't find the server-side script being run by this config: saveUrl: "/kendo-ui/spreadsheet/upload"

Where can I find this server-side script?

Spreadsheet

Upload

answered on 06 Sep 2022

1 answer

265 views

Customised label for date range picker

How do i change the default start, end labels for daterangepicker?

DateRangePicker

answered on 05 Sep 2022

1 answer

134 views

Possible bug with column drag and drop when grid and gantt are in the same page

Hi,

I had to add the grid to part of my gantt page in the app and as soon as I added the grid, gantt drag and drop of columns started to fail.

On column drop lib fails with the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'lockable')
at init._allowDragOverContainers (kendo.all.js:311085:87)
at init._dropTargetAllowed (kendo.all.js:311085:87)
at init.drop (kendo.all.js:311085:87)
at init.trigger (kendo.all.js:311085:87)
at init._trigger (kendo.all.js:311085:87)
at init._drop (kendo.all.js:311085:87)
at kendo.all.js:311085:87
at init._withDropTarget (kendo.all.js:311085:87)
at init._end (kendo.all.js:311085:87)
at init.trigger (kendo.all.js:311085:87)

Problem is reproducible in the following Dojo

To reproduce issue, just try to change the order of the columns in the gantt widget.

Result: Widget breaks on drop and any drag or drop is not possible. Browser console shows error described above.

Expected result: Columns reordered

Tested with Chrome and Firefox.

If there is anything else I can do to help, please let me know.

Gantt

General Discussions

Grid

answered on 05 Sep 2022

1 answer

138 views

Endless or virtual scrolling for kendo spreadsheet

Is it possible to create endless or virtual scrolling for kendo spreadsheet?

Spreadsheet

answered on 05 Sep 2022

0 answers

128 views

endless scroll, server paging disabled, how to properly reload the grid?

if the record was updated, dataSource.read sometime duplicate the record, after reload we have one unchanged & one changed despite loading just one version from the server

Grid

asked on 01 Sep 2022

1 answer

385 views

How to make readonly all control in Kendo From

I want Kendo From to be readonly for all control, how do I do that?

Please help me, thanks!

Form

answered on 01 Sep 2022

1 answer

138 views

Problem to personalizzation event template in scheduler

Hello

I need your support, please, for the Scheduler (Kendo JQuery UI v2022.2.510)
I have 2 problems: the special characters in the description (example: euro symbol) and the multilines description of the appointments.

I would like to show next invoices to be paid.

The scheduler must be on mounth show, and all event are all day event.

On the event I need to show the number of document, buisness name and the amounth.

I'm trying to implement more filds in schema but the program ignore that.

I also tried to insert html tag in the description filed
(example:

<span class='IntestazioneDocumento'>PA / 1234567890 del 01/01/2000</span>
<span class='aDitta'>Alla ditta Business</span>
<span class='nRata'>Payment 1 di 1</span>
<span class='importo'>Tot. documento 123,45 &euro;</span>

)

but the tasg are showed as text.

In every case, the height of the result cell is too short to show all information.

I use the code

	kendo.ui.progress($("#scheduler"), false);
	
	urlData = url
	
    $("#scheduler").kendoScheduler({
        height: 600,
        views: [
            "day",
            "week",
            { type: "month", selected: true},
            "year"
        ],
        timezone: "Europe/Rome",
		allDayEventTemplate: $("#event-template").html(),
		eventTemplate: $("#event-template").html(),
        dataSource: {
            batch: true,
            transport: {
                read: {
                    url: urlData,
					type: "POST",
					contentType: "application/json; charset=utf-8",
					dataType: " json"
                },
                update: {
                },
                create: {
                },
                destroy: {
                }
            },
            schema: {
                model: {
                    id: "taskId",
                    fields: {
                        taskId: { from: "TaskID", type: "number" },
                        title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                        start: { type: "date", from: "Start" },
                        end: { type: "date", from: "End" },
                        startTimezone: { from: "StartTimezone" },
                        endTimezone: { from: "EndTimezone" },
                        description: { type: "html", from: "Description" },
                        recurrenceId: { from: "RecurrenceID" },
                        recurrenceRule: { from: "RecurrenceRule" },
                        recurrenceException: { from: "RecurrenceException" },
                        ownerId: { from: "OwnerID", defaultValue: '' },
                        isAllDay: { type: "boolean", from: "IsAllDay" },
						IntestazioneDocumento: { from: "IntestazioneDocumento" },
						RagioneSociale: { from: "RagioneSociale" },
						
                    }
                }
            }
        },
		editable: false,
        resources: [
            {
                field: "ownerId",
                title: "Owner",
                dataSource: [
                    { text: "CENTRAL", value: 0, color: "#0000ff" },
                    { text: "LOGGIA", value: 1, color: "#f8a398" },
                    { text: "GIOTTO", value: 2, color: "#2572c0" },
                    { text: "P_COMM", value: 3, color: "#118640" }
                ]
            }
        ]
    });
    $("input[ name=showFarm ]").change(function(e) {
        var checked = $.map($("input[ name=showFarm ]:checked"), function(checkbox) {
            return parseInt($(checkbox).val());
        });

        var scheduler = $("#scheduler").data("kendoScheduler");

        scheduler.dataSource.filter({
            operator: function(task) {
				return $.inArray(task.ownerId, checked) >= 0
            }
        });
    });
});

Scheduler

Templates

answered on 30 Aug 2022

1 answer

260 views

Grid error config 'pageable' error bootstrap tabs

Hi Telerik,

I created a demo code for error of Kendo Grid for jQuery with Bootstrap 5 error when settings 'pageable', please check and fix this

Link online: https://dojo.telerik.com/@vndevil/ICAPeBeg

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.802/styles/kendo.default-v2.min.css" />

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.2.802/js/kendo.all.min.js"></script>

    <!-- BEGIN Bootstrap 5.0.2 -->
    <!-- PHẢI để ở trên này, trước đống css tự viết ở dưới ^_^ -->
    <!-- CHƯA DÙNG ĐƯỢC BOOTSTRAP 5 do nó bỏ hàm Tooltip, đang chờ phiên bản udpate mới -->
    <link href="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="preload stylesheet" as="style"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
    <script src="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <!-- END Bootstrap 5.0.2 -->
</head>

<body>





    <div class="mb-3">
        <h1>Grid normal<h1>
                <div id="grid"></div>
                <div id="grid2"></div>

    </div>

    <div class="mb-3">
        <h1>Grid error config 'pageable' error bootstrap tabs<h1>

                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home"
                            type="button" role="tab" aria-controls="home" aria-selected="true">Grid 3 pageable config
                            error</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile"
                            type="button" role="tab" aria-controls="profile" aria-selected="false">Grid 4 pageable
                            config error</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact"
                            type="button" role="tab" aria-controls="contact" aria-selected="false">Grid 5 pageable
                            config error</button>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <div id="grid3"></div>
                    </div>
                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <div id="grid4"></div>
                    </div>
                    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                        <div id="grid5"></div>
                    </div>
                </div>

    </div>

    <script>
        var gridConfig = {
            columns: [
                { field: "productName" },
                { field: "category" }
            ],
            dataSource: [
                { productName: "Tea", category: "Beverages" },
                { productName: "Coffee", category: "Beverages" },
                { productName: "Ham", category: "Food" },
                { productName: "Bread", category: "Food" },
                { productName: "Tea", category: "Beverages" },
                { productName: "Coffee", category: "Beverages" },
                { productName: "Ham", category: "Food" },
                { productName: "Bread", category: "Food" },
                { productName: "Tea", category: "Beverages" },
                { productName: "Coffee", category: "Beverages" },
                { productName: "Ham", category: "Food" },
                { productName: "Bread", category: "Food" },
                { productName: "Tea", category: "Beverages" },
                { productName: "Coffee", category: "Beverages" },
                { productName: "Ham", category: "Food" },
                { productName: "Bread", category: "Food" },
                { productName: "Tea", category: "Beverages" },
                { productName: "Coffee", category: "Beverages" },
                { productName: "Ham", category: "Food" },
                { productName: "Bread", category: "Food" },
                { productName: "Tea", category: "Beverages" },
                { productName: "Coffee", category: "Beverages" },
                { productName: "Ham", category: "Food" },
                { productName: "Bread", category: "Food" }
            ],
            pageable: {
                pageSize: 5,
                buttonCount: 3,
                messages: {
                    display: '{0} - {1} of {2:#,##} items'
                }
            }
        };

        $("#grid").kendoGrid(gridConfig);
        $("#grid2").kendoGrid(gridConfig);
        $("#grid3").kendoGrid(gridConfig);
        $("#grid4").kendoGrid(gridConfig);
        $("#grid5").kendoGrid(gridConfig);
    </script>
</body>

</html>

Grid

answered on 29 Aug 2022

1 answer

138 views

Heatmap

Is there a way to have the x-axis at the top of the heatmap and the items shown below the x-axis?

Heatmap

answered on 29 Aug 2022