Telerik Forums
Kendo UI for jQuery Forum
13 answers
1.9K+ views
Is this a standard piece of functionality?

If so, how do you do it with a standard grid?

If it's not, are there currently any plans for it in future releases?

Thanks!
Gregor
Top achievements
Rank 1
 answered on 04 Jan 2018
8 answers
1.5K+ views

I have a grid with endless scrolling. I want to load filtered rows to the grid. Any other operation shoud be performed on the client side. 

I expect the grid will send a request only on a first grid loading and when I set a new filter. 

Sorting, grouping, paging should be done on a client side. 

BUT when I scroll down my grid endless scrolling is activating and grid sends a request to the server even if I set serverPaging to false.

My source code:

01.function loadGrid(profile) {
02.        $("#Grid").kendoGrid({
03.            dataSource: dataSource(profile),
04.            columns: profile.Columns ? JSON.parse(profile.Columns) : [],
05.            scrollable: {
06.                endless: true
07.            },
08.            pageable: {
09.                numeric: false,
10.                previousNext: false
11.            },
12.            groupable: true,
13.            sortable: {
14.                mode: "multiple",
15.                allowUnsort: true,
16.                showIndexes: true
17.            },
18.            filterable: {
19.                mode: "row"
20.            },
21.            selectable: "multiple cell",
22.            navigatable: true,
23.            resizable: true,
24.            reorderable: true,
25.            columnMenu: {
26.                filterable: false
27.            }
28.        });
29.    }
30. 
31.    function dataSource(profile) {
32.        return new kendo.data.DataSource({
33.            type: "webapi",
34.            pageSize: 50,
35.            transport: {
36.                read: {
37.                    url: "BI",
38.                    type: "POST"
39.                }
40.            },
41.            group: JSON.parse(profile.Groups),
42.            sort: JSON.parse(profile.Sortings),
43.            filter: JSON.parse(profile.Filters),
44.            serverFiltering: true,
45.            serverPaging: false,
46.            serverSorting: false,
47.            serverGrouping: false,
48.            serverAggregates: false
49.        });
50.    }

Stefan
Telerik team
 answered on 04 Jan 2018
7 answers
997 views
I would like to disable some icons like freeze panes, table icon, Data tab etc in the toolbar . How to do that in Kendo UI ? I only saw an option like toolbar : false for completely removing the toolbar ( not disabling some tabs and icons inside the toolbar )
Veselin Tsvetanov
Telerik team
 answered on 04 Jan 2018
1 answer
173 views

Hi,

I want to make the datepicker .k-input completely accessible for which I need to separately call out MM when focus is on MM alone and similarly for DD and YYYY for day and year respectively. Is there some way via some jQuery custom code to achieve this functionality as well? 

Stefan
Telerik team
 answered on 04 Jan 2018
14 answers
773 views
Hello,

I'm trying to enable virtualization in the kendoui web grid. Everything works as expected if i'm using a mouse.
However when using a touch device scrolling doesnt seem to work with a swipe gesture.

below is an example of how i'm implementing the kendo grid.
var customerVM = kendo.observable({
    customers: new kendo.data.DataSource({
        data: eval('(' + host.GetItems() + ')'),
        pageSize: 10
    })
});
 
$("#customer-grid").kendoGrid({
        columns: [
            { field: "CustId", title: "ID" },
            { field: "Name", title: "Name" }
        ],
        dataSource: customerVM.customers,
        filterable: true,
        groupable: false,
        reorderable: true,
        resizable: true,
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        height: "630px",
        selectable: "single",
        scrollable: {
            virtual: true
        }
    });
 
 kendo.bind($("#customer"), customerVM);
Any idea's what i'm doing wrong?

Thanks much,
~Boots
F3M
Top achievements
Rank 2
Iron
Iron
 answered on 04 Jan 2018
4 answers
1.3K+ views

I have a grid where we need to ellipsize content being displayed. (Mobile devices are important)   This means each row has a fixed height and the grid works well.  The trade-off is that some columns do not show all the data (names of business entities and clients) for instance a <td> item might show "A long busines..." instead of "A long business name 01" or "A long business name 02". 

