Column Menu Filter input box not selectable

[Jason]

When I navigate to the filter menu in the column menu i am unable to place my cursor in the input box... Meaning if I want to filter by "contains" and I want to type in "something", i cannot type anything in.  It wont even allow me to click on the input boxes.  Its like they are disabled or the focus is not allowed. 

Any ideas?

http://www.telerik.com/forums/kendo-ui-framework

@(Html.Kendo().Grid<DrillDownWSnapshot>()
    .Name("ReportDrillDownWSnapshotGrid")
    .Scrollable(builder => builder.Enabled(true).Height("400px"))
    .HtmlAttributes(new { @class = "cursorLink"})
    .DataSource(ds =>
        ds.Ajax().Read(r => r.Action("DrillDown", "Reports").Data("getDrillDownParameters").Type(HttpVerbs.Post)).PageSize(500)
        )                                    
    .Columns(c =>
        {
            c.Bound(a => a.AccountNumber).Title("Account Number").ClientTemplate("<input type='hidden' id='GridRowURL' value='" + Url.Action("../Workdriver/Account") + "/#=AccountId#' />#=AccountNumber#").Width(150);
            c.Bound(a => a.Product).Title("Product").Width(150);            
            c.Bound(a => a.Source).Title("Source").Width(100);
            c.Bound(a => a.Facility).Title("Facility").Width(100);
            c.Bound(a => a.AdmitDate).Title("Admit Date").Width(150).Format("{0:d}").HtmlAttributes(new { @class = "kendoGridDate" });
            c.Bound(a => a.DischargeDate).Title("Discharge Date").Width(150).Format("{0:d}").HtmlAttributes(new { @class = "kendoGridDate" });
            c.Bound(a => a.List).Title("List").Width(200);
            c.Bound(a => a.Workflow).Title("Workflow").Width(150);
            c.Bound(a => a.Queue).Title("Queue").Width(150);
            c.Bound(a => a.AccountBalance).Title("Account Balance").Width(150).Format("{0:c}").HtmlAttributes(new { @class = "kendoGridCurrency" });            
            c.Bound(a => a.ChargeIntegrityType).Title("Charge Integrity Type").Width(200);
            c.Bound(a => a.ChargeIntegrityReason).Title("Charge Integrity Reason").Width(200);
            c.Bound(a => a.AccountCodeAnomalyGrossOpportunity).Title("Account Code Anomaly Gross Opportunity").Width(300).Format("{0:c}").HtmlAttributes(new { @class = "kendoGridCurrency" });
            c.Bound(a => a.AccountMissingChargeGrossOpportunity).Title("Account Missing Charge Gross Opportunity").Width(300).Format("{0:c}").HtmlAttributes(new { @class = "kendoGridCurrency" });
            c.Bound(a => a.AccountOverchargeGrossOpportunity).Title("Account Overcharge Gross Opportunity").Width(300).Format("{0:c}").HtmlAttributes(new { @class = "kendoGridCurrency" });
            c.Bound(a => a.AccountCodeAnomalyNetOpportunity).Title("Account Code Anomaly Net Opportunity").Width(300).Format("{0:c}").HtmlAttributes(new { @class = "kendoGridCurrency" });
            c.Bound(a => a.AccountMissingChargeNetOpportunity).Title("Account Missing Charge Net Opportunity").Width(300).Format("{0:c}").HtmlAttributes(new { @class = "kendoGridCurrency" });
            c.Bound(a => a.FinancialClassCurrentMC).Title("Financial Class Current MC").Width(200);
            c.Bound(a => a.InsuranceRollupCurrentMC).Title("Insurance Rollup Current MC").Width(215);
            c.Bound(a => a.InsuranceCurrent).Title("Insurance Current").Width(225);
            c.Bound(a => a.PreviousList).Title("Previous List").Width(150);
            c.Bound(a => a.LastActivityDate).Title("Last Activity Date").Width(150).Format("{0:d}").HtmlAttributes(new { @class = "kendoGridDate" });
            c.Bound(a => a.LastActivityUser).Title("Last Activity User").Width(250);
            c.Bound(a => a.LastActivityNote).Title("Last Activity Note").Width(350);
        })   
    .Sortable(s => s.SortMode(GridSortMode.MultipleColumn))
    .Pageable(p =>
        {
            p.Input(true).Numeric(false);
            p.PageSizes(new int[] { 100, 200, 500, 1000 });
        })
    .Filterable(filterable =>
        filterable.Operators(operators => operators
            .ForString(str => str.Clear()
                .Contains("Contains")
                .DoesNotContain("Does not contain")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
                .StartsWith("Starts with")
                .EndsWith("Ends with ")                                
            )
        )
    )
    .ColumnMenu()
    .AutoBind(false)
    .Events(e => e.DataBound("OnDataBound"))
)

[Dimiter Madjarov]

Hello Jason,


The Grid configuration looks correct and it is hard to tell the exact cause of the issue. Is it possible to provide a runnable example, that I could inspect locally and pinpoint the reason for the problem?

I am looking forward to hearing from you.

Regards,
Dimiter Madjarov
Telerik

 

 

[Jason]

I can create a project but I think ti might be an easy answer on your part.

This grid is in a bootstrap 2.3.2 modal.  When I put this grid outside of the modal (i.e. just on the page) it works fine.

I did some google searching and didn't find anything but are there known issues with putting grids in bootstrap modals?

Thanks
Jason

[Dimiter Madjarov]

Hello Jason,

Thank you for the additional information about the Bootstrap modal. This is a known issue and the reason for it is that the Bootstrap modal is preventing interactions with any elements, which are not part of the window content. This is preventing the focus of the inputs as they are in a Kendo popup window, which is appended at the end of the body element and then absolutely positioned.

A possible solution is the one mentioned in the following forum topic, which suggests to disable the focus listener of the modal window.
E.g.

$(document).on('click', '#openModal', function(){
  $('#myModal').on('shown', function () {
            $(document).off('focusin.modal');
        });

  $('#myModal').modal('show');
  if(!$('#grid').data('kendoGrid')){
    createGrid();
  }
});

I hope this information helps. I wish you a great day!

Regards,
Dimiter Madjarov
Telerik

 

 

[Tom]

You can also add an option to the Filterable method  

.Filterable(f => f.Mode(GridFilterMode.Row))