I have a requirement which has a drop down menu inside each row of the kendo ui grid. Specifically, when user click a button inside a cell of each row of the grid, a pull down menu will open.

I used twitter bootstrap drop down for this pull down menu. However the pull down menu is hidden behind the  cell and would only show the area within bounds of the cell. I need to the pull down menu to be the top floating div on top of the grid. 

I tried to set z-index to a large number like 9999, but didn't seem to have an effect. I used a regular div instead of twitter bootstrap. The same thing happened. The div is hidden.

I think it is something to do with the grid not allowing cell content to be larger and popped out on the grid.

Here is my code snippet if it helps:

<div id="gridCounterOffers" style="z-index: 1;">
</div>

<script id="actionCounterTemplate" type="text/x-kendo-tmpl">  
     <div class="btn-group" style="z-index: 5;">
                <button class="btn btn-mini btn-danger">
                    Counter Offer</button>
                <button class="btn btn-mini  btn-danger dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <div class="dropdown-menu action-menu pricing-menu" style="z-index: 99999; border: 1px solid red">
                    <a class="close">×</a>
                    <label style="text-align: left; font-weight: bold" class="spacer">
                        Price Per Carat:
                    </label>
                    <input type="number" min="0" max="1000000" step="10" style="width: 150px" />
                    <table class="table table-striped spacer">
                        <tr>
                            <th>
                                Price Per Carat *
                            </th>
                            <th>
                                Weight
                            </th>
                        </tr>
                        <tr>
                            <td>
                                <span id="lblNewPricePerCarat"></span>
                            </td>
                            <td>
                                <span id="lblWeight"></span>
                            </td>
                        </tr>
                    </table>
                    <span style="font-weight: bold">Price Total =</span><span id="lblNewPriceTotal"></span>
                    <label style="text-align: left" class="spacer">
                        Please Enter Note Below:
                    </label>
                    <textarea rows="2" cols="400" id="txtPricingNote" style="width: 200px"></textarea>
                    <div class="control-group">
                        <button type="submit" class="btn btn-mini btn-action">
                            Submit</button>
                    </div>
                </div>
            </div>
</script>


        $("#gridCounterOffers").kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        url: "/Product/GetCounterOffers/",
                        contentType: "application/json",
                        type: "GET"
                    }
                },
                schema: {
                    parse: function (response) {
                        console.log('parse');
                        $.each(response, function (idx, elem) {
                            elem.CreateDate = moment(elem.CreateDate).format('MM/DD/YYYY h:mm a');
                        });
                        return response;
                    }
                }
            },
            height: 500,
            scrollable: false,
            sortable: true,
            filterable: false,
            reorderable: true,
            columnMenu: false,
            pageable: {
                pageSize: 10,
                input: true,
                numeric: true,
                pageSizes: true,
                refresh: true
            },
            messages: {
                empty: "There are no counter offers at this time. Please check back later."
            },
            columns: [
                { field: "PreviewImageFileName", title: "Sample", template: "<img src='@Constants.PRODUCT_IMAGE_FOLDER#= PreviewImageFileName #' style='width:50px; height:50px;' title='#= PreviewImageFileName #' />", width: "50px", sortable: false, filterable: false },
                { field: "ProductID", title: "Item ID", template: "<a href='/Product/'>#= ProductID #</a>", width: "30px", sortable: true, filterable: true },
                { field: "PricePerCarat", title: "Price Per Carat", template: '#= kendo.toString(PricePerCarat, "n2") # ', width: "50px", sortable: true, filterable: true },
                { field: "PriceTotal", title: "Price Total", template: '#= kendo.toString(PriceTotal, "n2") # ', width: "50px", sortable: true, filterable: true },
                { field: "CreateByUserName", title: "By", width: "50px", sortable: true, filterable: true },
                { field: "CreateDate", title: "Date", width: "100px", sortable: true, filterable: true },
                { title: "Accept", template:kendo.template($("#actionAcceptTemplate").html()), width: "50px", },
                { title: "Counter Offer", template:kendo.template($("#actionCounterTemplate").html()), width: "100px"}
                ]
        }); //kendogrid

I'm using the Editor and the Immutables functionality.

When I'm editing a document in the Editor that contains Immutables in Internet Explorer and I 'Undo' (Ctrl + Z) something the formatting of the immutable content is messed up or disappears completely.This works fine in Chrome but not in Internet Explorer.

