Kendo UI grid edit mode columns styles

1
votes

I have a Kendo UI grid with a popup editable property. I would like to make my dropdown columns wider when I'm add/edit mode, but I cannot seem to change the widths. I can indeed change the widths in the grid itself but not in edit mode.

Does it have to do with some kind of Edit Template ? I can't find the documentation for it.

thanks. Bob

Here's my sample grid :

       positGrid = $("#positGrid").kendoGrid({
        dataSource: datasource,
        toolbar: [
            { name: "create", text: "Add Position" }
        ],
        columns: [{
            field: "PositionId", 
        },
        {
            field: "Portfolio", 
            editor: portfolioDropDownEditor, template: "#=Portfolio#"
        },
        {
            field: "Instrument",
            width: "220px",
            editor: instrumentsDropDownEditor, template: "#=Instrument#", 
        },
        {
            field: "NumOfContracts",
        },
        {
            field: "BuySell",
            editor: buySellDropDownEditor, template: "#=BuySell#"
        },
        {
            command: [
              {
                  name: "edit",
                  click: function (e) {           
                  }
              },
              "destroy"
            ]
        },
        ],
        sortable: true,
        editable: "popup",
    });
1
htmlmvvmkendo-uikendo-grid

1 Answers

1
votes

You can wire up edit event to set dropdown options:

name: "edit",
    click: function (e) {  
        if (!e.model.isNew()) {         
            var dropdown = e.container.find("input[name=Portfolio]").data("kendoDropDownList");
            dropdown.list.width(500);
        }
        }