RadGrid client side binding bug

6 posts, 0 answers
  1. Kristijan
    Kristijan avatar
    14 posts
    Member since:
    Jul 2011

    Posted 21 Nov 2011 Link to this post



    I found a bug while using RadGrid client side binding.

    I heva a scenario as below. Please note the attributes PageSize="10" and ItemStyle-CssClass= "fId" and "fName". When I run the page with no change of the PageSize, there is everything OK, but if the PageSize changes to the higher number, the rows following the row number 10, have no class "fId" and "fName".


    There is any workaround to fix his problem? Well, one would be with jQuerry to set the classes according to the column position, but I think the better solution would be to properly set some RadGrid inner state that does not properly change when PageSize changes.


    I am using “Telerik RadControls for ASP.NET Ajax” version “2011.2.712.35” with DNN 6.0.2.




    <telerik:RadGrid ID="rgvMain" runat="server" Height="850px" OnItemCreated="rgvMain_ItemCreated"
         CssClass="fMainGrid" AllowPaging="True" PageSize="10" EnableLinqExpressions="false">
         <MasterTableView DataKeyNames="Id" AutoGenerateColumns="false" AllowFilteringByColumn="True"
             AllowSorting="True" TableLayout="Auto" CssClass="fSelectable fMainTable" OverrideDataSourceControlSorting="true"
                 <telerik:RadButton ID="btnAdd" runat="server" AutoPostBack="false" OnClientClicked="LoadNewElement"
                     <Icon PrimaryIconUrl="~/images/Add.gif" PrimaryIconLeft="5px" />
                 <telerik:RadButton ID="btnImport" runat="server" AutoPostBack="false" OnClientClicked="ImportCompanies"
                     <Icon PrimaryIconUrl="~/DesktopModules/VipCrm/Images/import.png" PrimaryIconLeft="5px" />
                 <telerik:RadButton ID="btnDelete" runat="server" AutoPostBack="false" CausesValidation="false"
                     Enabled="false" CssClass="fEnable" OnClientClicking="DeleteCompany">
                     <Icon PrimaryIconUrl="~/images/delete.gif" PrimaryIconLeft="5px" />
                 <telerik:RadButton ID="btnNewPerson" runat="server" AutoPostBack="false" CssClass="fEnable"
                     Enabled="false" OnClientClicked="NewPerson" CausesValidation="false">
                     <Icon PrimaryIconUrl="~/DesktopModules/VipCrm/Images/add_person.png" PrimaryIconLeft="5px" />
                 <telerik:RadButton ID="btnNewCall" runat="server" AutoPostBack="false" CssClass="fEnable"
                     Enabled="false" OnClientClicked="NewPhoneCallEmbedded" CausesValidation="false">
                     <Icon PrimaryIconUrl="~/DesktopModules/VipCrm/Images/Telephone.png" PrimaryIconLeft="5px" />
                 <telerik:RadButton ID="btnNewOpportunity" runat="server" AutoPostBack="false" CssClass="fEnable"
                     Enabled="false" OnClientClicked="NewOpportunityEmbedded" CausesValidation="false">
                     <Icon PrimaryIconUrl="~/DesktopModules/VipCrm/Images/AddMoney.png" PrimaryIconLeft="5px" />
                 <telerik:GridBoundColumn DataField="Id" DataType="System.Int32" ItemStyle-CssClass="fId"
                     SortExpression="Id" UniqueName="Id" />
                 <telerik:GridBoundColumn DataField="ShortName" HeaderText="ShortName" ItemStyle-CssClass="fName"
                     SortExpression="ShortName" DataType="System.String" UniqueName="ShortName" CurrentFilterFunction="StartsWith"
                     AutoPostBackOnFilter="true" FilterDelay="701" ShowFilterIcon="true" FilterListOptions="VaryByDataType" />
                 <telerik:GridCheckBoxColumn DataField="IsCustomer" UniqueName="IsCustomer" SortExpression="IsCustomer"
                     AutoPostBackOnFilter="true" FilterDelay="701" ShowFilterIcon="false" DataType="System.String">
                         <telerik:RadComboBox ID="rcbIsCustomer" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("IsCustomer").CurrentFilterValue %>'
                             runat="server" OnClientSelectedIndexChanged="IsCustomerChanged" Width="70px">
                         <telerik:RadScriptBlock ID="rsbIsCustomer" runat="server">
                             <script type="text/javascript">
                                 function IsCustomerChanged(sender, args) {
                                     $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>").filter("IsCustomer", args.get_item().get_value(), "EqualTo");
                 <telerik:GridBoundColumn DataField="Address" HeaderText="Address" SortExpression="Address"
                     UniqueName="Address" CurrentFilterFunction="StartsWith" ShowFilterIcon="true" FilterListOptions="VaryByDataType"
                     AutoPostBackOnFilter="true" FilterDelay="701" DataType="System.String" />
                 <telerik:GridBoundColumn DataField="PostTown" HeaderText="PostTown" SortExpression="PostTown"
                     UniqueName="PostTown" CurrentFilterFunction="StartsWith" AutoPostBackOnFilter="true"
                     FilterDelay="701" ShowFilterIcon="false" DataType="System.String" />
         <FilterMenu EnableImageSprites="False" />
             <DataBinding Location="~/DesktopModules/MyModule/WsiEntriesTbl.asmx" SelectMethod="GetCompaniesData"
                 SelectCountMethod="GetCompaniesCount" />
             <ClientEvents OnDataBinding="rgvMainDataBinding" OnDataBound="rgvMainDataBound" OnDataBindingFailed="DataBindingFailed" />
             <Resizing AllowColumnResize="true" />
             <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
             <Scrolling AllowScroll="true" UseStaticHeaders="true" />
         <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" />

  2. James Campbell
    James Campbell avatar
    90 posts
    Member since:
    Jul 2012

    Posted 21 Nov 2011 Link to this post

    Hi Kristijan,

    Have you tried reapplying the styles using the OnRowDataBound client event of the grid?

    You can also apply your own skin, see this demo:

    Grid / Custom Skin 



  3. DevCraft R3 2016 release webinar banner
  4. James
    James avatar
    1 posts
    Member since:
    Nov 2013

    Posted 07 Nov 2013 Link to this post

    similar problem: binding radgrid on client to web service data which is rendered fine
    but the itemstyle-cssclass is NEVER EVER rendered to the browser

    <telerik:RadGrid ID="RadGrid1" runat="server" PageSize="15">
        <DataBinding Location="~/ws/data.asmx" SelectMethod="cartmenuitems" />
          <telerik:GridBoundColumn HeaderText="admex" DataField="PartNumber" SortExpression="PartNumber" DataType="System.String" Display="false" />
          <telerik:GridHyperLinkColumn HeaderText="product name" DataTextField="ProductName" DataNavigateUrlFormatString="javascript:addsku(\'{0}\'); return false;" DataNavigateUrlFields="ProductName" SortExpression="ProductName" FilterControlWidth="200" DataType="System.String">
            <ItemStyle CssClass="pname" BackColor="red" />
          <telerik:GridBoundColumn HeaderText="part #" DataField="PartNumber" SortExpression="PartNumber" DataType="System.String" Display="true" />
          <telerik:GridBoundColumn HeaderText="group" DataField="Group" SortExpression="Group" DataType="System.String" Display="true" />
          <telerik:GridBoundColumn HeaderText="sub group" DataField="SubGroup" SortExpression="SubGroup" DataType="System.String" Display="true" />
            <telerik:GridBoundColumn HeaderText="sub sub group" DataField="SubSubGroup" SortExpression="SubSubGroup" DataType="System.String" Display="false" />
            <telerik:GridBoundColumn HeaderText="part #s" DataField="PartNumbers" SortExpression="PartNumbers" DataType="System.String" Display="false" />
            <telerik:GridBoundColumn HeaderText="sort" DataField="SortId" SortExpression="SortId" DataType="System.String" Display="false" />
            <telerik:GridBoundColumn HeaderText="name" DataField="Name" SortExpression="Name" DataType="System.String" FilterControlWidth="150" Display="false" />

    if i set the cssclass i expect to see it set in the browser, else why even have the property at all?
    every time telerik has a client-side bug (often) we just have implement the feature ourselves? 
    not very "rad" if you ask me..
  5. Milena
    Milena avatar
    223 posts

    Posted 12 Nov 2013 Link to this post


    This  is expected behavior, the column settings (like horizontal alignment, CSS class, etc) will not be applied when change the page size, because  RadGrid will not recreate ItemStyle which is set on server when increase items count on client side. However, you can handle OnRowDataBound and within the arguments apply the styles.

    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Wesley Murphree
    Wesley Murphree avatar
    1 posts
    Member since:
    Jan 2010

    Posted 29 Oct 2014 in reply to Milena Link to this post


    I beg to differ.  If this is expected behavior for client-side data binding then it needs to be revisited and classified as a defect.

    Basically what you are telling your users is if you use client-side data binding with the ItemStyle property in your RadGrid definition then you have to write custom javascript code to handle the styling post data bound in the OnDataBound client event.

    If this is the case they why the heck would I use the ItemStyle property in the first place?  Why even list it as a supported feature for client-side data binding if I have to redo all the work when changing the page size?
  7. Milena
    Milena avatar
    223 posts

    Posted 03 Nov 2014 Link to this post


    I completely understand your concerns, however the client-side biding mechanism will keep only the settings applied on the client as not server request are made for persisting the server set properties.

    Please note, we are not able to exclude this property from VS intellisense , because when the intellisense  is being updated from the scripts, then we are still not aware how RadGrid will be bound. However, if you have in mind that ItemStyle is listed as supported property in some of our help topics about ClientSide DataBiding, we will be very grateful if let us know about this topic and we will update it accordingly.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top
DevCraft R3 2016 release webinar banner