If you want to test use this Kendo demo in Internet Explorer

http://demos.telerik.com/kendo-ui/editor/immutable-elements

Now select some text in the example and Bold it using the editor bold command. Now undo (Ctrl + z). The Immutable fields disappear!!

Any help appreciated Telerik

 

Hi, version kendo ui 2016.3.1118, using Russian localization (Turkish works equally) the setting:

.Filterable(filterable => filterable
        .Extra(false)
        .Operators(operators => operators
            .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
            ))
        )

simply does not work, instead of the three operators (specified in settings) displays all.  If you include the localization of the default(en-EN) is all works.
Full Code:

bundles.Add(new ScriptBundle("~/bundles/kendoJs").Include("~/Scripts/kendo/2016.3.1118/kendo.all.min.js")
                                                             .Include("~/Scripts/kendo/2016.3.1118/kendo.aspnetmvc.min.js")
                                                             .Include("~/Scripts/kendo/2016.3.1118/cultures/kendo.culture.ru-RU.min.js"));
<system.web>
    <globalizationculture="ru-Ru" uiCulture="ru-Ru" />
</system.web>
kendo.culture("ru-RU");
 @(Html.Kendo().Grid<CertificateDeath>()
    .Name("Grid")
    .Columns(columns =>  {
       columns.Bound(e => e.Name).Width(200);
        columns.Bound(e => e.NameShort).Width(350);
    })
    .Filterable(filterable => filterable
        .Extra(false)
        .Operators(operators => operators
            .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
            ))
        )
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("List", "CertificateDeath"))
     )
    )
I would be grateful for any help.

Kendo grid does not export to excel with cell borders, someone has a solution ? Follow my code:

 .Events(x => x.ExcelExport("excelExport"))

<script type="text/javascript">
        function excelExport(e) {

var sheet = e.workbook.sheets[0];

            for (var i = 0; i < sheet.rows.length; i++) {              
                sheet.rows[0].cells[0].background = "#ffffff";
                sheet.rows[0].cells[1].background = "#ffffff";
                sheet.rows[0].cells[2].background = "#ffffff";
                sheet.rows[0].cells[3].background = "#ffffff";

                for (var ci = 1; ci < sheet.rows[i].cells.length; ci++) {
                    sheet.rows[i].cells[ci].color = "black";

                    sheet.rows[i].cells[ci].border = "black"; // HERE

                }

 }
  </script>

Hi, I'm using a spreadsheet inside a kendo window. We have some columns with validation on them (type is set to 'reject'). So when the user tries to type something into this column, we get the reject window, however, its z-index is behind the Window the user is using. Is there a way to differentiate this reject window (we have 15 kendo windows) on the screen already?

Spreadsheet is attached, to show the reject window appearing partially behind the current window.

We've been pleased with the LESS support that Kendo UI provides with its themes. However, we want to move away from LESS to either SCSS or SASS. Are there any plans to provide themes in either of these formats soon?

Hi, Is there a way to fire the clear method of a kendo multiselect via a button click? I have ten multiselects, and need a way to quickly clear them all.

Thanks

Marc

I would like to set the default option to OR instead of AND with extra is set to True.  How can I do that in Kendo UI MVC?

Hi,

I have a multi value axis chart with crosshair on both categoryaxis and valueaxis. CategoryAxis crosshair works as expected and moves along the data points, but value axis crosshair is freely moveable and I am not sure what intersect values its showing as tooltips (also shared tooltip here is not working). Ideally I expected to see multiple valueaxis crosshairs as I have multiple values axis and move along with data points, but its not so, there is not one for multiple plots and its freely moveable. Image attached (Crudely modified in paint for the actual expectation).

Hi,

In my project I am using the custom add row functionality where the row is a row template, I am  using the grid.dataSource.add(dataitem) method to add the model data for the empty row as I have to send the data from server to the empty row. Below are the problems I am facing

1. When I do grid.dataSource.add(dataitem) the row is always getting at the bottom of the table.

2. After adding the row I am intializing the controls like (datetimepicker,timepicker,select2 etc) for the added row, this works fine if I add row for first time. When I click again to add row with grid.dataSource.add(dataitem) the first row is loosing its initialization like datetimepickers, select 2 and others. So when I debug I found that every time I click add new row with dataSource.add() the table is again calling the rowTemplate function for all the data items in the datasource so the control initializations are getting destroyed.

So can you please help how to resolve those two.