The grid provides the facility to export to Excel and to PDF.  For the PDf export I change the css markup (in an onPDFExport event) so that the text is fully displayed.  This causes rows which has previously ellipsized/truncated text to flow over to a second line and the row becomes double the height. The PDF export now breaks as the calculation of the number of rows that fit on the page appears to have been made before the onPDFExport event fires.  If I had 20 single height rows fitting on a page and now have the first 5 of those rows becoming double the height, only the first 15 items now fit on the page and items 16 to 20 get "lost" at the end of page 1.  page 2 then starts at item 21.

Does anybody know how I can get the calculations done after I make my CSS change but before the export?  I thought of changing the paperSize before the CSS change to let's say A3 and then go to A4 after the change but I do not know how I can do this in a javascript function.

 

Jaco
Top achievements
Rank 1
 answered on 02 Jan 2018
8 answers
929 views

Hello 

I experienced some missing(?) translation using kendoDateTimePicker.

I have set these options:

<input id="datetimepicker" />
<script>
$("#datetimepicker").kendoDateTimePicker({
    culture: "de-DE",
    dateInput: true,
});
</script>

 

The option dateInput shows date/time/.... as text (help) inside the input field if it's empty, what is nice. Setting the culture to any German language country (probably a problem in all other non English countries too) the help text still appears in English. See attachment as it looks like with the sample code above. Inside the calendar datepicker window the translation (in that case German) is set and correct.

It's not a big issue and I don't know if that is wanted or just overseen doing the translations.

Regards

 

 

 

Tayger
Top achievements
Rank 1
Iron
Iron
 answered on 02 Jan 2018
16 answers
874 views
I have a KendoGrid with Virtual Scrolling enabled.  When I view my site on an iPad, the scrollbar is missing from the grid, and the "flick" scrolling effect does not work.  The Grid scrolls a down a few items then stops when I try to flick to scroll.  

You can see this behavior by pulling up the Scrolling Virtualization demo on an iPad:
http://demos.kendoui.com/web/grid/virtualization-remote-data.html

Thank you for your help!
Lee
Top achievements
Rank 1
 answered on 02 Jan 2018
4 answers
270 views
var scheduler = $("#scheduler").data("kendoScheduler");
                    var filterR = {
                        logic: "or",
                        filters: [
                          { field: "workCent", operator: "eq", value: 'F1' }
                        ]
                    };
                    scheduler.dataSource.filter(filterR);
                    scheduler.view("month");

Hi, I've come across many examples where filters are added to the scheduler in javascript functions outside the definition of the scheduler as shown above. My issue is how to add resources like this in an external javascript function/event handler. I tried doing it as below and many other ways, but it doesn't seem to work. Does anyone know how ?

var ds = $("#scheduler").data("kendoScheduler");
var orderNoResource = {
                        field: "orderId",
                        title: "Order",
                        dataSource: [
                            { text: "Order 1", value: '200023', color: "#f8a398" },
                            { text: "Order 2", value: '200027', color: "#51a0ed" },
                            { text: "Order 3", value: '200033', color: "#56ca85" },
                            { text: "Order 3", value: '200025', color: "#45ca85" }
                        ]
                    };
 
ds.resources[0] = orderNoResource;
 
ds.view("month");
Tyler
Top achievements
Rank 1
 answered on 02 Jan 2018
9 answers
1.1K+ views

i'm using upload within my grid. i can able to use the upload in my grid. and also i can attach the files to the upload but my only problem is i need to pass additional parameters to my "save" event which is in controller.  that parameters should be "in which line upload selected that line's column value"

i attached my coding here.

please guys help me to figure it out.

 

