Hello

I'm using an editable GRID with CREATE toolbar. I would like to customise my editable pop-up to add a kendoDropDownList for selecting a element in a list. 

In my exemple I have a grid with "accessoires"  I can ADD new one or DELETE existing ones

If I create I want to choose the new element in a kendoDropDownList  NOT in TYPE=INPUT 

How to do this ?

Here is the code of my GRID

  //Grille des accessoires
    $("#gvAccessoires").kendoGrid({
        columns: [
            {
            field: "LibelleObj",
            title: "Accessoire"
            },
            { command: [{ name: "destroy", text: "Supprimer", visible: function (dataItem) { return !dataItem.IsPublie } }], title: " ", width: "250px" },
        ],

        editable: {
            mode: "popup",
            window: {
                title: "Saisie des accessoires",
                width: 600
            }
        },

        toolbar: ["create"],
        edit: function (e) {

???? how to add here the kendoDropDownList

        },
        save: function (e) {

            Accessoires.add(new Accessoire(false, e.model));

        },
        remove: function (e) {     
            _.forEach(selectedOP.Accessoires, function (item) {
                if (item.idObj == e.model.idObj) Accessoires.remove(item);
            });
        }

    });

        var ds3 = new kendo.data.DataSource({
            data: Accessoires,
            schema: {
                model: {
                    id: "idObj",
                    fields: {
                        id: { editable: false, nullable: true },
                        LibelleObj: { validation: { required: true } },
                    }
                }
            }
        });
        $("#gvAccessoires").data("kendoGrid").setDataSource(ds3);

Thank you

Hello, is it possible to remove the header and footer toolbars from gantt component? 

I tried already with css

.k-gantt-header, .k-gantt-footer {
        display: none;
    }

Hello,
I've got a grid that leverages the detailInit feature and the detail grid has a toolbar with a button in it.

I want each button in those detail grids to have the same link with a different id parameter. (eg: /my/link?id=1, /my/link?id=2, etc..)

Here are a few lines to give an idea of what I've got:

    // ...
    grid = $el.kendoGrid({
        dataSource: ds,
        detailTemplate: kendo.template($('#cc_ajax_contact_group_grid_detail_tpl').html()),
        detailInit: function (e) {
            // ...
            // Calling method to init a detail grid.
        },
    // ...
    // Init detail grid...
    const detailGrid = $detailEl.kendoGrid({
        dataSource: ds,
        toolbar: kendo.template($('#cc_ajax_contact_group_grid_detail_toolbar_tpl').html()),
        columns: [
            // ...
        ],
        autoBind: true,
        noRecords: false,
        sortable: false,
        scrollable: false,
        pageable: false
    }).data('kendoGrid');
    // ...

    <!-- Grid Detail template -->
    <script type="text/x-kendo-template" id="cc_ajax_contact_group_grid_detail_toolbar_tpl">
        <div class="btn-group ml-2">
            <a href="/ActionLink/GoesHere" class="btn btn-primary btn-sm cc_ajax_contact_group_member_add">
                <i class="fa fa-plus" aria-hidden="true"></i>
                Add Group Member
            </a>
        </div>
    </script>
---

So, what I was hoping for was something in the template like this:

    <a href="/ActionLink/GoesHere?GroupId=#=GroupId#" 

But I'm seeing now after trying this that the dataSource model context for the grid rows won't be available in that toolbar template.
This makes sense I think.

So what I ended up doing is just adding a data attribute to the detail grid element.
This way I can use the toolbar buttons click event to select the parent grid and scoop up that data attribute.

Something like this:

    // ...
    const groupId = e.data.id;
    const $detailRow = e.detailRow;

    const $detailEl = $(app.foo.memberGridSelector, $detailRow);
    $detailEl.data('contact-group-id', groupId);
    // ...

And the button's click event:

    // ...
    const $btn = $(e.currentTarget);
    const $gridEl = $btn.parents(app.foo.memberGridSelector).data('kendoGrid');
    const groupId = $gridEl.data('contact-group-id');

    // Now use that group id to make an $.ajax call with jquery.
    // ...

---

So my question: Is there an easier way to do this or is above approach a reasonable solution?

Thanks,
Andy

I have code that adds buttons to a kendoToolBar.  Upon completion, the button is added but the .items array still says null or undefined.  The basic gist I am ultimately after is how to iterate through the buttons/controls in a toolbar and delete them all or at least delete them one by one by id.  But, I can't figure out the syntax for iterating this array.  Can anyone point out what I'm doing wrong?

        var toolbar = $("#tbrMyToolBar").data("kendoToolBar");
 
        toolbar.add(
            { 
                type: "button",
                attributes: { "class": "k-button" },
                text: name, 
                id: "testbutton", 
                togglable: false,
                click: function(e)
                {
                    
                }
            });

         console.log(toolbar.items.length);

I have tried to left-align the overflow anchor of the ToolBar, which I achieved using css, specifically by setting ".k-overflow-anchor { right: auto; }".

That works fine, but the problem is that the popup is still aligned to the right side of the overflow anchor button, see attached image.

Please see the dojo example I have set up at: https://dojo.telerik.com/AYUrAZOJ/3

The example is working exactly how I want it to with the exception that the height of the .nav-toolbar shrinks when I make .navigation-pane a flex container. I have added another toolbar just to the right of the .nav-toolbar to show the size difference. If you were to remove the styles for .navigation-pane and .nav-content the .nav-toolbar sizes as expected.

I am hoping there is a flex css value I am missing, but after about an hour of research and trying different things I have not found anything that gets the toolbar to maintain its original height. Any help would be greatly appreciated.

Please let me know if any further clarification is needed.

Thanks

Kerry

I have a button in a tool bar that via jquery is hidden on click (It is an edit button that displays a cancel/save button.)

If I click the Edit button it applies a style of display: none;

If I then zoom on the browser the style disappears and the button becomes visible again.

Any insight on this issue?

I have been trying to find a way to insert a button into a Kendo ToolBar widget dynamically. I would like to insert it into a specific location among existing buttons on the ToolBar. The only functionality I see is an add function that will add a new button, but no way to insert it anywhere.

In my search on this topic I found this older thread:

https://www.telerik.com/forums/insert-item-at-the-beginning

which resulted in this feature request:

https://feedback.telerik.com/kendo-jquery-ui/1359920-kendotoolbar-dynamically-insert-items-insertafter-insertbefore

I am hoping that I am not the only one that has had a similar need. Is there any other way to be able to insert a new button?

Thanks in advance.

Kerry