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

Various issues with column filtering....

7 Answers 238 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Terry
Top achievements
Rank 1
Terry asked on 02 Jun 2017, 11:32 AM

Banging my head off a wall trying to configure column filtering in a grid within an mvc app.

Main issues are with datepicker filtering and the filter icon on each column missing.

Im pretty sure Ive the latest version of the kendo ui for mvc installed (thats another story, very confused over what to be using!)

Using the following scripts -

 

<link href="~/Scripts/Kendo_UI_2017_R2/styles/kendo.common.min.css" rel="stylesheet">
<link href="~/Scripts/Kendo_UI_2017_R2/styles/kendo.rtl.min.css" rel="stylesheet">
<link href="~/Scripts/Kendo_UI_2017_R2/styles/kendo.bootstrap.min.css" rel="stylesheet">
<script src="~/Scripts/Kendo_UI_2017_R2/js/jquery.min.js"></script>
<script src="~/Scripts/Kendo_UI_2017_R2/js/jszip.min.js"></script>
<script src="~/Scripts/Kendo_UI_2017_R2/js/kendo.all.min.js"></script>
<script src="~/Scripts/Kendo_UI_2017_R2/js/kendo.custom.min.js"></script>

 

I used the custom builder to build kendo.custom.min and included aspnetmvc.min.js

I've attached an img of how the datepicker is displaying, and one of the missing filter icon

Missing icon works on a different screen, with a class of k-i-filter, in the case where its missing its k-filter

Grid code below:

<tbody>
    @(Html.Kendo().Grid<OriginGreen.Models.CompanySearchGridViewModel.CompanyModel>()
        .Name("CompaniesGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Name).ClientTemplate("<a href='" + Url.Action("ManageCompanies") + "/#= CompanyId #'" + ">#= Name #</a>").Title("Company Name").Width(100); //.Filterable(filterable => filterable.UI("nameFilter"));
            columns.Bound(c => c.Plan_Version).Title("Plan Version").Width(100);
            columns.Bound(c => c.Duration).Title("Duration").Width(100);
            columns.Bound(c => c.Period).Title("AR Year").Width(100);
            columns.Bound(c => c.New_Legacy_Plan).Title("New/Legacy").Width(100);
            columns.Bound(c => c.Next_AR_Due_Date).Format("{0:dd/MM/yyyy}").Title("Next AR Due Date").Width(200).Filterable(f => f.UI("DateFilter"));
            columns.Bound(c => c.Current_Status).Title("Current Status").Width(100);
            columns.Bound(c => c.Assigned_To).Title("Assigned To").Width(100);
            columns.Bound(c => c.BordBiaUserId).Title("BB Reviewer").Width(100);
            columns.Bound(c => c.ThirdPartyUserId).Title("SGS Reviewer").Width(100);
 
 
        })
        .ToolBar(tools => tools.Excel())
        .Excel(excel => excel
        .FileName("Company_List_Admin.xlsx")
        .Filterable(true)
        .ProxyURL(Url.Action("Excel_Export_Save", "Plan"))
        .AllPages(true))
        .Events(e => e.DataBound("onRowBound"))
        .Pageable()
        .Sortable()
        .Scrollable()
        .Selectable()
        .Filterable(filterable => filterable
            .Extra(false)
            .Operators(operators => operators
                    .ForString(str => str.Clear()
                        .StartsWith("Starts with")
                        .IsEqualTo("Is equal to")
                        .IsNotEqualTo("Is not equal to")
                    )
                    .ForNumber(num => num.Clear()
                        .IsEqualTo("Is Equal To")
                        .IsNotEqualTo("Is Not Equal To")
                        .IsGreaterThan("Is Greater Than")
                        .IsLessThan("Is Less Than")
                    )
                    .ForDate(dt => dt.Clear()
                        .IsEqualTo("Is Equal To")
                        .IsNotEqualTo("Is Not Equal To")
                        .IsGreaterThan("Is Greater Than")
                        .IsLessThan("Is Less Than")
                         
                    )
                )
        )
        .DataSource(dataSource => dataSource
                                .Ajax()
                                .ServerOperation(false)
                                .PageSize(10)
                                .Batch(true)
                                .Model(model =>
                                {
                                    model.Id(c => c.CompanyId);
                                })
                                .Read(read => read.Action("DisplayAdminSearchGrid", "Plan").Type(HttpVerbs.Get))
                            )
    )
