Error when calling set_virtualItemCount()

[Roatin Marth]

When calling masterTableView.set_virtualItemCount(1234) the method fails with the error "Sys.ArgumentUndefinedException: Value cannot be undefined. Parameter name: id"

The error is caused by the following lines in set_virtualItemCount():

    if (this._data.sliderClientID != "")
    {
        var slider = $find(this._data.sliderClientID);

this._data.sliderClientID is undefined as I'm not using a slider for paging, and naturally "" != undefined in javascript. So the call to $find() is what's causing the error.

I believe the problem would only exist in the debug version of the AJAX.NET library (MicrosoftAjax.debug.js) as the release version does not do type checking on arguments; The call to $find() would simply return null.

[Roatin Marth]

This is only happening in the latest release (Q3 2008). It seems prior versions set sliderClientID to "".

Why don't you just use

if (this._data.sliderClientID)

? That would avoid these type mismatches on id strings.

[Roatin Marth]

To work around the issue I am doing:

    myMasterTableView._data.sliderClientID = myMasterTableView._data.sliderClientID || '';

before calling set_virtualItemCount()

[Rosen]

Hi Scott Regier,

Thank you for your report. We will look into this, however can you please send us some more details about your scenario and implementation as I was unable to reproduce the described behavior on my local machine. Thus we will be able to build a test case for the scenario in question.  

Regards,
Rosen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Scott R]

I've got the same problem. I'm using client-side data-binding with a WCF service and setting the virtualItemCount manually. It worked fine with the Q2 controls, but I upgraded to Q3 tonight and now it throws an exception.

Here's the calling js:

function InvoiceList_GetData(Filter) {
    try {
        var grid = GetInvoiceGrid();
        if (grid != null) {
            var tableView = grid.get_masterTableView();

            var currentPageIndex = tableView.get_currentPageIndex();
            var pageSize = tableView.get_pageSize();

            var sortExpressions = tableView.get_sortExpressions();
            var sortField = '';
            var sortOrder = Telerik.Web.UI.GridSortOrder.None;

            if (sortExpressions.get_count() > 0) {
                sortField = sortExpressions.getItem(0).get_fieldName();
                sortOrder = sortExpressions.getItem(0).get_sortOrder();
            }

            var empty = new Array();
            tableView.set_dataSource(empty);
            tableView.dataBind();

            IME.GetInvoices(currentPageIndex * pageSize, pageSize, Filter, sortField, sortOrder, InvoiceList_GetDataComplete);
            IME.GetMerchant(GetMerchantComplete);
        }
    }
    catch (ex) {
        try {
            IME.LogErrorMessage('InvoiceList_GetData', ex.name, ex.message);
        }
        catch (e) { }
        alert('An error occurred while attempting to display the invoice list. Please refresh your browser and try again.');
    }
}

And here's the callback function that does the data-binding (and generates the exception). The exception occurs on the call to set_virtualItemCount(result.RowCount)

function InvoiceList_GetDataComplete(results) {
    try {
        var previewFrame = document.getElementById('PreviewFrame');
        var noSelection = document.getElementById('NoSelectionDiv');
        previewFrame.style.visibility = 'hidden';
        noSelection.style.display = 'block';

        var grid = GetInvoiceGrid();
        var tableView = grid.get_masterTableView();
        tableView.set_dataSource(results.Items);

        if (results.Items.length > 0)
            tableView.hideItem(0);
        else {
            tableView.showItem(0);
            tableView.clearSelectedItems();
        }

        tableView.dataBind();
        tableView.set_virtualItemCount(results.RowCount);

        if (results.length === 0)
            tableView.clearSelectedItems();

        SetToolbarItems();
    }
    catch (ex) {
        try {
            IME.LogErrorMessage('InvoiceList_GetDataComplete', ex.name, ex.message);
        }
        catch (e) { }
        alert('An error occurred while attempting to display the invoice list. Please refresh your browser and try again.');
    }
}

