Telerik Forums
Kendo UI for jQuery Forum
1 answer
292 views

Here is HTML Code of Date Picker

 

<input kendo-date-picker="" k-scope-field="dteNewDueDateDate" k-format="'yyyy-MM-dd'" k-on-change="undefined" custom-date="" ng-model="vm.target.newDueDate" required="" ng-class="{ 'is-invalid': (changeDueDateForm.dteNewDueDateDate.$dirty || changeDueDateForm.$submitted) &amp;&amp; changeDueDateForm.dteNewDueDateDate.$error.required }" ng-disabled="false" aria-label="New Due Date" name="dteNewDueDateDate" id="dteNewDueDateDate" entity="undefined" field="undefined" config="" class="ng-pristine ng-untouched k-input-inner ng-empty ng-invalid ng-invalid-required" data-role="datepicker" type="text" role="combobox" aria-expanded="false" aria-haspopup="grid" aria-controls="dteNewDueDateDate_dateview" autocomplete="off" aria-disabled="false" aria-readonly="false" aria-invalid="true" style="">

 

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});

Neli
Telerik team
 answered on 07 Dec 2023
1 answer
627 views

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 }

Neli
Telerik team
 answered on 07 Dec 2023
1 answer
285 views

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>
Anton Mironov
Telerik team
 answered on 07 Dec 2023
1 answer
114 views

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

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

 

Neli
Telerik team
 answered on 07 Dec 2023
1 answer
186 views

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?
Neli
Telerik team
 answered on 07 Dec 2023
1 answer
153 views

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.

Neli
Telerik team
 answered on 07 Dec 2023
1 answer
154 views
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!
Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 06 Dec 2023
1 answer
105 views

Hello Teacher:

          My front-end code:

var dataSource = new kendo.data.DataSource({
                type: "aspnetmvc-ajax",
                pageSize: 25000,
                serverPaging: false,
                serverGrouping: false,
batch: true,
                transport: {
                    read: {
                        url: urlRead,
                        data: kendo.antiForgeryTokens(),
                        type:"GET"
                    },

                    create: {
                        url: urlCreate,
                        data: kendo.antiForgeryTokens(),
                        cache: true,

                    },
                    update: {
                        url: urlUpdate,
                        data: kendo.antiForgeryTokens(),
                        cache: true,
                    },
                    destroy: {
                        url: urlDestroy,
                        data: kendo.antiForgeryTokens(),
                        cache: true
                    },

                    parameterMap: function (data, type) {
                        //if (type == "create") {
                        //    // send the created data items as the "models" service parameter encoded in JSON
                        //    return { models: kendo.stringify(data.models) };
                        //}
                    }

                },
                //requestStart: function() {
                //    kendo.ui.progress($("#"+gridName), true);
                //},
                //requestEnd: function() {
                //    kendo.ui.progress($("#"+gridName), false);
                //},
                sync: function (e) {


                },
                schema: {
                    data: "Data",
                    total: "Total",
                    errors: "Errors",
                    model: model,
                    errors: function (response) {
                        //ShowNotification(response);
                        return response.error;
                    }
                },
                error: function (e) {
                    //ShowNotification("Error");
                    dataSource.cancelChanges();
                }
            });
            //dataSource.bind("error", function () { ShowNotification("dsError") });

            grid.setOptions({
                dataSource: dataSource,
                persistSelection: true,
                navigatable: true,
                resizable:true,
                reorderable:true,
                dataBound: function (e) {
                    if (e.sender.dataSource.view().length > 0) {
                        e.sender.select("tr:eq(0)");
                        grid.trigger("change");
                        grid.unbind("dataBound");
                    }

                }
            });

Processing data in batches, I don't know how the frontend sends backend requests and how the backend receives requests?

                                        
Neli
Telerik team
 answered on 06 Dec 2023
2 answers
163 views

Hi team,

I need to limit the number of entries in an editable grid.

Consider the following dojo:

https://dojo.telerik.com/eDeDEtAM

Number of rows is limited to 2. Works fine before 2023-R1-SP1 and fails since.

I tried to find a workaround without success. I tried beforeEdit event but it fails aborting creation of a new row...

It's a regression issue, please help!

Best regards,

Laurent.

 

Zornitsa
Telerik team
 answered on 06 Dec 2023
1 answer
104 views

I was asked a question a long time ago, but due to communication difficulties I never received the answer I requested.

I've created two example links to ask my question.



To find a unit price of 9,000 won or more in the program below:
Enter ">9000" in the Unit Price field.
This is a feature I developed.

https://www.speedmis.com/_mis/index.php?gubun=3032&isMenuIn=Y&isAddURL=Y

-->

https://www.speedmis.com/_mis/index.php?gubun=3032&isMenuIn=Y&allFilter=[{"operator":"contains","value":">9000","field":"dangga"}] &recently=N&isAddURL=Y





You cannot enter ">9000" if the field is defined as a number.

https://www.speedmis.com/_mis/index.php?gubun=1247&isMenuIn=Y

There was also an auto-completion function when writing numbers.
Special coding allows completion to begin automatically rather than in a number box between numbers.



Please edit the link below if you wish. thank you

https://dojo.telerik.com/OroMIBAK

Neli
Telerik team
 answered on 06 Dec 2023
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
Licensing
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
+? more
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?