This is a migrated thread and some comments may be shown as answers.

Column Menu Filter input box not selectable

4 Answers 407 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 25 Mar 2014, 10:53 PM
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"))
)

4 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 26 Mar 2014, 09:07 AM
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
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
0
Jason
Top achievements
Rank 1
answered on 27 Mar 2014, 09:57 PM
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
0
Dimiter Madjarov
Telerik team
answered on 28 Mar 2014, 12:20 PM
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
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
0
Tom
Top achievements
Rank 1
answered on 11 Jul 2018, 09:18 AM

You can also add an option to the Filterable method  

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

Tags
Grid
Asked by
Jason
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Jason
Top achievements
Rank 1
Tom
Top achievements
Rank 1
Share this question
or