Hi,

Can I set different rowHeights for different tasks?

I am having a problem creating a dropdownlist inside of a grid cell. I have seen the docs and some other posts but I can't seem to get it to work.  Any insight to what I am doing wrong?

        $("#multipleUploadDetailGrid").kendoGrid({
            dataSource: {
                data: self.MultipleUploadDetails,
            },
            pageable: false,
            selectable: false,
            refresh: false,
            resizable: true,
            reorderable: true,
            noRecords: { template: "<div class='k-grid-norecords-template' style='margin:0 auto;position:static;'>No Files Uploaded</div>" },
            sortable: {
                mode: "multiple",
                allowUnsort: true
            },
            columns: [
                {
                    headerTemplate: "<div class='oir-actions-header'>Actions</div>",
                    title: "Actions",
                    width: 50,
                    template: '<a class="oir-exp-inv-pay-delete" href="\\#" data-uid="#:Uid#" title="Click to delete the file"><i class="fa fa-trash-o fa-fw fa-lg oir-fa-action"></i></a>',
                    attributes: { style: "text-align: center" },
                    filterable: false,
                    sortable: false
                },
                { field: "FileName", title: "Name", width: 150, sortable: true },
                { field: "FileSize", title: "Size", width: 150, sortable: true },
                { field: "Id", title: "Document Type", width: 225,editor: docTypeDropDownEditor, template: "#=DocumentType.Name#" },
                { field: "IsConf", title: "Confidential", template: "<input type=\"checkbox\" />", width: 40, sortable: true, headerAttributes: { style: "text-align:center" }, attributes: { style: "text-align:center;" }},
                { field: "IsTs", title: "Trade Secret", template: "<input type=\"checkbox\" />", width: 40, sortable: true, headerAttributes: { style: "text-align:center" }, attributes: { style: "text-align:center;" }},
            ]
        });
        
        function docTypeDropDownEditor(container, options) {
            $('<input name="' + options.field + '" data-value-primitive="true"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataTextField: "Name",
                    dataValueField: "Id",
                    dataSource: { data: self.DocumentTypes},
                });
        }

I am trying to bind to knockout sources, I know the sources are populated.

Each row should have a dropdown to select the document type, the selected Id will ultimately be passed in to the controller.

I have the following code for radTextBoxes arranged in three columns. I want space between each text box. I tried to put the margin-bottom css on one of the text box, but that did not work. Below is my code:

<div class="componentWraper">
             <telerik:RadPageLayout  ID="OriginDept" runat="server" GridType="Fluid" CssClass="tx_enquiry_form tx_contact">
                 
            <Rows>
                <telerik:LayoutRow>
                    <Columns>
                        <telerik:LayoutColumn Span="4" SpanMd="6" SpanSm="12" SpanXs="12" >
                             <telerik:RadTextBox  CssClass="t-row"   runat="server" ID="TbFirstName" Width="100%" TabIndex="1" Label="First Name *" ></telerik:RadTextBox>
                             <telerik:RadTextBox runat="server" ID="TbLastName" Width="100%" TabIndex="2" Label="Last Name *"></telerik:RadTextBox>
                             <telerik:RadTextBox runat="server" ID="TbEmail" Width="100%" TabIndex="3" Label="Email *"></telerik:RadTextBox>
                        </telerik:LayoutColumn>
                           <telerik:LayoutColumn Span="4" SpanMd="6" SpanSm="12" SpanXs="12">
                              <telerik:RadTextBox runat="server" ID="TbPhone" Width="100%" TabIndex="4" Label="Phone"></telerik:RadTextBox>
                              <telerik:RadTextBox runat="server" ID="TbMobile" Width="100%" TabIndex="5" Label="Mobile *"></telerik:RadTextBox>
                              <telerik:RadTextBox runat="server" ID="RadTextBox3" Width="100%" TabIndex="4" Label="Phone"></telerik:RadTextBox>
                      </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="4" SpanMd="6" SpanSm="12" SpanXs="12">
                              <telerik:RadTextBox runat="server" ID="RadTextBox1" Width="100%" TabIndex="4" Label="Phone"></telerik:RadTextBox>
                              <telerik:RadTextBox runat="server" ID="RadTextBox2" Width="100%" TabIndex="5" Label="Mobile *"></telerik:RadTextBox>
                               <telerik:RadTextBox runat="server" ID="RadTextBox4" Width="100%" TabIndex="4" Label="Phone"></telerik:RadTextBox>
                      </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
            </Rows>


        </telerik:RadPageLayout>
                </div>

I tried to put CssClass="t-row" on one of the text box, but nothing happened. Below is the style sheet defined:

 .t-row {
        margin-bottom: 100px;
    }


 .tx_contact {
        padding-bottom: 10px;
        background: #efefef;
        margin-top: 50px;
       
    }

    .componentWraper {
        margin: 20px; /* just for contrast */
        position: relative;
        border: 2px solid lightblue;
        border-radius: 12px;
        padding: 20px;
        background-color: #efefef;
    }

        .componentWraper .componentTitle {
            position: absolute;
            top: -25px;
            background: #efefef;
            padding: 0 10px;
        }
       

Below is the screenshot of page where there is no space between text boxes:

Hello,

