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

[Nikos]

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.

 

 

 

[Doncho]

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