Questions on Kendo UI for jQuery Forum

1 answer

148 views

Kendo Grid jQuery - Select All Rows Across Pages with Header Checkbox

Hi team,

I have a question regarding the Kendo Grid in jQuery. Is there a way to implement a functionality where clicking the header checkbox on the first page selects or deselects all rows on that page and across all pages, including updating all the header checkboxes?

Thanks,
Swapnil

General Discussions

Grid

answered on 12 Dec 2023

1 answer

301 views

I want To Set Date From Date Picker using JavaScritp /Jquery in Console

Here is HTML Code of Date Picker

I have Tried this and Similar Solutions but all in Vain. Please help me to find its solution

$(document).ready(function() { // Wait for the document to be fully loaded // Initialize the Kendo UI DatePicker $("#dteNewDueDateDate").kendoDatePicker({ format: "yyyy-MM-dd" // Add any other configuration options you need }); // Set the value after initialization setTimeout(function() { var datePicker = $("#dteNewDueDateDate").data("kendoDatePicker"); var targetDate = new Date('2023-12-04'); datePicker.value(targetDate); datePicker.trigger("change"); }, 100); // Adjust the timeout duration if needed});

DateInput

DatePicker

DateRangePicker

answered on 07 Dec 2023

1 answer

645 views

How to limit PDF Viewer to render limited number pages?

Hello,

I'm using PDF Viewer with PDF.js processing and want to limit the number of pages displayed when receiving a large PDF file because its rendering makes the page load very slow.

For example, I receive a file with 100 pages from the server and I want to render and display only the first 10, and if the user wants to view the rest, he can download the entire file.

I found some solution on github, but it requires changes to the source code of the kendo.js library. Can I do something similar with just the PDF Viewer API?

const MAX_PAGES = 3;

PDFJS.getDocument(params).then((doc) => {
    Object.defineProperty(doc, 'numPages', { value: Math.min(doc.numPages, MAX_PAGES) });
    this.pdfViewer.setDocument(doc);
    // Other stuff
}

PDFViewer

answered on 07 Dec 2023

1 answer

295 views

set icon to custom command in IconClass conditionally row field

Hello

i need to change custom command icon depend on row field for instance "Status" i tried this code but it doesn't work

@using EliteInsurer.Areas.Admin.Dto;
@using Kendo.Mvc.UI;
<div class="k-rtl">
@(
Html.Kendo().Grid<HostedTaskDto>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(m => m.Status);
columns.Command(p =>
{
p.Custom("StartTask").Text(" ").Click("changestatus").IconClass("#=getCommandIcon#");

});

})
.ToolBar(tools =>
{
tools.Excel();
tools.Create().Text(" ");
})
.Pageable(p => p.PageSizes(true).Input(true))
.Sortable()
.Filterable(fr => fr.Mode(GridFilterMode.Row))
.Resizable(resize => resize.Columns(true))
.Scrollable()
.Excel(ex => ex.AllPages(true))
.Editable(e => e.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.GroupPaging(true)
.PageSize(50)
.Read("GetTasks", "Task")
.Create("NewTask", "Task")
.Update("EditTask", "Task")
.Destroy("DeleteTask", "Task")
.PageSize(20)
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Status).Editable(false);

})

)
)
</div>
<script>
function forgeryToken() {
return kendo.antiForgeryTokens();
}

function changestatus(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

$.ajax({
type: "POST",
url: '@Url.Action("ChangeTaskStatus", "Task")',
datatype: "json",
traditional: true,
data: { Id: dataItem.Id },
success: function (data) {
if (data.success == true) {
var grid = $("#grid").data("kendoGrid");
grid.dataSource.read();
alert(data.message);
}
},
error: function (data) {
alert(data.message);
console.log(error);
}

});
}
function getCommandIcon(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var status = dataItem.Status;
console.log(status);
if (status === "1") {
return "k-icon k-i-stop";
} else {
return "k-icon k-i-play";
}
}

</script>

Grid

answered on 07 Dec 2023

1 answer

120 views

Multiple selection color change option on Filtering Data is not working on New Kendo Update.

On previous updates, selected filters are showing in blue colour.

But now even applying single or multiple filters still color not changed.

Filter

View

answered on 07 Dec 2023

1 answer

195 views

Parameters uploadUrl kendoFileManager

Hi,

I need to send some dynamic parameters, (path and others), when uploading files from js.
I've tried several ways, without success. Can anyone help me?

FileManager

Upload

answered on 07 Dec 2023

1 answer

160 views

kendo ui for jquery. Where are child columns stored in setOptions

I cannot work out how to set the CHILD grid column widths and positions. I can set all the master grid column widths and positions.

When calling grid.getOptions(), I can only see a reference to the MASTER grid column properties.

I can set all the master grid column widths and positions with this function:

function setColumFormat(){
    var grid = $("#kdClaimStatus").data("kendoGrid");  
    var options = localStorage["grid-column-options"];  
    if (options) {  
        var parsedOptions = JSON.parse(options);  
        var columns = parsedOptions.columns;
        grid.setOptions({ columns: columns });  
    }  
}

But I cannot work out how to set the CHILD grid column widths and positions. I have searched Telerik documentation and cannot find any solution.

Grid

answered on 07 Dec 2023

1 answer

163 views

How to make only the spreadsheet block go full screen with its built-in popup?

Hi,

I'm trying to incorporate a full-screen function into the spreadsheet toolbar with the following configuration:

$("#spreadsheet").kendoSpreadsheet({
    sheets: sheets,
    toolbar: {
        home: [
        {
            type: "button",
            text: "Full Screen",
            showText: "overflow",
            icon: "k-icon k-i-full-screen",
            click: function () {
                if (document.fullscreenElement) {
                    document.exitFullscreen();
                } else {
                    $('#spreadsheet').get(0).requestFullscreen();
                }
            }
        }
        ]
    }
});

After clicking the full-screen button, the spreadsheet block goes full screen, but certain built-in popups don't show (e.g., validation list, warning popups, color picker, export popups...). I suspect this is because all the elements that aren't showing are outside my spreadsheet element. Is there a solution to this, or another way to make the spreadsheet block go full screen?

Thanks for your help!

Spreadsheet