UI for ASP.NET MVC Grid Number Filter is Decimal

[Anieda Hom]

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();

[Anieda Hom]

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();
}

[Viktor Tachev]

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

[Jon]

If you only want positive numbers, set min to 0.

function integerFilter(args) {
    args.element.kendoNumericTextBox({
        decimals: 0,
        format: "n0",
        min: 0
    });
};

[Eyup]

Hi Jon,

Thank you for sharing your input and approach with our community. I hope it will prove helpful to other developers as well.

[Anieda Hom]

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

 

[Anieda Hom]

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

 

 

 

[Viktor Tachev]

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

[Tim]

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
    });
}

 

[Viktor Tachev]

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

[Sean]

Is there a way to accomplish this same result when .Mode(GridFilterMode.Menu) is set on the column?

[Eyup]

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.