Set Column.Template Width and Column Filter by Multi Checkboxes

[Anieda Hom]

Hello Admin,

1) How to set the width of this grid's first column where columns.Template(@<text>....</text>)?

2) How to enable multi checkboxes for the last two columns?   As you see code below, it always show "Contains" and "Start With" for all string columns.

Here is the code on the page:

@{
Html.Kendo().Grid(Model)
    .Name("grid")
    .Columns(columns =>
    {
        columns.Template(@<text>
    @if (ViewBag.IsMyRequest == true)
{
    if (item.CompletedFlag == "fully completed" || (item.CompletedFlag == "partially completed" && item.CurrentStatus == "not reviewed"))
    {
    @Html.ActionLink("View", "Read", "Request", new { item.Id, tab = ViewBag.CurrentTab }, new { @class = "btn btn-default" })
}
else
{
        @Html.ActionLink("Update", "Edit", "Request", new { item.Id, tab = ViewBag.CurrentTab }, new { @class = "btn btn-default" })}
}
else if (ViewBag.IsPendingRequest == true)
{
        @Html.ActionLink("Approve", "Approve", "Request", new { item.Id, tab = ViewBag.CurrentTab }, new { @class = "btn btn-default" })
}
else if (ViewBag.IsApprovedDenied == true || ViewBag.IsCompleted == true)
{
        @Html.ActionLink("View", "Read", "Request", new { item.Id, tab = ViewBag.CurrentTab}, new { @class = "btn btn-default" });
}
                </text>);
        columns.Bound(request => request.Id).Width(100).Filterable(ftb => ftb.Cell(cell => cell.Template("integerFilter").Operator("eq").ShowOperators(false).InputWidth(70)));
        columns.Bound(request => request.Requestor).Encoded(false);
        columns.Bound(request => request.RequestDate).Format("{0:MM/dd/yyyy}").Encoded(false).MinScreenWidth(688);
        columns.Bound(request => request.ChangeStartDateTime).Format("{0: M/d/yyyy h:mm tt}").Encoded(false).MinScreenWidth(688);
        columns.Bound(request => request.ChangeEndDateTime).Format("{0: M/d/yyyy h:mm tt}").Encoded(false).MinScreenWidth(688);
        columns.Bound(request => request.RequestSubject).Encoded(false).MinScreenWidth(864);
        columns.Bound(request => request.CurrentStatus).Encoded(false).MinScreenWidth(864).Filterable(ftb => ftb.Multi(true).CheckAll(true));
        columns.Bound(request => request.CompletedFlag).Encoded(false).MinScreenWidth(864).Filterable(ftb =>ftb.Multi(true).CheckAll(true));
    })
.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))
)
.Scrollable(s => s.Enabled(true).Height("auto"))
.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();
            }     
<script>
    function integerFilter(e) {
        e.element.kendoNumericTextBox({
            spinners: false,
            format: "#",
            decimals: 0
        });
    };
</script>
@section scripts {
}

Thanks in advance for your help!

Anieda

[Preslav]

Hi Anieda,

Straight to the answers:

1) To change the width of the template column, add the ".Width(...)" configuration. For example:

columns.Template(@<text>text</text>).Width(50);

2) Generally speaking, the multi-checkbox filter is not integrated into the "row" mode of the Grid. Thus, the only possible solution to use a checkbox filter in a "row" mode is to manually implement it with JavaScript on the client. For example, check the JavaScript code of this KB article:

• https://docs.telerik.com/kendo-ui/knowledge-base/filter-multi-check-row-filter

Additionally, I see that the grid is bound on the server, thus I strongly recommend adding a separate dataSource for the filter. More information about this is available here:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.filterable.multi

I hope the above helps.


Regards,
Preslav
Progress Telerik

[Anieda Hom]

Good afternoon Preslav,

Thanks so much for your response. 

1) column.Template Width works!

2) After reading the links in your post, I made some changes to my code based on code above, but it still not works.  What did I miss?

In column.Bond, I added the bold portion:

columns.Bound(request => request.CurrentStatus).Encoded(false).MinScreenWidth(864).Filterable(ftb => ftb.UI(@<text>enablecheckbox</text>));
columns.Bound(request => request.CompletedFlag).Encoded(false).MinScreenWidth(864);

Then call this script:

<script>
function enablecheckbox() {
$("#grid").kendoGrid({
columns: [
{
field: "CurrentStatus",
filterable: {
multi: true,
dataSource: [
{ CurrentStatus: "approved" }, { CurrentStatus: "not approved" },
{ CurrentStatus: "now reviewed" }
]
}
}
],
filterable: true,
dataSource: [
{ CurrentStatus: "approved" }, { CurrentStatus: "not approved" }, { CurrentStatus: "now reviewed" }
]
});
}
</script>

Any help will be greatly appreciated!

Thanks,

Anieda

 

[Preslav]

Hi Anieda,

Based on the provided code I believe that the reason for the described faulty behavior comes from the fact that the Grid is reinitialized during the "enablecheckbox" function. Generally speaking, reinitializing a Kendo UI widget over the same HTML element is not recommended, and could lead to undesired side effects.

Having said that, for your convenience, I created a small MVC project based on the code from the "Add Multi-Check Filter to Grid in Row Mode" article from my last reply. Please, find it attached to this post.


Regards,
Preslav
Progress Telerik

[Anieda Hom]

Hello Preslav,

Thank you so much for your response.  I'll look into your sample.  If I encounter issue, then I'll get back to you. 

Many thanks,

Anieda

[Preslav]

Hi Anieda,

Please, take your time for examining and testing the project. If any further questions arise, do not hesitate to post them.


Regards,
Preslav
Progress Telerik