[CLOSED] How to bind dictionary object to RecordField?

[kaustubhzoal]

Hello,

I have a Product object which has an attribute of type dictionary with it.
I can bind the product object fine but when it comes to display the data from the dictionary I am only seeing object object in the column.
Can somebody please provide me some information on how to do it?
I have two screen shots attached with this post for reference. 1 is the Products object and the second in the GridPanel showing the problem.

Here is my aspx part. The grid binding is done in the code behind.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentMain" Runat="server">        
    <ext:GridPanel ID="clGridPanelProducts" Title="Available Products" AutoHeight="false" Width="870" Height="600" runat="server" Draggable="false">
        <Store>
            <ext:Store Id="Products" runat="server" SerializationMode="Complex">
                <Reader>
                    <ext:JsonReader IDProperty="SKUID">
                        <Fields>
                            <ext:RecordField Name="SKUID" Type="Int"></ext:RecordField>
                            <ext:RecordField Name="SKUNumber" Type="String"></ext:RecordField>
                            <ext:RecordField Name="SKUName" Type="String"></ext:RecordField>
                            <ext:RecordField Name="Content" Type="String"></ext:RecordField>
                            <ext:RecordField Name="ProductMessages" IsComplex="true"></ext:RecordField>                                        
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel ID="clColumnModelSearchResults" runat="server">
            <Columns>
                <ext:Column Header="Number" Width="50" DataIndex="SKUNumber"></ext:Column>
                <ext:Column Header="Name" Width="125" DataIndex="SKUName"></ext:Column>
                <ext:Column Header="Content" Width="75" DataIndex="Content"></ext:Column>                                                    
                <ext:ImageCommandColumn Width="75" Hideable="false" ColumnID="SKUID" DataIndex="SKUID">
                    <Commands>
                        <ext:ImageCommand CommandName="Add" Style="text-decoration: 'underline'; font-weight: bold;" Text="Add" IconCls="AddProductsIcon"></ext:ImageCommand>                                                            
                    </Commands>
                </ext:ImageCommandColumn>
                <ext:Column Width="75" Header="Can Order" Hideable="true" DataIndex="bitHideBackProductVersion" Tooltip="If the product is not available to order it might mean it is temporarily unavailable.">
                </ext:Column>
                <ext:Column Header="Msg" Width="125" DataIndex="ProductMessages">                    
                </ext:Column>
            </Columns>
        </ColumnModel>                                        
    </ext:GridPanel>   
</asp:Content>

[Vladimir]

You have to use renderer to display your dictionary object

<ext:Column Header="Msg" Width="125" DataIndex="ProductMessages"> 
       <Renderer Handler="return value.Backorder;" />
</ext:Column>

P.S. Please use CODE tags when you post a code

[kaustubhzoal]

Excellent, one more last question, that Dictionary object might contain more than 1 message for a product. How can I concatenate all these messages and then show them under the product name column instead. The Msg column was just for my test purpose to see if I can get any values to display in that column.

[Daniil]

Hi,

Please look at the example.

