Questions on Kendo UI for jQuery Forum

1 answer

1.0K+ views

Clear date on entering invalid dates in datepicker

Hello kendo,

When an user is entering the date with an invalid format like dd.mm.yyyy (so 27.06.2023) into our datepicker, it looks like the date is accepted in the UI, but the value is actually empty. What is confusing for the user. To fix this we would like to clear the value when an user entered an invalid date. How can we do this ?

I found an example for the datetimepicker, but it requires an initial filled in date, if you start with an empty value it's not working. The problem comes from the problem that it's impossible to tell if the value is empy or invalid.

https://docs.telerik.com/kendo-ui/knowledge-base/prevent-invalid-values
PS the script has an bug and is not working, add to following to the script to get it working:

$("#datetimepicker").kendoDateTimePicker({
change: onChange,
close: onClose,
open: onOpen,
value: new Date()
});
var lastValidDate = $("#datetimepicker").data('kendoDateTimePicker').value();
});
</script>

Regards,
Jeroen

DatePicker

Validation

answered on 30 Jun 2023

1 answer

162 views

OptionLabel not working with ValueMapper

https://dojo.telerik.com/EgiqeKug

I have a kendo dropdownlist with virtualization. I am including an optionLabel and a valueMapper. Unfortunately, including the valueMapper causes the option label to not show up. Is there a fix for this? Here is a dojo showing the issue.

DropDownList

updated answer on 29 Jun 2023

1 answer

112 views

Kendo UI JQuery 2023.1.425 Grid not showing page numbers if no data received

I am showing pagination at bottom of Kendo Grid and data is coming dynamically, but when data is not there and the total parameter is 0 i am observing nothing in the pages. For this see the below screenshot

How we can resolve this issue?

Grid

Pager

answered on 29 Jun 2023

1 answer

498 views

Kendo UI pdf is opening new window where pop up block is stopping.

I am trying to attach pdf file to email and send email notifications to users. Problem is when try to use kendo.saveAs its opening in another window . If user browser is having pop up block, the email function is not working as it is not allowing open other window. Is there any way that i can do this in same window or any other option?

$.ajax({
                        type: "POST",
                        data: data,
                        url: "IUA/Submit",
                        success: function (result) {
                            if (result.Id !== 0) {
                                alert("Your application has completed the review phase and is confirmed complete. Your PIN will be " + result.Id + ". To complete your submission, please click the OK button below.");
                                $('#loading').hide();

                                kendo.drawing.drawDOM($("#mainDiv"))
                                    .then(function (group) {
                                        // Render the result as a PDF file
                                        return kendo.drawing.exportPDF(group, {
                                            paperSize: "auto",
                                            margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
                                        });
                                    })
                                    .done(function (data) {
                                        // Save the PDF file
                                        kendo.saveAs({
                                            type: 'POST',
                                            dataURI: data,
                                            fileName: "IUAEnrollment.pdf",
                                            proxyURL: '@Url.Action("SavePDF", "IUA")',
                                            forceProxy: true,
                                            proxyTarget: "_blank"
                                        });
                                        displayLoading("#formDiv", false);
                                        location.reload();
                                    });
                            } else if (result.IsDuplicateRec == true) {
                                $('#loading').hide();
                                $("#divDuplicate").show();
                                $("#captchaDiv").load(location.href + " #captchaDiv>*", "");
                            } else if (result.IsMVCCaptcha == false) {
                                $('label[for="lblCaptchaErr"]').show();
                                $("#captchaDiv").load(location.href + " #captchaDiv>*", "");
                                setTimeout(WaitUntilLoad, 6000);
                            }
                        },
                        error: function () {
                            $('#loading').hide();
                            alert("Error occured during the submission. Please contact helpdesk.");
                        }
                    });

Drawing API

answered on 28 Jun 2023

1 answer

426 views

[Solved] Add PDF to PDFViewer from AJAX

Hi. I'm using this plugin for jQuery to download a PDF via AJAX. Here's the code that fetches the PDF from ASP.NET Web API:

fetchFile: function (id) {
	return new Promise(function (resolve, reject) {
		$.ajax({
			async: true,
			dataType: "native",			// Uses the jquery-ajax-native plugin for blobs.
			type: "POST",
			url: `https://someapp.org/api/files/file/fetch/${id}`,
			xhrFields: {				// Uses the jquery-ajax-native plugin for blobs.
				responseType: "blob"
			},
			cache: false
		}).done(function (data) {
			return resolve(data);
		}).fail(function (xhr, status, error) {
			const errorObj = new Error(xhr.responseText || error);
			return reject(errorObj);
		});
	});
}

I would like to feed the BLOB data returned by the fetchPdf function to set the PDFViewer's data. Is this possible? Maybe PDFViewer can fetch via AJAX directly. Any examples?

Thank you.

PDFViewer

answered on 28 Jun 2023

0 answers

247 views

How to detect if data in input type number kendo grid is from the kendo grid read method or from the user ?

I have this field in my kendo grid column :

field: "tauxAcquisEntree",
template: '#if (tauxAcquisEntree === 0){#'
                    + '<div class="text-right">#= tauxAcquisEntree #</div>'
                    + '# }else if (tauxAcquisEntree > 1 ){#'
                    + '<div class="d-flex justify-content-end"><div class="input-group d-flex flex-nowrap percent-input"> <input id="fraisent" name="fraisent" value="#= tauxAcquisEntree #" max="4"   class="form-control text-center"  min="1" type="number" step=1 pattern="[0-9]$" autocomplete="off"   /> </div></div>'
                    + '# }else{#'
                    + '<div id="fraisOne" name="fraisOne" class="d-flex justify-content-end"><div class="input-group d-flex flex-nowrap percent-input"> <input value="#= tauxAcquisEntree #" class="form-control text-center" max="1" min="1"  type ="number" pattern="[0-1]$" autocomplete="off" readonly  /> </div></div>'
                    + '# }#'
                ,

I have a condition when i get the field "tauxAcquisEntree" from the "database" if it's equal to "1" the input type number becomes readonly.

The problem is when the user changes the value of the input type number in the front and it's equal to "1" the template condition gets triggered which is a behavior that i don't want to happen.

To summarize how can i get the if condition in the template to be applied only if the value if from backend or the database (and not what the user typed) ?

Grid

MVVM

updated question on 28 Jun 2023

1 answer

248 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

2.2K+ views

how to dynamically change the (svg) icon of a Kendo .UI toggleButton (R2 2023)?

I'd like to show / hide or change the icon of a toggle button and currently struggle getting this to work after changing to the current version.

I had no problems with older versions (2019 / 2021).

What I'm trying to achieve ist something like

setOptions({icon: "check"})

and (re)render()

I also tried to take the road via kendo.ui.icon(element....) and kendo.html.renderButton / renderIcon but so far to no avail.

Any hint would be greatly appreciated.

Kind regards

Frank

Button

Toolbar

updated answer on 26 Jun 2023

1 answer

124 views

Kendo UI grid filter options needs to be reorder

Hi,

I want the below marked 'Contains' filter condition should be the default filter condition. Please help me how to move it to the top.

I'm trying to make changes in the kendo.filtermenu.min.js and kendo.filtermenu.min.js.map files but no luck

I'm using Kendo UI v2022.2.510 version

Filter

Grid

answered on 26 Jun 2023

4 answers

1.7K+ views

[Solved] grid collapse/exand all groups

I am looking for a method that would be called to toggle expand/collapse all groups (the grid has the attribute groupable).

You have this in the Telerik Silverlight Grid.

Grid

answered on 25 Jun 2023