Batch EditMode - Change item template css class on cell changed value

2 posts, 0 answers
  1. Nikos
    Nikos avatar
    10 posts
    Member since:
    Sep 2015

    Posted 18 May Link to this post

    Hi!

    I am using a radgrid in batch EditMode with EditType Cell.

    Inside the grid i have several GridTemplateColumns with a raddropdown control each, which should change style according to the value selected on each.

    I am trying to find a way on BatchEditClosed or BatchEditCellValueChanged events to re-attach the css class that i use in ItemTemplate for dislpaying the selected value.

    Here is my grid:

    <telerik:RadGrid
                                RenderMode="Lightweight"
                                runat="server"
                                ID="RadGridLesions"
                                AllowPaging="True"
                                AllowSorting="True"
                                AutoGenerateColumns="False"
                                Skin="BlackMetroTouch"
                                CssClass="dark-grey"
                                OnNeedDataSource="RadGridLesions_NeedDataSource"
                                OnPreRender="RadGridLesions_PreRender"
                                OnItemDataBound="RadGridLesions_ItemDataBound"
                                ShowStatusBar="True"
                                 
                                AllowAutomaticInserts="False"
                                AllowAutomaticDeletes="True"
                                AllowAutomaticUpdates="True"
                                 
                                ItemCommand="RadGridLesions_ItemCommand"
                                UpdateCommand="RadGridLesions_UpdateCommand"
                                DeleteCommand="RadGridLesions_DeleteCommand"
                                OnBatchEditCommand="RadGridLesions_BatchEditCommand"
                                >
                                <MasterTableView
                                    CommandItemDisplay="Top"
                                    EditMode="Batch"
                                    DataKeyNames="Id, Segment, Level, Side"
                                    Name="GradesTable"
                                    >
                                    <PagerStyle />
     
                                    <BatchEditingSettings
                                        SaveAllHierarchyLevels="false"
                                        HighlightDeletedRows="false"
                                        EditType="Cell"
                                        OpenEditingEvent="Click" />
                                    <Columns>
     
                                           <telerik:GridTemplateColumn
                                            HeaderText="T2"
                                            HeaderStyle-Width="70px"
                                            ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center"
                                            UniqueName="T2Grade"
                                            DataField="T2Grade">
                                            <ItemTemplate>
                                                <div id="T2Grade-container" class='<%# "grade a" & Eval("T2Grade") %>'>
                                                    <%# Eval("T2Grade") %>
                                                </div>
                                            </ItemTemplate>
                                            <EditItemTemplate>
                                                <telerik:RadDropDownList
                                                    RenderMode="Lightweight"
                                                    runat="server"
                                                    ID="T2GradeDropDownList"
                                                    AutoPostBack="false"
                                                    Skin="BlackMetroTouch"
                                                    SelectedValue='<%# Eval("T2Grade") %>'>
                                                    <Items>
                                                        <telerik:DropDownListItem Text="1" Value="1" CssClass="one" />
                                                        <telerik:DropDownListItem Text="2" Value="2" CssClass="two" />
                                                        <telerik:DropDownListItem Text="3" Value="3" CssClass="three" />
                                                        <telerik:DropDownListItem Text="4" Value="4" CssClass="four" />
                                                        <telerik:DropDownListItem Text="5" Value="5" CssClass="five" />
                                                    </Items>
                                                </telerik:RadDropDownList>
                                            </EditItemTemplate>
                                        </telerik:GridTemplateColumn>

     

    The issue i have now is that if i select a different value in the drop-down the styling of the "old" one remains and changes only when i press the save button.

    I would like to re-evaluate the expression attaching the css class to the div (class='<%# "grade a" & Eval("T2Grade") %>') on client side, when the value is changed in the drop down.

    I assume i can do that like:

    function BatchEditCellValueChanged(sender, args) {
     
                        //alert(BatchEditCellValueChanged);
                        var grid = sender;
                        var masterTableView = sender.get_masterTableView();
                        var batchEditingManager = sender.get_batchEditingManager();
     
                        var row = args.get_row();
                        var cell = args.get_cell();
                        var tableView = args.get_tableView();
                        var column = args.get_column();
                        var columnUniqueName = args.get_columnUniqueName();
                        //new value
                        var editorValue = args.get_editorValue();
                        //old value
                        var cellValue = args.get_cellValue();
                         
     
                        if (args.get_columnUniqueName() === "T2Grade") {
     
                            //try and change css class of edited cell -
        //something like: cell.findElement("T2Grade-container").className = "<%re-evaluate expression%>";
                             
                        }     
                         
                    }

     

    Any ideas on how i can achieve that? Up to the moment i have not found a way to grad the div element inside the itemTemplate and change its css class.

     

     

     

  2. Doncho
    Admin
    Doncho avatar
    15 posts

    Posted 21 May Link to this post

    Hi Nikos,

    Thank you for the information!

    From the description provided, I have assumed that you aim to apply styles to some cells of the RadGrid Items depending on the value selected by the DropDown Control used for editing. 

    If this is the case I suggest you try the following approach:

    • Attach a client-side event listener to the batchEditClosed event
      <ClientSettings>
          <ClientEvents OnBatchEditClosed="batchEditClosed" />
      </ClientSettings>
    • Get a reference to the DropDownList used for editing the cell, by following the instructions in Get Client-side Reference to a Control Object. Once you have the reference you can get the selected value using the RadDropDownList Object client API.
    • Get a reference to the wrapper div element used for styling. Remove its previous class and assign new CSS Class named after the selected value of the DropDown. You can achieve that convenient using jQuery
      function batchEditClosing(sender, args) {
          var ddl = $telerik.$("[id$='T2GradeDropDownList']").get(0).control;
          var ddlSelectedValue = ddl.get_selectedItem().get_value()
      
          var $cell = $(args.get_cell());
          var $wrapper = $cell.find('div#T2Grade-container');
          $wrapper.removeClass().addClass('grade a' + ddlSelectedValue);
      }

    You may also check out the article RadGrid Batch Editing Templates and Specifics as it can give you useful information on the specifics of using Batch Editing.

    Please try the suggested approach and let me know how it goes.

    Kind regards,
    Doncho
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top