Example

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Dictionary<string, string> dict1 = new Dictionary<string, string>();
            dict1.Add("msg11", "message11");
            dict1.Add("msg12", "message12");
            Dictionary<string, string> dict2 = new Dictionary<string, string>();
            dict2.Add("msg21", "message21");
            dict2.Add("msg22", "message22");
            dict2.Add("msg23", "message23");
            this.Store1.DataSource = new object[] 
            { 
                new object[] { "Name 1", dict1 },
                new object[] { "Name 2", dict2 },
            };
            this.Store1.DataBind();
        }
    }
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>

    <script type="text/javascript">
        var getRowClass = function (record, rowIndex, rp, ds) {
            var messages;
            rp.body = '<p>' + Ext.encode(record.data.messages) + '</p>';
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="name" />
                                <ext:RecordField Name="messages" IsComplex="true" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Name" DataIndex="name" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView runat="server" EnableRowBody="true" ForceFit="true">
                    <GetRowClass Fn="getRowClass" />
                </ext:GridView>
            </View>
        </ext:GridPanel>
    </form>
</body>
</html>

See also:
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.grid.GridView-method-getRowClass
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.grid.GridView-cfg-enableRowBody

[kaustubhzoal]

Ok, with the solution that you provided I was able to get the data to display in the right column but there is a slight problem with that. I just want the value from dictionary object and not the key.
For example: instead of showing this {"Marketing":"hcp product message!"} I only want to see this hcp product message!

Another issue I am seeing is that after sorting the column the data is duplicating.

[Daniil]

For example: instead of showing this {"Marketing":"hcp product message!"} I only want to see this hcp product message!

Well, you should change

rp.body = '<p>' + Ext.encode(record.data.messages) + '</p>';

in a respective way.

In your case it should be:

rp.body = '<p>' + record.data.messages.Marketing + '</p>';

For example: instead of showing this {"Marketing":"hcp product message!"} I only want to see this hcp product message!

Please provide a sample to reproduce.

[kaustubhzoal]

Hello Daniil,

I am not sure how can I provide you the code to reproduce as the code that brings the data and populated in the grid panel is doing database calls.
What I am also noticing is that my GridPanel is inside a ext window and when the grid loads first time it does not show the messages. It shows the messages when I click on the column header to sort. I have attached 3 screen shots with this post for reference and here is the problem I am trying to show in the screenshots.

BeforeSorting = When the grid loads for the first time. The messages do not show up
AfterSorting = Message shows up
AfterSorting again = Message shows up twice

Here is the aspx

<ext:Window Width="900" AutoHeight="true" runat="server" Resizable="false" Modal="true" Collapsible="true" Hidden="true" ID="clWindowAddProducts">
        <Content>
            <div style="padding: 10px">
                <table>
                    <tr>
                        <td valign="bottom">
                            <ext:TextField ID="clTextFieldSearchProducts" MaskRe="^[^<>`~!/@\#}$%:;)(_^{&*=|'+]+$" MaxLength="25" EnableKeyEvents="true" runat="server">
                                <DirectEvents>
                                    <Change Delay="100" OnEvent="RealTimeFiltering" >
                                        <EventMask Msg="Filtering Products" ShowMask="true" />
                                    </Change>
                                </DirectEvents>
                            </ext:TextField>
                        </td>
                        <td valign="bottom" style="padding-left: 10px">
                            <ext:Button ID="clButtonSearchProducts" runat="server" Text="Search">
                                <DirectEvents>
                                    <Click OnEvent="SearchProducts" >
                                        <EventMask Msg="Searching Products" ShowMask="true" />
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                        </td>
                        <td valign="bottom" style="padding-left: 20px">
                            <ext:Button ID="clResetProductsGrid" runat="server" Text="Reset">
                                <DirectEvents>
                                    <Click OnEvent="ResetProductsGrid" >
                                        <EventMask Msg="Getting all Available Products...Please Wait" ShowMask="true" />
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                        </td>
                        <td valign="bottom" style="padding-left: 10px">
                            <table>
                                <tr>
                                    <td>
                                        <ext:Label ID="clLabelProductNumber" Text="Product Number" runat="server"></ext:Label>
                                    </td>
                                    <td style="padding-left: 10px">
                                        <ext:Radio ID="clRadioProductNumber" GroupName="ProductSearchOptions" runat="server"></ext:Radio>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <ext:Label ID="clLabelProductName" Text="Product Name" runat="server"></ext:Label>
                                    </td>
                                    <td style="padding-left: 10px">
                                        <ext:Radio ID="clRadioProductName" Checked="true" GroupName="ProductSearchOptions" runat="server"></ext:Radio>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td valign="bottom" style="padding-left: 120px">
                            <ext:Button ID="clButtonFinishedAddingProductsToFavorite" runat="server" Text="Finished Adding Products to Favorite Supplement List">
                                <DirectEvents>
                                    <Click OnEvent="FinishedAddingProductsToFavorite" ></Click>
                                </DirectEvents>
                            </ext:Button>
                        </td>
                    </tr>
                </table>
                <br />
                <br />
                <ext:GridPanel ID="clGridPanelProducts" Title="Available Products" AutoHeight="false" Width="870" Height="600" runat="server" Draggable="false">
                    <Store>
                        <ext:Store Id="Products" runat="server">
                            <Reader>
                                <ext:JsonReader IDProperty="SKUID">
                                    <Fields>
                                        <ext:RecordField Name="SKUID" Type="Int"></ext:RecordField>
                                        <ext:RecordField Name="SKUNumber" Type="String"></ext:RecordField>
                                        <ext:RecordField Name="SKUName" Type="String"></ext:RecordField>
                                        <ext:RecordField Name="Content" Type="String"></ext:RecordField>
                                        <ext:RecordField Name="ProductMessages" IsComplex="true"></ext:RecordField>                                        
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                        </ext:Store>
                    </Store>
                    <ColumnModel ID="clColumnModelSearchResults" runat="server">
                        <Columns>
                            <ext:Column Header="Number" Width="50" DataIndex="SKUNumber"></ext:Column>
                            <ext:Column Header="Name" Width="300" DataIndex="SKUName">                    
                            </ext:Column>
                            <ext:Column Header="Content" Width="75" DataIndex="Content"></ext:Column>                                                    
                            <ext:ImageCommandColumn Width="75" Hideable="false" ColumnID="SKUID" DataIndex="SKUID">
                                <Commands>
                                    <ext:ImageCommand CommandName="Add" Style="text-decoration: 'underline'; font-weight: bold;" Text="Add" IconCls="AddProductsIcon"></ext:ImageCommand>                                                            
                                </Commands>
                            </ext:ImageCommandColumn>                                           
                        </Columns>
                    </ColumnModel>
                    <View>
                        <ext:GridView ID="gView" runat="server" EnableRowBody="False" ForceFit="true">
                            <GetRowClass Fn="getRowClass" />
                        </ext:GridView>
                    </View>            
                </ext:GridPanel>     
                <br />
                <div class="oomessagelarge" style="padding-top: 10px">Literature items are not available in the Patient Supplement Manager Program</div>
                <br />
            </div>
        </Content>
        <Listeners><Show Handler="#{clTextFieldSearchProducts}.focus(true, 200);" /></Listeners>
    </ext:Window>

and here is the js function that i have modified to get the messages

<script type="text/javascript">        
            getRowClass = function (record, rowIndex, rp, ds) {
            var backOrderMessage;
            var marketingMessage;
            var unavailableMessage;

            var message;
            var skuName = record.data.SKUName;
            record.data.SKUName = '';

            backOrderMessage = record.data.ProductMessages.Backorder;
            marketingMessage = record.data.ProductMessages.Marketing;
            unavailableMessage = record.data.ProductMessages.UnavailableMessage;
            
            if (backOrderMessage != 'undefined') {
                message = '<p>' + backOrderMessage + '</p>';
            }

            if (marketingMessage != null) {
                message = message + '<p>' + marketingMessage + '</p>';
            }

            if (unavailableMessage != null) {
                message = message + '<p>' + unavailableMessage + '</p>';
            }

            record.data.SKUName = skuName + message.replace('undefined', '');
        };
   </script>

[Daniil]

I am not sure how can I provide you the code to reproduce as the code that brings the data and populated in the grid panel is doing database calls.

I think the issue is reproducible without a database. Please just use some dummy data.

Also I've noticed that you set up

EnableRowBody="False"

for the GridView, but must be

EnableRowBody="True"

since you use a row body.

Hmm, I've just discovered that you don't use a row body.

Well, I can say that a getRowClass function is not the best place to prepare a value for a record field.

I would recommend to set up a respective Record's Convert function.

Example

<%@ Page Language="C#" %>
  
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Dictionary<string, string> dict1 = new Dictionary<string, string>();
            dict1.Add("msg11", "message11");
            dict1.Add("msg12", "message12");
            Dictionary<string, string> dict2 = new Dictionary<string, string>();
            dict2.Add("msg21", "message21");
            dict2.Add("msg22", "message22");
            dict2.Add("msg23", "message23");
            this.Store1.DataSource = new object[] 
            { 
                new object[] { "Name 1", dict1 },
                new object[] { "Name 2", dict2 },
            };
            this.Store1.DataBind();
        }
    }
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
 
    <script type="text/javascript">
        var onMessagesConvert = function (messages, record) {
            var value = "";
            for (var msg in messages) {
                value += msg + ": " + messages[msg] + "<br/>";
            };
            return value;
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel 
            runat="server"
            Width="500"
            AutoHeight="true" 
            AutoExpandColumn="Messages">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="name" />
                                <ext:RecordField Name="messages" IsComplex="true">
                                    <Convert Fn="onMessagesConvert" />
                                </ext:RecordField>
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Name" DataIndex="name" />
                    <ext:Column ColumnID="Messages" Header="Messages" DataIndex="messages" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView runat="server" />
            </View>
        </ext:GridPanel>
    </form>
</body>
</html>

[kaustubhzoal]

I tried your example and it works fine but when I implemented it with my requirements nothing showed up in the grid.
Here is the aspx part.

<ext:GridPanel ID="clGridPanelProducts" Title="Available Products" AutoHeight="false" Width="870" Height="600" runat="server" Draggable="false" AutoExpandColumn="ProductMessages">
                    <Store>
                        <ext:Store Id="Products" runat="server">
                            <Reader>
                                <ext:ArrayReader>
                                    <Fields>
                                        <ext:RecordField Name="SKUID" Type="Int"></ext:RecordField>
                                        <ext:RecordField Name="SKUNumber" Type="String"></ext:RecordField>
                                        <ext:RecordField Name="SKUName" Type="String"></ext:RecordField>
                                        <ext:RecordField Name="Content" Type="String"></ext:RecordField>
                                        <ext:RecordField Name="ProductMessages" IsComplex="true">
                                            <Convert Fn="onMessagesConvert" />
                                        </ext:RecordField>                                        
                                    </Fields>
                                </ext:ArrayReader>
                            </Reader>                           
                        </ext:Store>
                    </Store>
                    <ColumnModel ID="clColumnModelSearchResults" runat="server">
                        <Columns>
                            <ext:Column Header="Number" Width="50" DataIndex="SKUNumber"></ext:Column>
                            <ext:Column Header="Name" Width="300" DataIndex="SKUName">                    
                            </ext:Column>
                            <ext:Column Header="Content" Width="75" DataIndex="Content"></ext:Column>                                                    
                            <ext:ImageCommandColumn Width="75" Hideable="false" ColumnID="SKUID" DataIndex="SKUID">
                                <Commands>
                                    <ext:ImageCommand CommandName="Add" Style="text-decoration: 'underline'; font-weight: bold;" Text="Add" IconCls="AddProductsIcon"></ext:ImageCommand>                                                            
                                </Commands>
                            </ext:ImageCommandColumn>                
                            <ext:Column Header="Msg" Width="125" DataIndex="ProductMessages">                                                       
                            </ext:Column>
                        </Columns>
                    </ColumnModel>                    
                    <View>
                        <ext:GridView ID="gView" runat="server"></ext:GridView>
                    </View>            
                </ext:GridPanel>

To troubleshoot I went and added an alert in the onMessageConvert function call to see if I am even getting into the function and yes it was getting into the function but the ProductMessages that I want is has/showing something totally different. You can refer to the screen shot that I have with this post.

var onMessagesConvert = function (ProductMessages, record) {
            var value = "";
            for (var msg in ProductMessages) {
                value += msg + ": " + ProductMessages[msg] + "<br/>";
            };
            alert(value);
            return value;
        };

[Daniil]

How does the ProductMessages look?

Please add the following code at the beginning of the onMessagesConvert function.

alert(Ext.encode(ProductMessages));