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

UI for ASP.NET MVC Grid Number Filter is Decimal

8 Answers 425 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Anieda Hom
Top achievements
Rank 1
Anieda Hom asked on 11 Jul 2018, 09:50 PM

I want to have the grid number column (ID field) filter to be integer.  How can I accomplish that?  When it run, the filter show decimal.  There is no JavaScript for it.  What is the correct code?

Thank you very much in advance!!
Anieda

Here is the code:

@{<br>    Html.Kendo().Grid(Model)<br>        .Name("grid")<br>        .Columns(columns =><br>        {<br>     columns.Bound(request => request.Id).Encoded(false);<br>     columns.Bound(request => request.Requestor).Encoded(false);<br>     columns.Bound(request => request.RequestDate).Format("{0:MM/dd/yyyy}").Encoded(false);<br>     columns.Bound(request => request.ChangeStartDateTime).Format("{0: M/d/yyyy h:mm tt}").Encoded(false);<br>     columns.Bound(request => request.ChangeEndDateTime).Format("{0: M/d/yyyy h:mm tt}").Encoded(false);<br>     columns.Bound(request => request.RequestSubject).Encoded(false);<br>     columns.Bound(request => request.CurrentStatus).Encoded(false);<br>     columns.Bound(request => request.CompletedFlag).Encoded(false);<br> })<br>.Filterable(filterable => filterable<br>   .Extra(false)<br>   .Operators(operators => operators<br>       .ForString(str => str.Clear()<br>           .Contains("Contains")<br>           .StartsWith("Starts With "))<br>       .ForNumber(num => num.Clear()<br>              .IsEqualTo("Equal to"))<br>       .ForDate(d => d.Clear())<br>    )<br>   .Mode(GridFilterMode.Row))<br>.Pageable(pageable => pageable<br>   .Refresh(true)<br>   .PageSizes(true)<br>   .ButtonCount(5))<br>.Resizable(resize => resize.Columns(true))<br>.Selectable()<br>.Sortable()<br>.DataSource(dataSource => dataSource<br>.Server()<br>.Model(model => model.Id(request => request.Id))<br>)<br>.ToolBar(toolbar =><br>{<br>   toolbar.Template(@<text><br>    <div class="toolbar"><br>        <label class="category-label" for="category">Requests</label><br>        @Html.ActionLink("New Request", "New", "Request", null, new { @class = "btn-primary btn" })<br>    </div><br></text>);<br>})<br>.Render();

8 Answers, 1 is accepted

Sort by
0
Anieda Hom
Top achievements
Rank 1
answered on 11 Jul 2018, 09:53 PM

Sorry, don't know how to format in code view.  Here is the code:

@{
    Html.Kendo().Grid(Model)
        .Name("grid")
        .Columns(columns =>
        {
     columns.Bound(request => request.Id).Encoded(false);
     columns.Bound(request => request.Requestor).Encoded(false);
     columns.Bound(request => request.RequestDate).Format("{0:MM/dd/yyyy}").Encoded(false);
     columns.Bound(request => request.ChangeStartDateTime).Format("{0: M/d/yyyy h:mm tt}").Encoded(false);
     columns.Bound(request => request.ChangeEndDateTime).Format("{0: M/d/yyyy h:mm tt}").Encoded(false);
     columns.Bound(request => request.RequestSubject).Encoded(false);
     columns.Bound(request => request.CurrentStatus).Encoded(false);
     columns.Bound(request => request.CompletedFlag).Encoded(false);
 })
.Filterable(filterable => filterable
   .Extra(false)
   .Operators(operators => operators
       .ForString(str => str.Clear()
           .Contains("Contains")
           .StartsWith("Starts With "))
       .ForNumber(num => num.Clear()
              .IsEqualTo("Equal to"))
       .ForDate(d => d.Clear())
    )
   .Mode(GridFilterMode.Row))
.Pageable(pageable => pageable
   .Refresh(true)
   .PageSizes(true)
   .ButtonCount(5))
.Resizable(resize => resize.Columns(true))
.Selectable()
.Sortable()
.DataSource(dataSource => dataSource
.Server()
.Model(model => model.Id(request => request.Id))
)
.ToolBar(toolbar =>
{
   toolbar.Template(@<text>
    <div class="toolbar">
        <label class="category-label" for="category">Requests</label>
        @Html.ActionLink("New Request", "New", "Request", null, new { @class = "btn-primary btn" })
    </div>
</text>);
})
.Render();
}

0
Viktor Tachev
Telerik team
answered on 13 Jul 2018, 02:14 PM
Hello Anieda,

In order to change the options for the NumericTextBox rendered in the filter row I can suggest specifying a cell template. The column definition would look similar to the following.

columns.Bound(request => request.Id).Encoded(false).Filterable(ftb => ftb.Cell(cell => cell.Template("customFilter")));


And the JavaScript initiating a customized NumericTextBox:

<script>
    function customFilter(args) {
        args.element.kendoNumericTextBox({
            decimals: 0,
            format: "n0"
        });
    }
</script>


Give the approach a try and let me know how it works for you.


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.
0
Anieda Hom
Top achievements
Rank 1
answered on 13 Jul 2018, 02:40 PM

Good morning Viktor,

Thank you so much for sending me the code.  The decimal is gone.  When I key in the whole number like 12345 for the ID field, it displays as 12,345 (see attached image).   How do I change the format in JavaScript?

Many thanks,

Anieda

 

0
Anieda Hom
Top achievements
Rank 1
answered on 13 Jul 2018, 02:58 PM

Good morning again Viktor,

I found the solution.  I changed the JavaScript format as:

function customFilter(args) {
        args.element.kendoNumericTextBox({
            decimals: 0,
            format: "g"
        });
    }

Now the output is 12345 instead of 12,345.

Thank you so much for your support and quick response!

Anieda

 

 

 

0
Viktor Tachev
Telerik team
answered on 17 Jul 2018, 11:26 AM
Hello Anieda,

I am glad that the suggested approach is working for you. Thank you for sharing the final settings you used to achieve the requirement. This can help someone looking for similar behavior. 

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.
0
Tim
Top achievements
Rank 1
answered on 26 Oct 2020, 04:05 PM

Is this solution different for .net core? Here's what I've got and it's not working.

 

        columns.Bound(c => c.NeedID).Title("Id").Width(50).Filterable(f => f.Extra(false).Cell(c => c.Template("gridFilterIntegerNumericTextbox").ShowOperators(true)));
 
 
function gridFilterIntegerNumericTextbox(args) {
    args.element.kendoNumericTextBox({
        spinners: false,
        format: "n0",
        decimals: 0
    });
}

 

0
Viktor Tachev
Telerik team
answered on 27 Oct 2020, 01:11 PM

Hi Tim,

 

The approach suggested previously can be used to customize the filter when FilterMode is set to Row. In case you are using a filter menu the approach would be a bit different. The Filterable.UI property needs to be used instead. 

Check out the example below where the approach is illustrated:

https://demos.telerik.com/aspnet-core/grid/filter-menu-customization

 

Regards,
Viktor Tachev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Sean
Top achievements
Rank 1
Iron
answered on 09 May 2022, 03:34 PM
Is there a way to accomplish this same result when .Mode(GridFilterMode.Menu) is set on the column?
Eyup
Telerik team
commented on 11 May 2022, 08:28 AM

Hi Sean,

This requirement is also possible with Filter Mode set to Menu, however, the implementation would be a tad different.

Check the answer by my colleague Viktor which describes how to do that:

"The approach suggested previously can be used to customize the filter when FilterMode is set to Row. In case you are using a filter menu the approach would be a bit different. The Filterable.UI property needs to be used instead. 

Check out the example below where the approach is illustrated:

https://demos.telerik.com/aspnet-core/grid/filter-menu-customization

"

Feel free to try that and if there are any errors, share your Grid configuration with us.

Tags
Grid
Asked by
Anieda Hom
Top achievements
Rank 1
Answers by
Anieda Hom
Top achievements
Rank 1
Viktor Tachev
Telerik team
Tim
Top achievements
Rank 1
Sean
Top achievements
Rank 1
Iron
Share this question
or