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

RadGrid client side binding bug

5 Answers 100 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kristijan
Top achievements
Rank 1
Kristijan asked on 21 Nov 2011, 09:38 AM

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>


5 Answers, 1 is accepted

Sort by
0
James Campbell
Top achievements
Rank 1
answered on 21 Nov 2011, 04:51 PM
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

0
James
Top achievements
Rank 1
answered on 07 Nov 2013, 06:05 PM
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..
0
Milena
Telerik team
answered on 12 Nov 2013, 03:15 PM
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
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.
0
Wesley Murphree
Top achievements
Rank 1
answered on 29 Oct 2014, 08:56 PM
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?
0
Milena
Telerik team
answered on 03 Nov 2014, 04:07 PM
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
 

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.

 
Tags
Grid
Asked by
Kristijan
Top achievements
Rank 1
Answers by
James Campbell
Top achievements
Rank 1
James
Top achievements
Rank 1
Milena
Telerik team
Wesley Murphree
Top achievements
Rank 1
Share this question
or