[CLOSED] Razor - ComponentColumn as Over Editor - Set default value for combo box column

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Razor - ComponentColumn as Over Editor - Set default value for combo box column

    Hi,

    I am facing some issues while implementing below mentioned scenario.

    Scenario:

    1. In Editable grid Component column I am having combo box component. In that I want to select one item as default while adding rows in that grid. Grid component column Editable mode is OverOnly (true).

    Issue:

    1. While adding rows that combo box store load method was not triggered. So items are not populated. If I mouse over that particular row means then only store load method got triggered otherwise it won't trigger. So due to this issue I am not able to select default value for that combo box.

    Below I mentioned the code sample.


    public class JobWitnesses
        {
            public string Name { get; set; }
            public int Id { get; set; }
        }
    public AjaxStoreResult GetWitnessesByJobId()
            {
                try
                {
                    List<JobWitnesses> _list = new List<JobWitnesses>();
    
                    for (int i = 0; i < 100; i++)
                    {
                        _list.Add(new JobWitnesses
                        {
                            Id = i,
                            Name = string.Format("{0}_{1}", "Witness Name", i.ToString())
                        });
                    }
    
                    var list = from rec in _list
                               select new
                               {
                                   Id = rec.Id,
                                   Name = rec.Name
                               };
                    int total = list.ToList().Count();
                    return new AjaxStoreResult(list.ToList(), total);
    
                }
                catch
                {
    
                }
    
                return new AjaxStoreResult();
            }
    @using Ext.Net.MVC
    @using Ext.Net
    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">
            var departmentRenderer = function (value) {
                var comboName = "";            
                if (App.comboBoxStore != undefined && App.comboBoxStore.data != undefined
            && App.comboBoxStore.data.items.length > 0) {
                    $(App.comboBoxStore.data.items).each(function (i) {
                        if (App.comboBoxStore.data.items[i].data.Id == value) {
                            comboName = App.comboBoxStore.data.items[i].data.Name;
                        }
                    });
                }
                return comboName;
            };
            var submitValue = function () {
                try {
    
                    var destination = App.editorfieldMapping;
                    var buf = [];
                    buf.push(App.CustomerBillingStore.createModel({
                        Id: 6,
                        JobWitnessesID: 6
                    }));
    
                    destination.store.add(buf);
    
                } catch (e) {
                    alert(e.message);
                }
            };
            function comboSelect() {
                try {
                } catch (e) {
                    alert(e.message);
                }
            }
        </script>
    </head>
    <body>
        @{
            var objc = new object[]
            {                          
            };        
        }
        @Html.X().ResourceManager()
        @(    
     Html.X().GridPanel()
        .ID("editorfieldMapping")
        .TopBar(gridtopbor =>
        {
            gridtopbor.Add(
                    Html.X().Toolbar()
                    .ID("grdtoolbar")
                    .Margins("0 0 4 0")
                    .Items(gridtoolbatitems =>
                    {
                        gridtoolbatitems.Add(
                            Html.X().Button()
                            .ID("exportexcel")
                            .Listeners(listen => { listen.Click.Handler = "submitValue();"; })
                            .Text("Add")
                            .Icon(Ext.Net.Icon.Add)
                            );
                    })
                );
        })
        .Store(storeitem =>
        {
            storeitem.Add(
                Html.X().Store()
                .ID("CustomerBillingStore")
                .PageSize(1000)
                .AutoLoad(true)
                .DataSource(objc)
                .Model(model => model.Add(Html.X().Model()
                    .IDProperty("Id")
                        .Fields(fields =>
                        {
                            fields.Add(Html.X().ModelField().Name("Id"));
                            fields.Add(Html.X().ModelField().Name("JobWitnessesID").Type(Ext.Net.ModelFieldType.Int));
                        })
                    ))
                );
        })
        .ColumnModel(columnmodel =>
        {
            columnmodel.Columns.Add(Html.X().Column()
                .Text("Job ID")
                .Sortable(true)
                .Width(50)
                .DataIndex("Id")
                .Groupable(false)
            );
            columnmodel.Columns.Add(
            Html.X().ComponentColumn()
                .ID("jobwitnessid")
                .Text("Combo Box")
                .DataIndex("JobWitnessesID")
                .OverOnly(true)
                .Editor(true)
                .Sortable(false)
                .Draggable(false)
                .MenuDisabled(true)
                .PinEvents(new string[] { "expand" })
                .UnpinEvents(new string[] { "collapse" })
                .Renderer(new Renderer
                {
                    Fn = "departmentRenderer"
                })
                .Flex(1)
                .Component(extcomp =>
                {
                    extcomp.Add(
                    Html.X().ComboBox()
                        .ID("comboItems")
                        .Editable(false)
                        .DisplayField("Name")
                        .ValueField("Id")
                        .QueryMode(DataLoadMode.Local)
                        .Store(storeitem =>
                        {
                            storeitem.Add(
                                Html.X().Store()
                                .ID("comboBoxStore")
                                .AutoLoad(true)
                                .Proxy(comboproxy =>
                                {
                                    comboproxy.Add(
                                            Html.X().AjaxProxy()
                                            .Url(Url.Content("~/AjaxData/GetWitnessesByJobId/"))
                                            .Reader(comboreader =>
                                            {
                                                comboreader.Add(
                                                        Html.X().JsonReader()
                                                        .Root("data")
                                                    );
                                            })
                                        );
                                })
                                .Model(model => model.Add(Html.X().Model()
                                    .IDProperty("Id")
                                        .Fields(fields =>
                                        {
                                            fields.Add(Html.X().ModelField().Name("Id"));
                                            fields.Add(Html.X().ModelField().Name("Name"));
                                        })
                                    ))
                                );
                        })
                    );
                })
            );
        })
    )
    </body>
    </html>

    Thanks in advance.
    Last edited by Daniil; Dec 07, 2012 at 6:45 AM. Reason: [CLOSED]
  2. #2
    Hi @MTSI,

    I would try this ComponentColumn's Bind listener.
    cmp.getStore().on('load', function () { cmp.setValue('default value'); });
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @MTSI,

    I would try this ComponentColumn's Bind listener.
    cmp.getStore().on('load', function () { cmp.setValue('default value'); });
    Thanks for your reply.

    Unfortunately your solution was not working. Please read it below mentioned scenario's. It would be better if you reproduce the same issue in my sample which one I provided to you.

    Scenario:

    1. In Editable grid Component column I am having combo box component. In that I want to select one item as default while adding rows in that grid. Grid component column Editable mode is OverOnly (true).

    Issue:

    1. While adding rows that combo box store load method was not triggered. So items are not populated. If I mouse over that particular row means then only store load method got triggered otherwise it won't trigger. So due to this issue I am not able to select default value for that combo box.

    Thanks in advance.
  4. #4
    Please clarify when do you need to set a default value for a ComboBox? Before its Store loading?
  5. #5
    Quote Originally Posted by Daniil View Post
    Please clarify when do you need to set a default value for a ComboBox? Before its Store loading?
    In below mentioned scenario I need to set default value.

    1. While adding a new row in Grid by using Add New button. (In my sample I tried but unable to achieve this)

    Thanks in advance.
    Last edited by MTSI; Dec 01, 2012 at 5:52 AM. Reason: Typo error fixed
  6. #6
    Please try this code in the Bind listener.
    cmp.getStore().load();
    cmp.getStore().on('load', function () { cmp.setValue('default value'); });
  7. #7
    Quote Originally Posted by Daniil View Post
    Please try this code in the Bind listener.
    cmp.getStore().load();
    cmp.getStore().on('load', function () { cmp.setValue('default value'); });
    Hi,

    Thanks for your reply.
    I applied this code but still it is not working. Your self apply this code in that sample which one shared with you.

    Thanks in advance.
  8. #8
    Well, I launched the example that you provided and see the default value in the ComboBox when I move the mouse over a just added row.

    I tested with the latest sources from the trunk. (I had to replace AjaxStoreResult with StoreResult. It has been renamed.)

    Please clarify are you facing another behavior?
  9. #9
    Quote Originally Posted by Daniil View Post
    Well, I launched the example that you provided and see the default value in the ComboBox when I move the mouse over a just added row.

    I tested with the latest sources from the trunk. (I had to replace AjaxStoreResult with StoreResult. It has been renamed.)

    Please clarify are you facing another behaviour?
    Thanks for your reply.

    The same behaviour only I too facing. So I want without doing mouse over to added column, the value should be visible. This is what I am expecting from your end.

    Thanks in advance.
  10. #10
    Well, there is no ComboBox before you move the mouse over the row. So, its Store doesn't load any data until the ComboBox is rendered.

    You can define the Store outside the ComboBox referring it using the ComboBox's StoreID property.

    This idea is demonstrated here:
    https://examples2.ext.net/#/GridPane...Field_Mapping/
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] How to use DirectEvents in ComponentColumn as Over Editor
    By UnifyEducation in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 30, 2012, 1:00 PM
  2. [CLOSED] Razor - ComponentColumn as Over Editor
    By MTSI in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 23, 2012, 11:37 AM
  3. ComponentColumn Editor Bug?
    By Doug.Morrow in forum 2.x Help
    Replies: 6
    Last Post: Aug 08, 2012, 7:30 PM
  4. [CLOSED] Change Store Datasource in Combo Editor Column inside GridPanel
    By tlfdesarrollo in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Apr 13, 2012, 7:32 PM
  5. [CLOSED] Grid Combo Editor - Make drop-down wider than column
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 02, 2011, 3:05 PM

Posting Permissions