We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Row selection/deselection style

How can I set the ROW style on the load and dont loose it on a row deselection? Or how can i put it on the row again in case of deselection?
Im trying to set it again in the RowDeselecting even and it not work, but if i use the recordclick it does. Why?

<ClientSideEvents   ToolbarClick="onToolBarClick"
                   RowDataBound="rowDataBound"
                   QueryCellInfo="GridQueryCellInfoEvent"
                   RowSelecting="rowselecting" />

    <script>
        function rowDataBound(args) {
            var date1 = args.data.StateName;
            if (date1 == "Vencido")
                args.row.css("backgroundColor", "#F3C3C3").css("color", "black");/*custom css applied to the row */
            if (date1 == "Pagado")
                args.row.css("backgroundColor", "#98FB98").css("color", "black");/*custom css applied to the row */
        }
    </script>

1 Reply

Farveen Sulthana Thameeztheen Basha October 25, 2019 10:21 AM UTC

Hi Nelson, 

Thanks for contacting Syncfusion Support. 

Query#:- How can I set the ROW style on the load and dont loose it on a row deselection? 

We have checked your query and prepared sample and applied styles using RowDataBound event but we are unable to reproduce your problem “Styles not applied after row deselection” at our end. Refer to the code example:- 

<ej:Grid ID="FlatGrid" runat="server" AllowPaging="True"  
AllowSelection="True" Selectiontype="Multiple" > 
               <SelectionSettings EnableToggle ="true" /> 
              <ClientSideEvents RowDataBound="rowDataBound" /> 
           <Columns> 
                <ej:Column Field="Id" HeaderText="Order ID" Width="90"  IsPrimaryKey="True" Visible="false" /> 
                   .        .     . 
           </Columns> 

        </ej:Grid> 
     </div> 

      <script> 
          function rowDataBound(args) { 
              if (args.data.Qty == "Qty4") { 
                  args.row.css("backgroundColor", "#F3C3C3").css("color", "black");/*custom css applied to the row */ 
              } 
              else if (args.data.Qty == "Qty6") { 
                  args.row.css("backgroundColor", "#98FB98").css("color", "black");/*custom css applied to the row */ 
              } 

          } 
      </script> 


After following the above solution still facing issue share us the following details. 

  1. Share complete Grid code example.
  2. Screenshot/Video Demo to replicate the issue.
  3. Detailed Explanation of the issue. Issue you have faced and solution applied for the problem.

Regards, 
Farveen sulthana T 

Loader.
Live Chat Icon For mobile
Up arrow icon