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

Set Column.Template Width and Column Filter by Multi Checkboxes

5 Answers 247 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 04 Sep 2018, 09:53 PM

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

5 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 06 Sep 2018, 01:17 PM
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:
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:
I hope the above helps.


Regards,
Preslav
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Anieda Hom
Top achievements
Rank 1
answered on 06 Sep 2018, 09:53 PM

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

 

0
Preslav
Telerik team
answered on 10 Sep 2018, 11:24 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Anieda Hom
Top achievements
Rank 1
answered on 11 Sep 2018, 03:32 PM

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

0
Preslav
Telerik team
answered on 13 Sep 2018, 12:04 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Anieda Hom
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Anieda Hom
Top achievements
Rank 1
Share this question
or