Questions on Kendo UI for jQuery Forum

1 answer

136 views

[Solved] Change autoclose property of multiselect through Javascript after initialization?

I have a form with a bunch of kendo multiselects and I want to give the user the ability to change the "autoclose" property. Is there anyway to update the control after it was initialized through JavaScript to change the "autoclose" property?

MultiSelect

answered on 25 Aug 2022

1 answer

152 views

Kendo grid hidden column in wrong position when exporting to excel

I have a kendo grid with a column that is not displayed in the grid, but is conditionally included when exporting to excel.

However, this column is positioned as the last column in the sheet, instead of being positioned as defined in the grid column definition.

I have no idea what the issue may be.

Any help will be greatly appreciated.

This is the method by which I am conditionally including the column in the excel export:

excelExport: (e: kendo.ui.GridExcelExportEvent) => {
    if (columnShouldShow) {
        e.sender.showColumn('MyColumn');
        e.preventDefault();
        columnShouldShow = false;
        setTimeout(() => {
            e.sender.saveAsExcel();
        });
    } else {
        e.sender.hideColumn('MyColumn');
        columnShouldShow = true;
    }
}

Grid

answered on 23 Aug 2022

2 answers

218 views

Using common variables with kendo theme swatches

Hi,

I have been testing what's the best way to create custom theme swatches, so that they're easy to maintain between Kendo upgrades.

Is it possible somehow to use theme variables inside the json file (of the swatch)?

Here is an example, where I try to use "$component-border" to set border color for tabs:

"name": "Tabstrip",
"variables": {
"tabstrip-item-border": {
"name": "Tabstrip item border color",
"type": "color",
"value": "$component-border !default"
}
}

When running "npm run sass:swatches", it gives me error message: "Error: Undefined variable: "$component-border"."

It works if I hard code the color like this:

"name": "Tabstrip",
"variables": {
"tabstrip-item-border": {
"name": "Tabstrip item border color",
"type": "color",
"value": "#fc0303"
}
}

General Discussions

Styling

answered on 23 Aug 2022

1 answer

369 views

Programmatically set value to treelist cell

How can I set value programmatically to a cell in Treelist from javascript after the data is loaded?

Say I have quantity and price, I need to update the total amount column when I change value quantity or price.

TreeList

answered on 23 Aug 2022

18 answers

1.6K+ views

[Solved] Customizing async upload button and triggering cancel event

Hi,

We have just started to use kendo ui async upload component in our application and I have some few questions regarding it.

1. I Is it somehow possible to customize the 'Select...' button (used to browse in the file systrem) in respect to the text and the color that changes at mouse over?

2. According to the documentation there is a cancel event which can be added in the configuration of file upload as:

$("#fileUpload").kendoUpload({
async: {
saveUrl: "upload_url",
autoUpload: true,
removeUrl: "remove_url"
},
cancel: onCancel
});

Though, onCancel method does not seem to be triggered when cancel upload button is pressed. Is is because that removeUrl must be specified? When cancel is activated Is it then through removeUrl that the so far uploaded file is deleted from server (that requires of course that a recourse at removeUrl does that actually), or how does it work?

Is it somehow possible to configure upload component not to show the cancel button?

thanks in advance, Piotr

Upload

updated answer on 20 Aug 2022

1 answer

618 views

Grid With Locked Columns and Drag and Drop

I have a grid with the drag and drop feature and locked columns. I have a need for the row to be dragged up and down in the grid. I found an article on your site but it does not really work, even in your own Dojo. It only allows dragging to the top and should allow dragging anywhere. It doesn't leave a gap on the unlocked side of the table as would be expected. I would like it to clone the existing row and use that as a placeholder on both sides of the grid. Also, the column widths are not preserved.

Below is a link to the article: https://docs.telerik.com/kendo-ui/knowledge-base/grid-drag-drop-with-locked-columns

Article

Update:

Here is some code that I currently have which fixes the issue with the column widths and the dragging to the top only. It doesn't address the issue with the placeholders though.