Kendo Grid coding////////////*****////////

 @(Html.Kendo().Grid<EmployeeSelfService.Models.EvaluationViewModel>()
                                .Name("DetailGrid")
                                .Events(e => e.Save("onSave"))
                                .Columns(columns =>
                                {
                                    columns.Bound(p => p.RequestDtlNum).Title("Seq No").Width(110).Hidden(true);
                                    columns.Bound(p => p.RequestID).Hidden(true);
                                    columns.Bound(p => p.Company).Hidden(true);
                                    columns.Bound(p => p.CandidateID).Title("Candidate ID").Width(170);
                                    columns.Bound(p => p.CandidateName).Title("Name").Width(170);
                                    columns.Bound(p => p.ResumeStatus).Width(170).Title("Resume Status").EditorTemplateName("ResumeStatusTemplate");
                                    columns.Bound(p => p.InterviewDate).Format("{0:dd/MM/yyyy}").Width(180).Title("Interview Date").EditorTemplateName("DatePickerTemplate");
                                    columns.Bound(p => p.InterviewType).Width(180).Title("Interview Type").EditorTemplateName("InterviewTypeTemplate");
                                    columns.Bound(p => p.InterviewStatus).Width(180).EditorTemplateName("InterviewStatusTemplate");
                                    columns.Bound(p => p.Comments).Width(170);
                                    columns.Bound(p => p.Attachments).EditorTemplateName("EvaluationUploadTemplate").Width(150);
                                    columns.Command(command =>
                                    {
                                        command.Destroy();
                                    }).Title("Action").Width(220);
                                })
                                    .ToolBar(toolbar =>
                                    {
                                        toolbar.Create();
                                        toolbar.Save();
                                    })
                                    .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
                                    .Pageable()
                                    .Navigatable()
                                    .Sortable()
                                    .Scrollable()
                                    .Resizable(resize => resize.Columns(true))
                                    .ColumnMenu()
                                    .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .Batch(true)
                                        .PageSize(20)
                                        .ServerOperation(false)
                                        .Events(events =>
                                        {
                                            events.Error("error_handler");
                                            events.Change("onChange");
                                        })
                                        .Model(model =>
                                        {
                                            model.Id(p => p.RequestID);
                                        })
                            .Read(read => read.Action("Evaluation_Read", "Evaluation").Data(
                                @<text>
                                    function (e){
                                    var requestID = $('#requestidresult').val();
                                    return{
                                    requestID: requestID
                                    };
                                    }
                                </text>
                                ))
                            .Create(create => create.Action("Evaluation_Create", "Evaluation").Data(
                                @<text>
                                    function (e){
                                    var requestID = $('#requestidresult').val();
                                    return{
                                    requestID: requestID
                                    };
                                    }
                                </text>
                                ))
                            .Update(update => update.Action("Evaluation_Update", "Evaluation").Data(
                                @<text>
                                    function (e){
                                    var requestID = $('#requestidresult').val();
                                    return{
                                    requestID: requestID
                                    };
                                    }
                                </text>
                                ))
                            .Destroy(destroy => destroy.Action("Evaluation_Delete", "Evaluation").Data(
                                @<text>
                                    function (e){
                                    var requestID = $('#requestidresult').val();
                                    return{
                                    requestID: requestID
                                    };
                                    }
                                </text>
                                ))
)
        )

Editor TemplateCoding/***********************/(EvaluationUploadTemplate)

@(Html.Kendo().Upload()
    .Name("Attachments")
    .Async(a => a
        .Save("SaveAttachments", "Evaluation")
        .Remove("RemoveAttachments", "Evaluation")
        .AutoUpload(false)
        .SaveField("uploadfiles")
    )
    .Validation(validation =>
    {
        validation.MaxFileSize(3145728);
        validation.AllowedExtensions(new string[] { ".gif", ".jpg", ".png", ".doc", ".docx", ".xls", ".xlsx", ".pptx", ".ppt", ".pdf", ".txt" });
    })
    .Events(events =>
    {
    events.Select("onSelect");
    events.Upload("onUpload", this);
    @*events.Upload(@<text>
        function(x`) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        if(dataItem.CandidateID != "")
        {
        e.data = { requestID: dataItem.RequestID, candidateID: dataItem.CandidateID, seqno: RequestDtlNum }
        }
        }
    </text>);*@
events.Remove(@<text>
        function(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        e.data = { requestID: dataItem.RequestID, candidateID: dataItem.CandidateID, seqno: RequestDtlNum }
        }
</text>);
    })
)
i need to send column candidateId value to controller in kendo upload event

Thanks in advance

Stefan
Telerik team
 answered on 02 Jan 2018
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
Licensing
ScrollView
Switch
TextArea
BulletChart
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
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
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
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?