RadCombobox not refreshing values inside RadGrid

[Andres]

Hi,

I have a RadGrid in batch mode that contains a RadComboBox inside the EditTemplate.  If I change the options checked inside the ComboBox, in the first row,  those changes persist in the following rows in editmode, even when I´m assigning different checks inside each of the rows in client side scripts.  SO for example if I uncheck the option for XML, PDF and HTM in the combobox in the first row, and then I try to edit the second row, those options are uncheck, when they should be check, since is a new row, and I'm initializing the combobox values with a hiddenfield.

Grid

<telerik:GridTemplateColumn HeaderText="File Prefix" HeaderStyle-Width="280px" UniqueName="Fileprefix">
                                <ItemTemplate>
                                    <asp:Label runat="server" ID="lbChapterFilePrefix">Prefix</asp:Label>
                                    (<asp:Label runat="server" ID="lblFileTypeXML">xml</asp:Label>,
                                    <asp:Label runat="server" ID="lblFileTypePDF">pdf</asp:Label>,
                                    <asp:Label runat="server" ID="lblFileTypeHTM">html</asp:Label>)
                                    <asp:HiddenField runat="server" ID="hdCurrentFileTypes" />
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:Label runat="server" ID="lbFilePrefix">prefix</asp:Label>
                                    <telerik:RadComboBox Skin="Outlook" runat="server" ID="cbFileType" CheckBoxes="true"
                                        AllowCustomText="false" CheckedItemsTexts="DisplayAllInInput" >
                                        <Items>
                                            <telerik:RadComboBoxItem Text="xml" Value="xml" />
                                            <telerik:RadComboBoxItem Text="pdf" Value="pdf" />
                                            <telerik:RadComboBoxItem Text="htm" Value="htm" />
                                        </Items>
                                    </telerik:RadComboBox>
                                </EditItemTemplate>
                            </telerik:GridTemplateColumn>

JS

<script type="text/javascript" language="javascript">

    function SaveGridChanges(sender, args) {
        var grid = $find("<%= rgBookManagement.ClientID  %>");
        grid.get_batchEditingManager().saveChanges(grid.get_masterTableView());
    }

    function GetCellValue(sender, args) {
        if (args.get_columnUniqueName() === "Fileprefix") {
            args.set_cancel(true);
            var container = args.get_container();
            //debugger;
            var chapterPrefix = $telerik.findElement(container, "lbChapterFilePrefix").innerHTML;
            var isFileTypeXML = ($telerik.findElementcontainer, "hdCurrentFileTypes").value.toLowerCase().indexOf("xml") >= 0 ? true : false);
            var isFileTypePDF = ($telerik.findElement(container, "hdCurrentFileTypes").value.toLowerCase().indexOf("pdf") >= 0 ? true : false);
            var isFileTypeHTM = ($telerik.findElement(container, "hdCurrentFileTypes").value.toLowerCase().indexOf("htm") >= 0 ? true : false);
            args.set_value(new Prefix(chapterPrefix, isFileTypeXML, isFileTypePDF, isFileTypeHTM));
        }
    }

    function SetCellValue(sender, args) {
        if (args.get_columnUniqueName() === "Fileprefix") {
              args.set_cancel(true);
              var container = args.get_container();
              value = args.get_value(),
              isFileTypeXML = value.isFileTypeXML,
              isFileTypePDF = value.isFileTypePDF
              isFileTypeHTM = value.isFileTypeHTM;
              //debugger;
              $telerik.findElement(container, "lblFileTypeXML").style.color = (isFileTypeXML == true ? 'black' : 'red');
              $telerik.findElement(container, "lblFileTypePDF").style.color = (isFileTypePDF == true ? 'black' : 'red');
              $telerik.findElement(container, "lblFileTypeHTM").style.color = (isFileTypeHTM == true ? 'black' : 'red');
        }
    }

    function GetEditorValue(sender, args) {
        if (args.get_columnUniqueName() === "Fileprefix") {
              args.set_cancel(true);
              var container = args.get_container();
              var combo = $telerik.findControl(container, "cbFileType");

              isFileTypeXML = combo.get_items().getItem(0).get_checked();
              isFileTypePDF = combo.get_items().getItem(1).get_checked();
              isFileTypeHTM = combo.get_items().getItem(2).get_checked();
              //debugger;
              chapterPrefix = $telerik.findElement(container, "lbFilePrefix").innerHTML;
              args.set_value(new Prefix(chapterPrefix, isFileTypeXML, isFileTypePDF, isFileTypeHTM));
        }
    }

    function SetEditorValue(sender, args) {
        if (args.get_columnUniqueName() === "Fileprefix") {
            args.set_cancel(true);
            var container = args.get_container();
            var value = args.get_value();
            chapterPrefix = value.chapterPrefix,
            isFileTypeXML = value.isFileTypeXML,
            isFileTypePDF = value.isFileTypePDF,
            isFileTypeHTM = value.isFileTypeHTM;

            $telerik.findElement(container, "lbFilePrefix").innerHTML = chapterPrefix;
            var combo = $telerik.findControl(args.get_container(), "cbFileType");

            combo.trackChanges();
            //debugger;
            //Check Fields
            combo.get_items().getItem(0).set_checked(isFileTypeXML == true);
            combo.get_items().getItem(1).set_checked(isFileTypePDF == true);
            combo.get_items().getItem(2).set_checked(isFileTypeHTM == true);

            combo.commitChanges();
        }
    }

    var Prefix = function (chapterPrefix, isFileTypeXML, isFileTypePDF, isFileTypeHTM) {
        this.chapterPrefix = chapterPrefix;
        this.isFileTypeXML = isFileTypeXML;
        this.isFileTypePDF = isFileTypePDF;
        this.isFileTypeHTM = isFileTypeHTM;
    }