</tbody>
<script type="text/javascript">
     function DateFilter(control) {
         $(control).kendoDatePicker();
     }
</script>

7 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 06 Jun 2017, 07:17 AM
Hi Terry,

I have examined the screenshots and the referenced files and noticed that you have referenced kendo.common.min.css and also kendo.bootstrap.min.css.

Note that some themes require specific common file. Such is the case for bootstrap. In order for the styles to be displayed correctly you should include kendo.common-bootstrap.css instead of the one that is currently referenced.

If you would like more information on Kendo Themes you would find the article below interesting.


Furthermore, I noticed that both kendo.all.js and kendo.common.js are included. You should remove one of these files. If you would like to have the scripts for all components you need to keep kendo.all.js. In case you would like to have scripts only for some components you can keep the kendo.custom.js file.

Regarding the version of the files. Since R1 2017 the components are using Font Icons and it is important to include the latest scripts and styles in order for the icons to be displayed correctly. You can find more information on where you need to add the files in the article below in the Use Local JavaScript and CSS section. 



Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Terry
Top achievements
Rank 1
answered on 06 Jun 2017, 08:58 AM

Thanks for reply Viktor.

Just to clarify, for css I should remove kendo.common.min.css and kendo.bootstrap.min.css & only use kendo.common-bootstrap.css?

I've tried that and the page looks far worse!

Re. the script files, if I choose kendo.all.js instead of kendo.custom.js, should I also include kendo.aspnetmvc.min.js?

I made sure to include this when using the custom builder to create kendo.custom.js. I'm not sure if it is included in kendo.all.js.

0
Viktor Tachev
Telerik team
answered on 08 Jun 2017, 08:23 AM
Hi Terry,

For the bootstrap theme you need to include kendo.common-bootstrap.css and kendo.bootstrap.css. You need to include both files and should ensure that the common file is added before the other one.

Regarding the JavaScript files. By default the kendo.all.js does not include kendo.aspnetmvc.js. The latter contains scripts that are required by the MVC wrappers. 

With that said, if you have included kendo.aspnetmvc.js to the custom scripts when using the Custom Download builder you can include only the kendo.custom.js file

If you would like more information on the different JavaScript files included with the components you would find the article below interesting.



Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Terry
Top achievements
Rank 1
answered on 08 Jun 2017, 10:15 AM

Thanks Viktor, I will ensure that those suggestions are adhered to,

Lastly, I recently got an updated version of kendo ui (from a colleague) and I noticed that kendo.aspnetmvc.min.js was not in this update, so I continued with a previous version of it.
How can I be certain I have the most up to date version of this file?

Thanks.

0
Viktor Tachev
Telerik team
answered on 09 Jun 2017, 02:03 PM
Hello Terry,

You can check what version of the components is used by opening the file. In the beginning of the file there should be a comment that indicates the Kendo version. The most recent version is 2017.2.504 and the comment in the beginning of the kendo.aspnetmvc.min.js file would look like this:


/**
 * Kendo UI v2017.2.504 (http://www.telerik.com/kendo-ui)
 * Copyright 2017 Telerik AD. All rights reserved.
 *                                                                                                                                                                                                     
 * Kendo UI commercial licenses may be obtained at
 * If you do not own a commercial license, this file shall be governed by the trial license terms.
  
 
*/


The kendo.custom.js file does not contain such comment. If you would like to ensure that it is targeting the latest version of the components you can configure and download it from the Custom Download tool. Make sure that the most recent release is selected in the DropDownList at the top.


Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
mitch
Top achievements
Rank 1
answered on 08 Jan 2018, 08:17 AM
It looks like the aspmvc grid adds the old icon name of "k-filter" when .Filterable() is set for the grid. Isn't the new filter icon class called "k-i-filter"? This is why the icon seems to be missing. Is this a known bug?
0
Viktor Tachev
Telerik team
answered on 09 Jan 2018, 11:59 AM
Hi Mitch,

The behavior you describe can be observed if the Kendo CSS files are from an older version. Make sure that you are using the CSS and JavaScript files shipped with the latest version. Also, make sure that the Kendo.Mvc.dll is the same version. 

The current release is 2017.3.1026 - please update the components to that version and let me know how the behavior changes. 

Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Terry
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Terry
Top achievements
Rank 1
mitch
Top achievements
Rank 1
Share this question
or