Here is the grid markup:

        <telerik:RadGrid ID="InvoiceGrid" runat="server" AllowSorting="true" AllowPaging="true" PageSize="50" EnableViewState="false" AllowMultiRowSelection="true" style="border:0; outline:none" Width="100%" Height="100%">
            <MasterTableView DataKeyNames="Id" ClientDataKeyNames="Id" TableLayout="Auto" AutoGenerateColumns="false" EnableViewState="false">
                <Columns>
                    <telerik:GridBoundColumn UniqueName="InvoiceDate" SortExpression="InvoiceDate" HeaderText="Invoice Date" DataField="InvoiceDate" DataFormatString="{0:d}">
                        <HeaderStyle Width="95px"></HeaderStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="DueDate" SortExpression="DueDate" HeaderText="Due Date" DataField="DueDate" DataFormatString="{0:d}">
                        <HeaderStyle Width="75px"></HeaderStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="InvoiceNumber" SortExpression="InvoiceNumber" HeaderText="Invoice #" DataField="InvoiceNumber">
                        <HeaderStyle Width="75px"></HeaderStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="AccountName" SortExpression="AccountName" HeaderText="Account Name" DataField="AccountName">
                        <HeaderStyle />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="TotalAmountDue" SortExpression="TotalAmountDue" HeaderText="Invoice Total" DataField="TotalAmountDue" DataFormatString="{0:C2}">
                        <HeaderStyle Width="95px" HorizontalAlign="Right" />
                        <ItemStyle HorizontalAlign="Right" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="AmountOwed" SortExpression="AmountOwed" HeaderText="Balance Due" DataField="AmountOwed" DataFormatString="{0:C2}">
                        <HeaderStyle Width="90px" HorizontalAlign="Right" />
                        <ItemStyle HorizontalAlign="Right" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="DateCreated" SortExpression="DateCreated" HeaderText="Created" DataField="DateCreated" DataFormatString="{0:d}">
                        <HeaderStyle Width="68px"></HeaderStyle>
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
           <ClientSettings AllowDragToGroup="False" AllowGroupExpandCollapse="true" EnablePostBackOnRowClick="false">
                <Selecting AllowRowSelect="True" />
                <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                <ClientEvents OnRowSelected="InvoiceList_RowSelected" OnRowDeselected="InvoiceList_RowDeselected"
                    OnCommand="InvoiceList_Command" OnRowDataBound="InvoiceList_RowDataBound" />
            </ClientSettings>
        </telerik:RadGrid>

Scott Regier's work-around worked for me, but it would (obviously) be better if no work-around were required.

[Rosen]

Hi Scott,

This issue is already addressed by our developers and the fix will be available in SP1 of this year's Q3 release of RadControls for ASP.NET AJAX.

Sincerely yours,
Rosen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Kevin Castle]

When will this fix be available?
Our next release depends upon this functionality working.
Is there anyway that we can get our hands on a fix as soon as possible?

Also, can you explain how a feature like this can simply....not work. Did your QA group ever this this? Have your devs created any samples using custom paging....maybe you might want to expand your samples to show more functionality so that this stuff gets uncovered before it is released. Cause seriously its not like this is a niche issue, the feature just plain doesnt work.

Please let me know ASAP regarding the timeline for this fix.

[Scott R]

A very simple work-around is provided in this thread.

