RadGrid client side binding bug

[Kristijan]

Telerik,

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.

Thanks,

Kristijan 

<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"
         CommandItemDisplay="Top">
         <CommandItemTemplate>
             <telerik:RadButton ID="btnAdd" runat="server" AutoPostBack="false" OnClientClicked="LoadNewElement"
                 CausesValidation="false">
                 <Icon PrimaryIconUrl="~/images/Add.gif" PrimaryIconLeft="5px" />
             </telerik:RadButton>
             <telerik:RadButton ID="btnImport" runat="server" AutoPostBack="false" OnClientClicked="ImportCompanies"
                 CausesValidation="false">
                 <Icon PrimaryIconUrl="~/DesktopModules/VipCrm/Images/import.png" PrimaryIconLeft="5px" />
             </telerik:RadButton>
             <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>
             <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>
             <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>
             <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:RadButton>
         </CommandItemTemplate>
         <Columns>
             <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">
                 <FilterTemplate>
                     <telerik:RadComboBox ID="rcbIsCustomer" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("IsCustomer").CurrentFilterValue %>'
                         runat="server" OnClientSelectedIndexChanged="IsCustomerChanged" Width="70px">
                     </telerik:RadComboBox>
                     <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");
                             }
                         </script>
                     </telerik:RadScriptBlock>
                 </FilterTemplate>
             </telerik:GridCheckBoxColumn>
             <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" />
         </Columns>
     </MasterTableView>
     <FilterMenu EnableImageSprites="False" />
     <ClientSettings>
         <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" />
     </ClientSettings>
     <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" />
 </telerik:RadGrid>

[James Campbell]

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 

http://demos.telerik.com/aspnet-ajax/grid/examples/styles/customskin/defaultcs.aspx

Thanks,
Jim

[James]

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">
  <ClientSettings>
    <DataBinding Location="~/ws/data.asmx" SelectMethod="cartmenuitems" />
  </ClientSettings>
  <MasterTableView>
    <Columns>
      <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:GridHyperLinkColumn>
      <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" />
    </Columns>
  </MasterTableView>
</telerik:RadGrid>

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..

[Milena]

Hello,

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.

Regards,
Milena
Telerik

[Wesley Murphree]

Milena,

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?

[Milena]

Hello,

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.

Regards,
Milena
Telerik