</script>

<ClientSettings><ClientEvents OnBatchEditGetCellValue="GetCellValue" OnBatchEditGetEditorValue="GetEditorValue"                            OnBatchEditSetCellValue="SetCellValue" OnBatchEditSetEditorValue="SetEditorValue" />

<ClientSettings><ClientEvents OnBatchEditGetCellValue="GetCellValue" OnBatchEditGetEditorValue="GetEditorValue"                            OnBatchEditSetCellValue="SetCellValue" OnBatchEditSetEditorValue="SetEditorValue" />

[Viktor Tachev]

Hi Andres,

It seems that you are setting a custom object as a value. In this situation you have to implement both equals() and toString() methods for the object.

There is an example on how this could be achieved in this article. Check the "Handling advanced templates" section.

Regards,
Viktor Tachev
Telerik

[Andres]

Hi,

I implemented the equals and tostring methods, but the result is the same, actually I did put 3 checkboxes in the EditTemplate, and to my surprise the checkbox also did persist  the same values or checks in all the rows, when for each row the values should have been unchecked, as I have never click on any of the checkbox in the other rows, except for the 1st Row.

Please also find attach some screenshots, so you can see the behavior


JS:

var Prefix = function (chapterPrefix, isFileTypeXML, isFileTypePDF, isFileTypeHTM) {
       this.chapterPrefix = chapterPrefix;
       this.isFileTypeXML = isFileTypeXML;
       this.isFileTypePDF = isFileTypePDF;
       this.isFileTypeHTM = isFileTypeHTM;
   }
   Prefix.prototype.equals = function (Prefix) {
       if (this.chapterPrefix === Prefix.chapterPrefix && this.isFileTypeXML === Prefix.isFileTypeXML &&
           this.isFileTypePDF === Prefix.isFileTypePDF && this.isFileTypeHTM === Prefix.isFileTypeHTM) {
           return true;
       }
       return false;
   }
   Prefix.prototype.toString = function () {
       return this.chapterPrefix + " " + this.isFileTypeXML + " " + this.isFileTypePDF + " " + this.isFileTypeHTM;
   }

[Andres]

The edit of label-textbox combination is working fine, even for a dropdown, but it seems the batch mode can't handle correctly other types of objects like checkboxes, or radcombobox, what else can I check to get this working?

[Viktor Tachev]

Hi Andres,

I tested the code you provided in a sample project and the dropdown controls seem to work as expected on my end. If I check some items in the first row and then open a cell on another row for edit all items in the dropdown control are unchecked.

The project is attached to this post. Give it a try and check if it is working for you. The only thing I changed was a missing "(" in the GetCellValue() handler.

Regards,
Viktor Tachev
Telerik