function enableKendoGridLockedDND(gridElement) {
    if (!gridElement) {
        gridElement = ".k-grid";
    }
    let grid = $(gridElement).data("kendoGrid");
    if (!grid.lockedTable) {
        return false;
    }
    let gridWidth = $(gridElement).width();
    let lockedWidth = $(gridElement).find(".k-grid-header-locked").width() || 0;
    let unlockedWidth = $(gridElement).find(".k-grid-header-wrap table").width() || 0;
    let tableWidth = lockedWidth + unlockedWidth + 2;
    grid.lockedTable.kendoSortable({
        axis: "y",
        filter: ">tbody >tr",
        hint: function(element) {
            var unlockedPortion = grid.table.find("tr[data-uid=" + element.data("uid") + "]").children();
            let table = $(`<div style="overflow: hidden; width: ${gridWidth}px;"><table style="background: whitesmoke; width: ${tableWidth}px;" class="k-grid k-widget"></table></div>`);
            let colgroups = $(gridElement).find(".k-grid-header colgroup");
            let colgroupWidths = [];
            $.each(colgroups, function (index, group) {
                $.each($(group).children(), function (index2, child) {
                    colgroupWidths.push($(child).css("width"));
                });
            });
            table.find("table").append(element.clone().append(unlockedPortion));
            $.each(table.find("td"), function (index, col) {
                $(col).css("width", colgroupWidths[index]);
            });
            console.log(table);
            table.css("opacity", 0.7);
            return table;
        },
        cursor: "move",
        placeholder: function (element) {
            return element.clone().css({
                "opacity": 0.3,
                "border": "1px dashed #000000"
            });
        //    console.log("placeholder", element);
        //    var unlockedRow = grid.table.find("tr[data-uid=" + element.data("uid") + "]");
        //    var unlockedPortion = unlockedRow.children();
        //    console.log(element);
        //    return element;
        //   // return $(`<tr class="w-100 grid-placeholder" style="background: green;"><td>Hello World</td><td></td><td></td></tr>`);
        },
        //move: function (e) {
        //    let event = e.draggableEvent;
        //    console.log("event", event);
        //    let item = e.item;
        //    let itemUID = $(item).data("uid");
        //    console.log("UID", itemUID);
        //    console.log("item", item);
        //    let unlockedDraggingRow = grid.table.find("tr[data-uid=" + item.data("uid") + "]").children();
        //    console.log(unlockedDraggingRow);
        //    console.log("clone", unlockedDraggingRow.clone());
        //    let target = e.target;
        //    let unlockedTargetRow = grid.table.find("tr[data-uid=" + target.data("uid") + "]");
        //    $(gridElement).find("tr.d-none").removeClass("d-none");
        //    $(gridElement).find("#dragPlaceholderRow").remove();
        //    $(grid.table.find("tr[data-uid=" + target.data("uid") + "]")).before(`<tr id="dragPlaceholderRow"><td colspan="6">Yo!</td></tr>`);
        //    $(unlockedTargetRow).addClass("d-none");
        //},
        end: function (e) {
            let skip = grid.dataSource.skip() || 0;
            let newIndex = e.newIndex + skip;
            let dataItem = grid.dataSource.getByUid(e.item.data("uid"));
            grid.dataSource.remove(dataItem);
            grid.dataSource.insert(newIndex, dataItem);
        },
        change: function(e) {
            let skip = grid.dataSource.skip() || 0;
            let newIndex = e.newIndex + skip;
            let oldIndex = e.oldIndex + skip;
            let data = grid.dataSource.data();
            let dataItem = grid.dataSource.getByUid(e.item.data("uid"));
            console.log("skip", skip);
            console.log("newIndex", newIndex);
            grid.dataSource.remove(dataItem);
            grid.dataSource.insert(newIndex, dataItem);
          }
        });
}

Here is what the change event returns:

action: "remove"
draggableEvent: {originalEvent: MouseEvent, type: 'mouseup', target: span.k-icon.k-i-reorder, currentTarget: fn.init(1), isDefaultPrevented: ƒ, …}
isDefaultPrevented: ƒ ()
item: fn.init [tr.k-alt.k-master-row]
newIndex: -1
oldIndex: 1
preventDefault: ƒ ()
sender: init {element: fn.init(1), _events: {…}, options: {…}, draggable: init, draggedElement: fn.init(1), …}
_defaultPrevented: false

Grid

updated answer on 19 Aug 2022

0 answers

1.4K+ views

What does the "#=" and "#:" mean/do?

I've reviewing the code Binding to remote data example for the ListView control. There's some HTML which I don't understand. It might be some HTML5 code snippets I'm unaware of, or it might be something specific to Kendo UI for jQuery. In any case I'm sorry for my ignorance.

Here's a compact example from I'm referring to:

    <script type="text/x-kendo-template" id="template">
        <div class="product">
            <img src="../content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
            <h3>#:ProductName#</h3>
            <p>#:kendo.toString(UnitPrice, "c")#</p>
        </div>
    </script>

In the code snippet the src attribute has "../content/web/foods/#= ProductID #.jpg" and the alt attribute has "#: ProductName # image". I get that there's a substitution going on, but I don't understand why the src attribute using #= and the alt attribute doesn't. Why does it use #: ?

What's the difference between the two and when do you use one other the other?

ListView

asked on 19 Aug 2022

0 answers

131 views

TreeList: Focus custom column control to select entire row

Hi,

I have custom column which contains buttons, how to select the entire row when I focus on the button control?

Thanks.

TreeList

asked on 19 Aug 2022

0 answers

477 views

TreeList: Alternate category background color

Hi all,

How to apply Alternate category background color on TreeList, for example, column A is the category column, which has the parent and child data, how to apply grey color to only column A of the first category and apply orange to the next category? How to make it to be dynamic alternate styling?

Thank you.

TreeList

asked on 19 Aug 2022

0 answers

239 views

Can I use AutoComplete within ListView?

We're still getting used to using Telerik's Kendo UI for jQuery. So far, we've only used one component, AutoComplete. Which works great, BTW!

There's something we'd like to do, but don't know how to do. On an ASP.NET MVC Core page (.NET 6) we want to be able to allow the user to enter multiple items of the same type. It seems like either the Grid or ListView Kendo components would work. Personally, I'm favoring the ListView. But we also need to use AutoComplete work when the user is entering values to a new row. So, for example, we need to collect LotNumber and ProgramName, multiple times, because there can be and often is, multiple items to be entered, along with other details on the same page. I've looked at the ListView component, the Add method, etc. In the example given, it references an identified (by using the HTML id property) control on the page. So, how does one apply AutoComplete to both LotNumber and ProgramName, when entering a new LotNumber/ProgramName pair in a ListView?

AutoComplete

ListView

asked on 19 Aug 2022