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.

Hello 

I experienced some missing(?) translation using kendoDateTimePicker.

I have set these options:

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

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 ?

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

Hello,

I want to first retrieve the node that is checked and then programatically check its child nodes.
Any help is appreciable!

Thanks,

Niranjan

When using font icons in a toolbar via the attributes configuration option, the overflow gets all messed up. The attribute (in this case, the class attribute) gets applied to all elements in the overflow container and all hell brakes loose:

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/toolbar/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />
  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
    

</head>
<body>
        <div id="example">
            <div class="demo-section k-content wide">
                <div id="toolbar"></div>
            </div>
            <script>
                $(document).ready(function() {
                    $("#toolbar").kendoToolBar({
                        items: [

                           {
                            type: "button",
                            text: "But1",
                            attributes: { "class": "fa fa-2x fa-map-marker" },
                           },
                          {
                              type: "button",
                              text: "But1",
                              attributes: { "class": "fa fa-2x fa-map-marker" },
                            },
                           {
                            type: "button",
                            text: "But1",
                            attributes: { "class": "fa fa-2x fa-map-marker" },
                           },
                          {
                              type: "button",
                              text: "But1",
                              attributes: { "class": "fa fa-2x fa-map-marker" },
                            },
                           {
                            type: "button",
                            text: "But1",
                            attributes: { "class": "fa fa-2x fa-map-marker" },
                           },
                          {
                              type: "button",
                              text: "But1",
                              attributes: { "class": "fa fa-2x fa-map-marker" },
                            },
                           {
                            type: "button",
                            text: "But1",
                            attributes: { "class": "fa fa-2x fa-map-marker" },
                           }
                        ]
                    });

                    $("#dropdown").kendoDropDownList({
                        optionLabel: "Paragraph",
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: [
                            { text: "Heading 1", value: 1 },
                            { text: "Heading 2", value: 2 },
                            { text: "Heading 3", value: 3 },
                            { text: "Title", value: 4 },
                            { text: "Subtitle", value: 5 }
                        ]
                    });
                });
            </script>

        </div>


</body>
</html>

Hi Kendo folks,

I'm trying to use the mobile ScrollView in my webapp. It's using Kendo UI AngularJs - I'm wondering if this combination works or not? I'm experiencing a lot pain right now.

1. Mainly, the images won't show - if I inspect the element on the scrollviewer, I will find that's because the "virtual page" has no width or height. When I manually set width and height to it, I see my image.

2. When I call the next() function, nothing happens. I'm sure I have 2 pages, and I'm using datasource

Thanks for help. Happy holidays.

Anna

Hi,

I'm looking for a way to display events like in timeline, but to move the date from above the time to the side (no need for resource grouping so it can be occupied).

I was looking into creating a new view, but couldn't find a way controlling the date header position.

There is any way to do it?

Regards