Also, a quick look at the release history (http://www.telerik.com/products/aspnet-ajax/whats-new/release-history.aspx) shows that SP1 is generally around 30 days after the initial release. So based on history, I'd expect it around Dec 6, 2008.

[Kevin Castle]

I just applied the work around and I do not get the javascript exception.
However... the paging @ the bottom is still not being set correctly.



Here is some more info:
This is what i see @ the bottom of the grid.

Change page:  1 

 Displaying page 2 of 10, items 21 to 40 of 100.

Im binding 20 items on the page, and setting the virtual item count to be 100, but the pager info @ the bottom is not  reflecting this.

Here is the markup information

 

<form id="form1" runat="server">

 

 

<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server">

 

 

</asp:ScriptManager>

 

 

<asp:Button ID="Button1" runat="server" OnClientClick="LoadGridData(); return false;" Text="Number of Records" />

 

 

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

 

 

<span id="log">Log:</span>

 

 

 

<br />

 

 

Change Page Size to Bind Grid:

 

<asp:DropDownList ID="ddPageSize" AutoPostBack="false" onchange="SetNewGridPageSize(); return false;" EnableViewState="true" Width="50px" runat="server">

 

 

<asp:ListItem Text="5" Value="5"></asp:ListItem>

 

 

<asp:ListItem Text="10" Value="10"></asp:ListItem>

 

 

<asp:ListItem Text="20" Value="20"></asp:ListItem>

 

 

</asp:DropDownList>

 

 

 

<div>

 

 

 

<telerik:RadGrid ID="RadGrid1" Skin="Office2007" runat="server"

 

 

GridLines="None" AllowCustomPaging="true" AllowPaging="true" AllowSorting="true" >

 

 

<ClientSettings>

 

 

<ClientEvents OnCommand="RadGrid1_Command" OnGridCreated="GridCreated"/>

 

 

</ClientSettings>

 

 

<PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>

 

 

<MasterTableView>

 

 

<Columns>

 

 

<telerik:GridBoundColumn DataField="NewId" SortExpression="NewId" HeaderText="Id"></telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="FirstName" SortExpression="FirstName" HeaderText="First Name"></telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="LastName" SortExpression="LastName" HeaderText="Last Name"></telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="DOB" SortExpression="DOB" DataType="System.DateTime" HeaderText="Date of Birth"></telerik:GridBoundColumn>

 

 

</Columns>

 

 

<NoRecordsTemplate>

 

No Records Available

 

</NoRecordsTemplate>

 

 

 

</MasterTableView>

 

 

</telerik:RadGrid>

 

 

 

<script type="text/javascript" >

 

 

function SetNewGridPageSize()

 

{

 

var pageSize = $get("<%= ddPageSize.ClientID %>").value;

 

 

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

 

tableView.set_pageSize(parseInt(pageSize, 10));

}

 

function log(message)

 

{

 

var log = document.getElementById("log");

 

log.innerHTML += message +

"<br/>";

 

}

 

function GridCreated(sender, args)

 

{

log(

"ClientID of server-side grid object " + sender.ID + " is: " + sender.ClientID);

 

LoadGridData();

//databind grid after the grid is created

 

}

 

function RadGrid1_RowDataBound(sender, args)

 

{

}

 

function OnLoadDataFailed()

 

{

alert(

"Telerik controls do not work as good as our company had once thought.");

 

}

 

function RadGrid1_Command(sender, args)

 

{

args.set_cancel(

true);

 

 

var commandName = args.get_commandName();

 

 

if (commandName == "Page" || commandName == "PageSize") //rebind data when pagesize and pageindex is changed

 

{

LoadGridData();

}

}

 

 

function OnLoadDataSuccess(e)

 

{

 

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

 

 

if (tableView != null) //if grid found get data, set virtual pagesize, and bind data

 

{

tableView.set_dataSource(e.Rows);

tableView._data.sliderClientID = tableView._data.sliderClientID ||

'';

 

tableView.set_virtualItemCount(e.TotalRowCount);

//the first time that the page loads an exception is thrown from here

 

tableView.dataBind();

 

}

}

 

 

function LoadGridData()

 

{

 

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

 

 

var currentPageIndex = tableView.get_currentPageIndex();

 

 

var pageSize = tableView.get_pageSize();

 

 

var sortExpression = tableView.get_sortExpressions().toString();

 

PageMethods.GetData(sortExpression,

"ASC", pageSize, currentPageIndex, OnLoadDataSuccess, OnLoadDataFailed);

 

}

 

</script>

 

 

</div>

 

 

</form>


I have an outstanding support ticket with the sample project attached. I have not heard a response back regarding the issue but maybe someone could take a look @ the sample there to better addresst the issue that im describing. Support Ticket : 175813 (or at least thats what it had as the threadId in the url when i view the support ticket)

 

[Crescent]

> "Telerik controls do not work as good as our company had once thought."

Ouch.

Here are a few things I've found to be problematic with clientside databinding in the grid:

• The numeric pager style doesn't work. Only page 1's linkbutton is rendered. You are limited to "NextPrev" only.
• If you have a GridClientSelectionColumn and you try to increase the pagesize after initial page load (ie set_pageSize(xxx)), the extra rows don't get rendered with their checkbox.
• If you try to increase the pagesize by more than 100, performance in IE6 degrades massively during dataBind()ing while it attempts to render those rows and create dataItems for them. I've seen an additional 200 row payload bring IE6 to its knees for a solid minute and a half (as in, completely frozen, 100% CPU). Of note is telerik's own "Advanced" pager style does not let the user increase the pageSize, only decrease.

The clientside databinding features of this release have disappointed (to say the least).

[Rosen]

Hi Crescent,

Unfortunately currently numeric pager is not supported with client-side databinding. However this functionality can be achieved by manually populating the pager by javascript. I have attached a simple page which demonstrates this approach. We will do our best to provide build-in support for other pager types for the next version of the control.

As to your other question about the missing checkbox as any other control. This is currently a limitation due to the fact that the controls cannot be easily created on the client. However we are in a search for workaround for this limitation, thus we may see support for this scenario in a future version of RadGrid.

Regards,
Rosen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Crescent]