I am using kendo-theme-default 4.38.1 and get a lot of deprecated warnings from Dart SASS.  I've put an example warning below. Is there a workaround to prevent kendo-theme-default from causing all of these warnings?

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($button-padding-x, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
20 │ $button-padding-x-sm: $button-padding-x / 2 !default;
   │                       ^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules\@progress\kendo-theme-default\scss\button\_variables.scss 20:23  @import
    src\styles\_common.scss 5:9                                                   @import
    stdin 1:9   

There is a --quiet-deps command line option. I've attempted to add this to vue.config.js (see below), which is what's used to configure sass-loader. Unfortunately, I can't tell if I have it configured the right way or whether --quiet-deps will actually do what I want.

module.exports = {
  // ...
  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "~@/styles/common";',
        sassOptions: {
          quietDeps: true
        }
      }
    }
  }
}

You used to be able to upload the variables.scss file to work on an existing theme.  Now, it's asking for a json file.  Is there a workaround for this?

from Themebuilder now:

from the Documentation:

I added a custom template for the Upload Widget. The file size (#=size#) prints to a byte value. How can I format the file size (#=size#) to print in KB instead of Bytes - and with two decimals? (like the upload widgets default)

I added the template as a function, as mentioned here.

Thanks for any advice!

Patrick

I have a product named "a6763". It is a cloud based product. Customers use it by placing CDN-served assets into their HTML code. My product should work in an div only. It is just like Google Map actually. Google Map never affects rest of document. I plan to use Kendo UI jQuery for windows, dropdowns, tabs etc. But Kendo UI affects rest of document.

Here is how my customers add my assets:

1) Embed the a6763's code.

<head>
<script src="https:/a6763.com/embed/kendo.js"></script><link href="https:/a6763.com/embed/kendo.bootstrap.min.css" rel="stylesheet" />
</head>

2) Place my embed code:

<body>
   <!-- there is no kendo here -->
   <div id="a6763">
        <!-- my kendo UI components are here -->
        <div id="kendogrid"></div>
   </div>
   <!-- there is no kendo here -->
</body>

The problem is that; the Kendo's Javascript codes and CSS styles affect all the document. For example, if I choose Material theme in CDN assets, then all the page turns into Material. But I want to keep this theme in the above div. Same for Javascript codes: Kendo should not process outside of the above div.

UPDATE 1: To make it more clear: I need something like this for Kendo UI jQuery: https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes 

UPDATE 2: In other words, I need give Kendo a new name just like this: https://api.jquery.com/jquery.noconflict/ So that, even the document already added a different version of Kendo into document, everything is ok because my Kendo is different. No conflict.

Esref Atak

Attempting to move a scheduler event when grouping by a resource with a remote data source produces the following console errors.

Uncaught TypeError: Cannot read property 'value' of undefined
Cannot read property 'groupIndex' of undefined

All events are unable to moved unless I double click an event and open it's edit menu first thing upon the scheduler data being bound and before taking any other action in the scheduler.

Both the scheduler data source and the resource data source are remote; however, when I hard-code the resource data source to match what the remote output would be, the scheduler works as intended.

Here's what my scheduler initialization code looks like.

$(function() {
            var dataSource = new kendo.data.SchedulerDataSource({
                transport: {
                    read: {
                        url: 'service url', /* omitted for example */
                        type: 'GET',
                        data: {
                            account_id: 'myAccountId'
                        },
                        dataType: "json",
                        beforeSend: function(req) {
                            req.setRequestHeader('example-api-key', '1234');
                        }
                    },
                    update: function(e) {
                        e.success();
                    }
                },
                schema: {
                    data: "schedulerEvents"
                }
            });
            
            $("#scheduler").kendoScheduler({
                date: new Date(),
                toolbar: [ "search" ],
                eventHeight: 50,
                selectable: true,
                views: [
                    "day", "week", "month", "agenda", {type:"timeline", selected: true}, "timelineWeek", "timelineMonth"
                ],
                dataSource: dataSource,
                group: {
                    resources: ["Assignees"],
                    orientation: "vertical"
                },
                resources: [
                    {  
                        field: "assignees",
                        title: "Assignees",
                        name: "Assignees",
                        dataSource: {
                            transport: {
                                read: {
                                    url: 'service url', /* omitted for example */
                                    type: 'GET',
                                    data: {
                                        account_id: 'myAccountId'
                                    },
                                    dataType: "json",
                                    beforeSend: function(req) {
                                        req.setRequestHeader('example-api-key', '1234');
                                    }
                                }
                            },
                            schema: {
                                data: "assignees"
                            }
                        },
                        multiple: true
                    }
                ]
              });
        });

The response data from the server looks like this:

{
  assignees: [{ value: "1234", text: "Assignee Name" }],
  schedulerEvents: [{ assignees: ["1234"], id: "9876", title: "Event Title", start: "2021-05-27T00:00:00", end: "2021-5-28T00:00:00" }]
}

You'll notice in my screenshot that the events appear to be grouped correctly, but nonetheless produce errors when clicking on them or trying to move them.

At a loss as to what may be causing this. Perhaps I'm missing something when it comes to binding remote data. Please let me know if there's anything I can do to solve this issue.

Hi guys,

i have mediaplayer inside kendo window. now the problem is when you open the kendo window and play the video and then close it. The video keeps on playing in the background. How can i stop it from playing?

kind regards

Tony