I can't restore the kendo on mu new laptop,

I mapped my project and it required to restore the kendo , but it appear this message !
any help ? 

Test it at the url below.

https://dojo.telerik.com/@kjvjung/uyaZeJuZ

How can I batch save?

Thank you.

Hello,

I have a dashborard including widgets built with IFrame. I have a widget that contains a Kendo grid with a number of data.

If I have the focus in a field of a form in a widget other than the one containing the Kendo grid, when refreshing the Kendo grid, the focus is lost and it is the grid that takes over the focus. For example, if I open a drop-down list in a form present in a widget (defined in an Iframe), when the Kendo grid (defined in another widget, therefore another IFrame) updates, the drop-down list where I was closes automatically following the loss of focus. Is this behavior known? How can I prevent an update to the Kendo grid from losing focus in other components?

The grid updates very regularly when new data needs to be added (with a simulator, updates are done approximately every 2 seconds).

When new data comes in I completely replace the list (no differential) and use Util.getGrid (). DataSource.read (); This will call the read () method defined in in the transport option.

const dataSource: DataSource = new DataSource(
                    {
                        autoSync: true,
                        schema: this.$scope.schema,
                        pageSize: this.$scope.pageSize,
                        transport: {
                            read: (datas: kendo.data.DataSourceTransportOptions): void => {

                                    [some code]

                                     datas.success(this.$scope.items);  
                            }
                        },
                        serverFiltering: true,
                        serverSorting: true,
                        serverGrouping: false,
                        serverPaging: true,
                        sort: this.$scope.defaultSort,
                        filter: this.$scope.filters,
                        group: groupList,
                        requestStart: (e: kendo.data.DataSourceRequestStartEvent): void => {
                            setTimeout((e: JQuery): void => {
                                $(".k-loading-image").hide();
                            });
                        }
                    }
                );

I am using Kendo version v2019.3.1023

Thanks

I am working with kendo grids with buttons in each column that display another grid in a modal. The first is using MVC, the modal grid was created dynamically. Each uses kendo dropdownlists to edit cells. The issue occurs like this:

1. A dropdownlist is clicked on in the initial grid,

2. The modal is opened afterward (each row has its own button)

3. A dropdownlist inside the modal's kendo grid is clicked, and nothing happens

Basically, if a dropdown is clicked in grid 1, and then you attempt to click one of the dropdownlists in the modal grid, 
this error is thrown:

Uncaught TypeError: m is not a function
    at init.editor (kendo.all.min.js:54)
    at init.refresh (kendo.all.min.js:54)
    at new init (kendo.all.min.js:54)
    at HTMLTableCellElement.<anonymous> (kendo.all.min.js:26)
    at Function.each (jquery.min.js:2)
    at R.fn.init.each (jquery.min.js:2)
    at R.fn.init.e.fn.<computed> [as kendoEditable] (kendo.all.min.js:26)
    at init.editCell (kendo.all.min.js:59)
    at init.tap (kendo.all.min.js:59)
    at init.trigger (kendo.all.min.js:25)

This error is vague, and on the surface seems like jQuery scripts may be interfering or out of order. I don't think this is the case
because A) I haven't recieved errors like this before and B) the dropdowns work if the modal is opened without any of the dropdowns in the
other grid being touched. It seems as if when a dropdown is clicked in initial grid, somehow it breaks the dropdown in modal grid. They
do not have the same name.

Any ideas on where this console error comes from?

Here is a snippet of the grid being generated in the modal:

 $("#account-tracking-grid").kendoGrid({
        columns: [
            {
                field: "accountName",
                title: "Account Name",
                editable: function () { return false },
                width: "200px",
            },
            {
                field: "accountNumber",
                title: "Account Number",
                editable: function () { return false },
                width: "200px"
            },
            {
                field: "Balance",
                title: "Balance",
                width: "40px",
                template: "<span>#=getIcon(Balance)#</span>",
                editor: dropdownlist,
                headerTemplate: "<span class='verticalText'>Balance</span>"
            }
 ],
        editable: "incell",
        edit: function (e) {
            var container = e.container;
            var dropDownList = container.find("[data-role=dropdownlist]").data("kendoDropDownList");
            if (dropDownList) dropDownList.open();
        },
        dataSource: {
            transport: {
              read: "/Account/Tracking?uniqueId=" + document.getElementById('unid').value
            }
        }
    });
}

function dropdownlist(container, options) {
    $('<input id="account-dropdownlist"/>')
        .appendTo(container)
    $("#account-dropdownlist").kendoDropDownList({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: items,
        change: onChange,
        open: onOpen
    });
}

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:

The FileManager has a toolbar with an inbuilt search text box. How can I change the filtering method from the default (seems to be "startswith") to "contains".

Thanks for any advice!

Patrick

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: