[Solved] ClientEvents when Server bound?

[Tony Herring]

Is it possible to use ClientEvents and keep the grid server bound?

When I add the following to my grid, I can no longer sort, page, or filter -

.ClientEvents(events =>

{

events.OnDataBinding(

 

"onDataBinding");

 

})

Here is my entire grid-

<

 

 

h2>Requisition List for View</h2>

 

 

 

<div>

 

<%

 

= Html.ActionLink("Export Current Page", "Export", new { page = 1, orderBy = "~", filter = "~", allPages = "false", listSource = "ViewList"}, new { id = "exportPageLink" })%>

 

 

 

<br />

 

<%

 

= Html.ActionLink("Export All Pages", "Export", new { page = 1, orderBy = "~", filter = "~", allPages = "true", listSource = "ViewList"}, new { id = "exportAllLink" })%>

 

 

 

</div>

 

 

 

 

<div >

 

<% Html.Telerik().Grid(Model.RequisitionList)

.Name(

 

"Grid")

 

.DataBinding(dbinding => dbinding.Server())

.DataKeys(keys =>

{

keys.Add(o => o.RequisitionID);

})

.Columns(columns =>

{

columns.Template(o =>

{

%>

 

 

<a href="<%: Url.Action("Details", "Requisition", new { id = o.RequisitionID }) %>" class = "viewLink" title="Details"><img src="<%= Url.Content("~/Content/Images/magnifier.png") %>" alt="Details" /></a>

 

<%

}).Title(

 

"View").Width(50);

 

columns.Bound(o => o.Requestor.FullName).Title(

 

"Requestor").Filterable(false).Sortable(false).Width(100);

 

columns.Bound(o => o.Vendor.Name).Title(

 

"Vendor").Width(100);

 

columns.Bound(o => o.FiscalYear).Title(

 

"Fiscal Year").Width(80);

 

columns.Bound(o => o.Account.Number).Title(

 

"Account").Width(80);

 

columns.Bound(o => o.RequestedDate).Title(

 

"Requested").Format("{0:d}").Width(80);

 

columns.Bound(o => o.Status).Title(

 

"Status").Width(80);

 

columns.Bound(o => o.Description).Title(

 

"Description").Filterable(false).Sortable(false).Width(200);

 

columns.Bound(o => o.ReceivedDate).Title(

 

"Received").Format("{0:d}").Width(80);

 

columns.Bound(o => o.Paid).Title(

 

"Paid").Width(50);

 

columns.Bound(o => o.ModifiedBy).Title(

 

"Modified By").Width(80);

 

columns.Bound(o => o.ModifiedDate).Title(

 

"Modified Date").Format("{0:d}").Width(100);

 

})

.Filterable()

.Scrollable(scrolling => scrolling.Height(

 

"440px"))

 

.Sortable(sorting => sorting.OrderBy(sortOrder => sortOrder.Add(o => o.ReceivedDate).Descending()))

.Pageable()

.Resizable(resizing => resizing.Columns(

 

true))

 

.Footer(

 

true)

 

.ClientEvents(events =>

{

events.OnDataBinding(

 

"onDataBinding");

 

})

.Render();

%>

 

 

</div>

 

 

 

<script type="text/javascript">

 

 

 

function onDataBinding() {

 

 

 

var grid = $(this).data('tGrid');

 

 

 

var $exportPageLink = $('#exportPageLink');

 

 

 

var $exportAllLink = $('#exportAllLink');

 

 

 

var hrefPage = $exportPageLink.attr('href');

 

hrefPage = hrefPage.replace(/page=([^&]*)/,

 

'page=' + grid.currentPage);

 

hrefPage = hrefPage.replace(/orderBy=([^&]*)/,

 

'orderBy=' + (grid.orderBy || '~'));

 

hrefPage = hrefPage.replace(/filter=(.*)/,

 

'filter=' + (grid.filterExpression || '~'));

 

$exportPageLink.attr(

 

'href', hrefPage);

 

 

 

var hrefAll = $exportAllLink.attr('href');

 

hrefAll = hrefAll.replace(/page=([^&]*)/,

 

'page=1');

 

hrefAll = hrefAll.replace(/orderBy=([^&]*)/,

 

'orderBy=' + (grid.orderBy || '~'));

 

hrefAll = hrefAll.replace(/filter=(.*)/,

 

'filter=' + (grid.filterExpression || '~'));

 

$exportAllLink.attr(

 

'href', hrefAll);

 

}

 

 

