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

Grid filter with checkbox and AJAX

0 Answers 169 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
hjbaard
Top achievements
Rank 1
hjbaard asked on 14 Apr 2011, 03:30 PM
Hi,
In my ASP.NET MVC 3 project I have a Telerik Grid that shows users from which I can export certificates.

On top of the grid I have a checkbox where I can tell if only I want to see only users which certificates are not exported yet or all users.
I also use AJAX to filter data.
Here is my code:

<div class="panel">
    <label for="OrderStatus-input" style="vertical-align:top;">Show only not exported users:</label>
    @Html.CheckBox("NotExportedOnly", true)
</div>
 
<p></p>
 
@(Html.Telerik().Grid(Model.CertUsers)
    .Name("Grid")
    .ToolBar(c => c
        .Custom()
            .HtmlAttributes(new { id = "exportCSV" })
            .Text("Export CSV")
            .Action("ExportCSV", "Beheer", new { orderBy = "~", filter = "~" }))  
    .ToolBar(c => c
        .Custom()
            .HtmlAttributes(new { id = "exportXLS" })
            .Text("Export Excel")
            .Action("ExportXLS", "Beheer", new { orderBy = "~", filter = "~" }))
    .Columns(columns =>
    {
        columns.Bound(u => u.CourseName);
        columns.Bound(u => u.Score);
        columns.Bound(u => u.DatumAfgerond).Format("{0:dd-MM-yyyy}");
        columns.Bound(u => u.LmsFirstName);
        columns.Bound(u => u.LmsPrefix);
        columns.Bound(u => u.LmsLastName);
    })
    .DataBinding(dataBinding => dataBinding.Ajax().Select("_Export", "Beheer"))
    .ClientEvents(events => events.OnDataBound("onDataBound"))
    .Resizable(r => r.Columns(true))
    .Pageable(p => p.PageSize(14))
    .Sortable()
    .Filterable()
    .Scrollable(s => s.Height(400))
    )
 
<script type="text/javascript">
    function onDataBound() {
        var href;
        var grid = $(this).data('tGrid');
 
        //past de link van Export CSV aan ivm orderBy en filter
        var $exportCSV = $('#exportCSV');
        href = $exportCSV.attr('href');
        href = href.replace(/orderBy=([^&]*)/, 'orderBy=' + (grid.orderBy || '~'));
        href = href.replace(/filter=(.*)/, 'filter=' + (grid.filterBy || '~'));
        $exportCSV.attr('href', href);
 
        //past de link van Export XLS aan ivm orderBy en filter
        var $exportXLS = $('#exportXLS');
        href = $exportXLS.attr('href');
        href = href.replace(/orderBy=([^&]*)/, 'orderBy=' + (grid.orderBy || '~'));
        href = href.replace(/filter=(.*)/, 'filter=' + (grid.filterBy || '~'));
        $exportXLS.attr('href', href);
    }
 
</script>

But how can I make the filter work?

Tags
General Discussions
Asked by
hjbaard
Top achievements
Rank 1
Share this question
or