Hello Rosen,

Thanks for the info and the paging demo. I am well aware of all the javascript required to get the grid doing what I need client-side and am already doing so (including using the technique you attached). I was just pointing out the areas where RadGrid's client-side support are weak.

Some notes on your demo for anyone else concerned:

• it breaks the "totals" count ("items x to y of z"). This would have to get hacked back in too.
• it renders the full set of links (as opposed to just 10 at a time like the built-in pager), which for usability of large datasets is a poor solution.
• It would be faster (albeit less elegant) to assign the html contents of the pager all in one innerHTML = ... statement, as performance degrades with large datasets using the approach in the demo (ie, calls to appendChild()).
• the PagerTemplate is not a template at all, it's just an empty div

Oh and I forgot to add these to the list of missing client-side features:
- no support for grouping. That sucks.
- no support for AllowNaturalSort="false". Sorting always resets itself to "none" (or "natural" if you prefer) on every 3rd click (ie, asc -> desc -> none)

[Kevin Castle]

Does telerik even have this one documented as a limitation?

"The numeric pager style doesn't work. Only page 1's linkbutton is rendered. You are limited to "NextPrev" only. "

This is like a make/break feature for some people. Can you guys please make a "things that dont work with client side databinding" list and send me a link. It would help us out tremendously.

[Rosen]

Hello Kevin Castle,

I'm happy to inform you that our developers has addressed this issue. Thus I'm attaching a trail version of the latest internal build (for a dev version please submit a request through a formal ticket).

Please give it a spin and let us know if this helps.

All the best,
Rosen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Kevin Castle]

I just tested the hotfix version of the controls and numerical paging is working perfectly.
Im going to add the hotfix assembly into our project...but would rather deploy to production with a fully tested release from you guys.
When should this be bundled into a release?

Also, is there any news with supporting client side sorting (when doing client-databinding) (without having to make a callback to get data from the server). Ive read a number of posts stating that this is also broken/not working. Is there any scheduled time to have this working too?

Please let me know regarding these questions and thank you for posting the fix.

[Crescent]

Awesome. Works. Thank you.

[Kevin Castle]

The fix provided did work but the other question that I had was never answered:

"Does telerik even have this one documented as a limitation?"
Do you guys have all the things that dont work with client side databinding (non-declarative) defined anywhere. Our project was delayed by weeks because we kept find one issue after another with this databinding approach and the rad grid. If we just knew upfront all of the problems that we were going to have, it would have made our project more of a success rather than a failure solely because of a 3rd party control.

[Pavel]

Hello Kevin,

Unfortunately we do not have such a list currently which indeed is a serious drawback. We will do our best to add this information to our documentation in the future. Please excuse us for the caused inconveniences.

Regards,
Pavel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Aakansha]

Hello,

I have one Query....
I am working with radgrid pager where i want to position numericc pages ,add custom text such as Result Found Per Page,thn in right corner i want next previous buttons..for this i am on Item Created event clearing ontrols inside pager and adding new table in pager where i eant ot display numeric 1 2 3 4 5 6 7 etc but when i am calling method GetNumericPager() which returns numeric pager control i add it in inside panel and i added that panel in radgrid pager.Here it only displays Next Previous buttons but it did not displays numeric pager,Why it is so? i am not getting

Any SugessionS?

protected

 

 

void rg1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)

 

 

{

 

 

 

    if (e.Item is GridPagerItem)

 

 

    {

 

 

 

    GridPagerItem gridPager = e.Item as GridPagerItem;

 

 

 

 

    Control numericPagerControl = gridPager.GetNumericPager();

 

 

 

 

    Control placeHolder = gridPager.FindControl("NumericPagerPlaceHolder");

 

 

    placeHolder.Controls.Add(numericPagerControl);

 

    }

 

}

 

 

 

 

 

<PagerStyle Position="TopAndBottom" />

 

 

 

 

 

 

this gives result as:-see attached image

[Princy]

Hello Cindrella,

You can refer the following documentation which explains how to customize the default pager using PagerTemplate.
Setting pager template
 
Also you can set the format of the text that appears in the Pager using the PagerTextFormat property. For more information on this, go through the following documentation.
Using PagerTextFormat

Hope this helps,
Princy.