</script>


Thank you,

 

-Tony

[Atanas Korchev]

Hello Tony Herring,

I suggest using the OnLoad event of the grid instead of OnDataBinding. OnLoad always fires when the page is loaded and the grid is initialized. It will work during server binding as well.

Best wishes,
Atanas Korchev
the Telerik team

[Tony Herring]

Hello,

Thank you for the quick response.

I tried OnLoad(), and I can filter and sort. However, filtering and sorting is not causing OnLoad() to fire.

I also tried removing the ClientEvent and using jquery like so -

<% Html.Telerik().ScriptRegistrar().OnDocumentReady(()=>{ %>setExportLinks();<% }); %>

<

 

 

script type="text/javascript">

 

 

 

function setExportLinks() {

 

 

 

var grid = $(this).data('tGrid');

 

 

 

var $exportPageLink = $('#exportPageLink');

 

 

 

var $exportAllLink = $('#exportAllLink');

 

 

 

var hrefPage = $exportPageLink.attr('href');

 

hrefPage = hrefPage.replace(/page=([^&]*)/,

 

'page=' + grid.currentPage);

 

hrefPage = hrefPage.replace(/orderBy=([^&]*)/,

 

'orderBy=' + (grid.orderBy || '~'));

 

hrefPage = hrefPage.replace(/filter=([^&]*)/,

 

'filter=' + (grid.filterExpression || '~'));

 

hrefPage = hrefPage.replace(/allPages=([^&]*)/,

 

'allPages=false');

 

hrefPage = hrefPage.replace(/listSource=(.*)/,

 

'listSource=ViewList');

 

$exportPageLink.attr(

 

'href', hrefPage);

 

 

 

var hrefAll = $exportAllLink.attr('href');

 

hrefAll = hrefAll.replace(/page=([^&]*)/,

 

'page=1');

 

hrefAll = hrefAll.replace(/orderBy=([^&]*)/,

 

'orderBy=' + (grid.orderBy || '~'));

 

hrefAll = hrefAll.replace(/filter=([^&]*)/,

 

'filter=' + (grid.filterExpression || '~'));

 

hrefAll = hrefAll.replace(/allPages=([^&]*)/,

 

'allPages=true');

 

hrefAll = hrefAll.replace(/listSource=(.*)/,

 

'listSource=ViewList');

 

$exportAllLink.attr(

 

'href', hrefAll);

 

}

 

 

</script>

 

However, this results in a JavaScript error - Microsoft JScript runtime error: 'currentPage' is null or not an object. That is this line -
hrefPage = hrefPage.replace(/page=([^&]*)/, 'page=' + grid.currentPage);

Thoughts?

Thanks for your help,

-Tony

[Atanas Korchev]

Hi Tony Herring,

Try changing the code from :

var grid = $(this).data('tGrid');

to:
var grid = $('#Grid').data('tGrid');

'this' is only valid if used inside a grid event handler.

Regards,
Atanas Korchev
the Telerik team

[Tony Herring]

Hi, Atanas.

Thanks, that got me closer. BTW, the OnLoad event was indeed firing upon sorting and filtering. I think the problem now is that

grid.filterExpression

 

is always undefined.

I am getting grid.currentPage and grid.orderBy returned correctly.

I'm wondering if grid.filterExpression is the correct property, or if I should be setting up the grid with

 

.Filterable()

 

configured differently.

--- Turns out that it should be grid.filterBy.

Thank you,

-Tony

 

 

[Mylène]

Hi,
I'm also using a grid with server binding.
I've specified this clientevent
        .ClientEvents(clientEvents => clientEvents.OnEdit("grid_edit"))
But it is never called. If i set the grid with ajax binding, it works.
Is there a way to use clientevent with serve binding ?

Thanks.