[CLOSED] Grid Pin editor with drop down box

  1. #1

    [CLOSED] Grid Pin editor with drop down box

    Hi,

    I am facing one weird issue like when I am trying to modify any drop down column means in that I am not able to see selected drop down item name once after I clicked the pin editor. Below I mentioned reproducible sample.

    Thanks in advance.

    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace UAT28942.Models
    {
        public class JobOrderDeliverableExtension
        {
            #region Public Properties
    
            public string RowId { get; set; }        
            public string DeliverableName { get; set; }        
            public int TurnAroundTypeId { get; set; }
            public string TurnAroundTypeName { get; set; }        
    
            #endregion
        }
    }
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using UAT28942.Models;
    using Ext.Net.Utilities;
    using System.Web.Mvc;
    
    namespace UAT28942.ReUsable
    {
        public class AjaxDataHelperController : Controller
        {
            public AjaxStoreResult GetAllTurnAroundTypes()
            {
    
                try
                {
                    List<object> data = new List<object>();
    
                    for (int i = 0; i < 10; i++)
                    {
                        data.Add
                            (
                            new
                            {
                                Id = i,
                                Name = string.Format("{0} - {1}", "Turn Around", i.ToString())
                            }
                            );
                    }
    
                    return new AjaxStoreResult(data);
    
                }
                catch (Exception ex)
                {
                    throw ex;
                }
            }
    
            public AjaxStoreResult GetDeliverables()
            {
    
                try
                {
                    List<JobOrderDeliverableExtension> _list = new List<JobOrderDeliverableExtension>();
                    for (int i = 0; i < 10; i++)
                    {
                        _list.Add(new JobOrderDeliverableExtension
                        {
                            DeliverableName = string.Format("{0} - {1}", "Deliverable", i.ToString()),
                            RowId = Guid.NewGuid().ToString(),
                            TurnAroundTypeId = i,
                            TurnAroundTypeName = string.Format("{0} - {1}", "Turn Around", i.ToString())
                        });
                    }
    
                    int total = _list.Count();
    
                    return new AjaxStoreResult(_list, total);
    
                }
                catch (Exception ex)
                {
                    throw ex;
                }
            }
        }
    }
    
    @using Ext.Net;
    @using Ext.Net.MVC;
    @{
        ViewBag.Title = "Deliverable";
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <title>@ViewBag.Title</title>
        <link type="text/css" rel="stylesheet" href="http://speed.ext.net/www/intro/css/main.css" />
        <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
        <script type="text/javascript">
    
            function createUUID() {
                var s = [];
                var hexDigits = "0123456789abcdef";
                for (var i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
                s[8] = s[13] = s[18] = s[23] = "-";
    
                var uuid = s.join("");
                return uuid;
            }
    
            function hashCode(str) {
                try {
                    var hash = 1315423911;
                    for (var i = 0; i < str.length; i++) {
                        hash ^= ((hash << 5) + str.charCodeAt(i) + (hash >> 2));
                    }
                    return (hash & 0x7FFFFFFF);
                } catch (e) {
    
                }
            }
    
            var GenerateHashCode = function (value, record) {
                try {
                    if (value != null && value != undefined && value != "" && value.length > 0) {
                        return hashCode(value);
                    }
                    else {
                        return hashCode(createUUID());
                    }
                } catch (e) {
                    Ext.Msg.alert('Error', e.message);
                }
            };
    
            var pinEditors = function (btn, pressed) {
                var columnConfig = btn.column,
                    column = columnConfig.column;
    
                if (pressed) {
                    column.pinOverComponent();
                    column.showComponent(columnConfig.record, true);
                } else {
                    column.unpinOverComponent();
                    column.hideComponent(true);
                }
            };
    
            var turnAroundRendererelecdel = function (value) {
                try {
    
                    var comboName = "";
    
                    if (App.turnAroundStoreelecdel != undefined && App.turnAroundStoreelecdel.data != undefined
                        && App.turnAroundStoreelecdel.data.items.length > 0) {
                        var result = $.grep(App.turnAroundStoreelecdel.data.items, function (e) { return e.data.Id == parseInt(value); });
                        if (result != null && result != undefined && result.length > 0) {
                            comboName = result[0].data.Name;
                        }
                    }
                    else if (App.electronicdel != undefined && App.electronicdel.data != undefined
                            && App.electronicdel.data.items.length > 0) {
                        var result = $.grep(App.electronicdel.data.items,
                    function (e) { return e.data.TurnAroundTypeId == parseInt(value); });
                        if (result != null && result != undefined && result.length > 0) {
                            comboName = result[0].data.TurnAroundTypeName;
                        }
                    }
    
                    return comboName;
    
                } catch (e) {
    
                }
            }
    
        </script>
    </head>
    <body>
        @(Html.X().ResourceManager())
        @(
     Html.X().GridPanel()
    .EmptyText("No Electronic Deliverable(s) selected")
    .Title("Electronic Deliverable(s)")
    .Layout(LayoutType.Fit)
    .ID("GridElectDeliverable")
    .AutoRender(false)
    .Border(true)
    .Store(storeitem =>
    {
        storeitem.Add(
        Html.X().Store()
        .ID("electronicdel")
        .IsPagingStore(false)
        .AutoLoad(true)
        .RemoteSort(false)
        .RemotePaging(false)
        .Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
        .Url(Url.Content("~/AjaxDataHelper/GetDeliverables/"))
        .Reader(reader => reader.Add(Html.X().JsonReader()
        .Root("data")
        ))
        ))
        .Model(model => model.Add(Html.X().Model()
    
        .IDProperty("RowId")
        .Fields(fields =>
        {
            fields.Add(Html.X().ModelField().Name("RowId").Convert(extconvert =>
            {
                extconvert.Fn = "GenerateHashCode";
            }));
            fields.Add(Html.X().ModelField().Name("DeliverableName"));
            fields.Add(Html.X().ModelField().Name("TurnAroundTypeId"));
            fields.Add(Html.X().ModelField().Name("TurnAroundTypeName"));
        })
        ))
        .Sorters(storesorters =>
        {
            storesorters.Add(
            Html.X().DataSorter()
            .Property("DeliverableName")
            .Direction(Ext.Net.SortDirection.ASC)
            );
        })
        );
    })
    .ColumnModel(
    Html.X().Column()
    .Text("Item Name")
    .DataIndex("DeliverableName")
    .Sortable(true)
    .Flex(1)
    .MenuDisabled(true),
    
    Html.X().ComponentColumn()
    .OverOnly(true)
    .Editor(true)
    .Pin(true)
    .Text("Turn Around")
    .DataIndex("TurnAroundTypeId")
    .Width(200)
    .Sortable(true)
    .PinEvents("expand")
    .UnpinEvents("collapse")
    .Renderer(new Ext.Net.Renderer
    {
        Fn = "turnAroundRendererelecdel"
    })
    .MenuDisabled(true)
    .Component(extcomponent =>
    {
        extcomponent.Add(
        Html.X().ComboBox()
        .TypeAhead(true)
        .QueryMode(DataLoadMode.Local)
        .ForceSelection(true)
        .TriggerAction(TriggerAction.All)
        .DisplayField("Name")
        .ValueField("Id")
        .AllowBlank(false)
        .Store(Html.X().Store().ID("turnAroundStoreelecdel")
        .AutoLoad(true)
        .Model(
        Html.X().Model()
        .IDProperty("Id")
        .Fields
        (
        new ModelField("Id", ModelFieldType.String) { Mapping = "Id" },
        new ModelField("Name", ModelFieldType.String) { Mapping = "Name" }
        )
        )
        .Proxy(Html.X().AjaxProxy()
        .Url(Url.Content("~/AjaxDataHelper/GetAllTurnAroundTypes/"))
        .Reader(Html.X().JsonReader().Root("data"))
        )
        )
        );
    }),
    
    Html.X().ComponentColumn()
    .Width(25)
    .PinAllColumns(false)
    .AutoWidthComponent(false)
    .OverOnly(true)
    .Component(Html.X().Button()
    .ToolTip("Pin editors")
    .Icon(Icon.Pencil)
    .AllowDepress(true)
    .EnableToggle(true)
    .Listeners(ls => ls.Toggle.Fn = "pinEditors")
    )
    
    )
    
    )
    </body>
    </html>
    Last edited by Daniil; May 30, 2013 at 4:13 AM. Reason: [CLOSED]
  2. #2
    Hi @MTSI,

    Please clarify what Ext.NET version are you using?

    Is it reproducible with the latest sources from the SVN trunk?
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @MTSI,

    Please clarify what Ext.NET version are you using?

    Is it reproducible with the latest sources from the SVN trunk?
    Ext.Net Version - 2.2.0.41185
  4. #4
    I don't think Ext.NET v2.2 contains the AjaxStoreResult class.

    I am getting a compiler error.
    The type or namespace name 'AjaxStoreResult' could not be found (are you missing a using directive or an assembly reference?)
  5. #5
    Quote Originally Posted by Daniil View Post
    I don't think Ext.NET v2.2 contains the AjaxStoreResult class.

    I am getting a compiler error.
    The type or namespace name 'AjaxStoreResult' could not be found (are you missing a using directive or an assembly reference?)
    Please include these

    using System;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using System.ComponentModel;
    using System.Web.Mvc;
    using System.Xml.Serialization;
    using Ext.Net.Utilities;
    using Newtonsoft.Json;
    using Ext.Net;
    
    namespace UAT28942.ReUsable
    {
        public class AjaxFormResult : ActionResult, IXObject
        {
            public AjaxFormResult() { }
    
            [ConfigOption]
            public string Script { get; set; }
            public bool IsUpload { get; set; }
    
            private bool success = true;
    
            [ConfigOption]
            [DefaultValue("")]
            public bool Success
            {
                get { return this.success; }
                set { this.success = value; }
            }
    
            private List<FieldError> errors;
    
            [ConfigOption(JsonMode.AlwaysArray)]
            public List<FieldError> Errors
            {
                get
                {
                    if(this.errors == null)
                    {
                        this.errors = new List<FieldError>();
                    }
    
                    return this.errors;
                }
            }
    
            private ParameterCollection extraParams;
            public ParameterCollection ExtraParams
            {
                get
                {
                    if (this.extraParams == null)
                    {
                        this.extraParams = new ParameterCollection();
                    }
    
                    return this.extraParams;
                }
            }
    
            [ConfigOption("extraParams", JsonMode.Raw)]
            [DefaultValue("")]
            protected string ExtraParamsProxy
            {
                get
                {
                    if (this.ExtraParams.Count > 0)
                    {
                       return ExtraParams.ToJson();
                    }
    
                    return "";
                }
            }
    
            public override void ExecuteResult(ControllerContext context)
            {
                if (this.IsUpload)
                {
                    context.HttpContext.Response.Write("<textarea>{0}</textarea>".FormatWith(new ClientConfig().Serialize(this)));
                }
                else
                {
                    CompressionUtils.GZipAndSend(new ClientConfig().Serialize(this));
                }
            }
    
            [XmlIgnore]
            [JsonIgnore]
            public virtual ConfigOptionsCollection ConfigOptions
            {
                get
                {
                    
                    var list = new ConfigOptionsCollection();
                    list.Add("script", new ConfigOption("script", new SerializationOptions("script"), null, this.Script));
                    list.Add("success", new ConfigOption("success", new SerializationOptions("success"), "", this.Success));
                    list.Add("errors", new ConfigOption("errors", new SerializationOptions("errors", JsonMode.AlwaysArray), "", this.Errors));
                    list.Add("extraParamsProxy", new ConfigOption("extraParamsProxy", new SerializationOptions("extraParams", JsonMode.Raw), "", this.ExtraParamsProxy));
    
                    return list;
                }
            }
    
            /// <summary>
            /// 
            /// </summary>
            [Browsable(false)]
            [EditorBrowsable(EditorBrowsableState.Never)]
            [DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]
            [XmlIgnore]
            [JsonIgnore]
            public virtual ConfigOptionsExtraction ConfigOptionsExtraction
            {
                get
                {
                    return ConfigOptionsExtraction.List;
                }
            }
        }
    
        public class FieldError: IXObject
        {
            public FieldError(string fieldID, string errorMessage)
            {
                if(string.IsNullOrEmpty(fieldID))
                {
                    throw new ArgumentNullException("fieldID", "Field ID can not be empty");
                }
    
                if (string.IsNullOrEmpty(errorMessage))
                {
                    throw new ArgumentNullException("errorMessage", "Error message can not be empty");
                }
    
                this.FieldID = fieldID;
                this.ErrorMessage = errorMessage;
            }
    
            [ConfigOption("id")]
            [DefaultValue("")]
            public string FieldID { get; set; }
    
            [ConfigOption("msg")]
            [DefaultValue("")]
            public string ErrorMessage { get; set; }
    
            [XmlIgnore]
            [JsonIgnore]
            public virtual ConfigOptionsCollection ConfigOptions
            {
                get
                {
    
                    var list = new ConfigOptionsCollection();
                    list.Add("fieldID", new ConfigOption("fieldID", new SerializationOptions("id"), null, this.FieldID));
                    list.Add("errorMessage", new ConfigOption("errorMessage", new SerializationOptions("msg"), null, this.ErrorMessage));
    
                    return list;
                }
            }
    
            /// <summary>
            /// 
            /// </summary>
            [Browsable(false)]
            [EditorBrowsable(EditorBrowsableState.Never)]
            [DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]
            [XmlIgnore]
            [JsonIgnore]
            public virtual ConfigOptionsExtraction ConfigOptionsExtraction
            {
                get
                {
                    return ConfigOptionsExtraction.List;
                }
            }
        }
    
        public class FieldErrors : Collection<FieldError> { }
    }
    
    using System.Web.Mvc;
    using Ext.Net;
    
    namespace UAT28942.ReUsable
    {
        public class AjaxResult : ActionResult
        {
            public AjaxResult() { }
    
            public AjaxResult(string script)
            {
                this.Script = script;
            }
    
            public AjaxResult(object result)
            {
                this.Result = result;
            }
    
            public string Script { get; set; }
            public object Result { get; set; }
            public string ErrorMessage { get; set; }
    		public bool IsUpload { get; set; }
    
            private ParameterCollection extraParamsResponse;
            public ParameterCollection ExtraParamsResponse
            {
                get
                {
                    if (this.extraParamsResponse == null)
                    {
                        this.extraParamsResponse = new ParameterCollection();
                    }
    
                    return this.extraParamsResponse;
                }
            }
    
            public override void ExecuteResult(ControllerContext context)
            {
                DirectResponse response = new DirectResponse();
    
                response.Result = this.Result;
    			response.IsUpload = this.IsUpload;
    
                if (!string.IsNullOrEmpty(this.ErrorMessage))
                {
                    response.Success = false;
                    response.ErrorMessage = this.ErrorMessage;
                }
                else
                {
                    if (!string.IsNullOrEmpty(this.Script))
                    {
                        response.Script = string.Concat("<string>", this.Script);
                    }
    
                    if (this.ExtraParamsResponse.Count > 0)
                    {
                        response.ExtraParamsResponse = this.ExtraParamsResponse.ToJson();
                    }
                }
                
                response.Return();
            }
        }
    
    }

    
    using System;
    using System.Web.Mvc;
    using Ext.Net;
    
    namespace UAT28942.ReUsable
    {
        public class AjaxStoreResult : ActionResult
        {
            public AjaxStoreResult() { }
    
            public AjaxStoreResult(object data)
            {
                this.Data = data;
            }
    
            public AjaxStoreResult(object data, int totalCount) : this(data)
            {
                this.Total = totalCount;
            }
    
            public AjaxStoreResult(StoreResponseFormat responseFormat)
            {
                this.ResponseFormat = responseFormat;
            }
    
            private object data;
            public object Data
            {
                get { return this.data; }
                set { this.data = value; }
            }
    
            private int total;
            public int Total
            {
                get { return this.total; }
                set { this.total = value; }
            }
    
            private StoreResponseFormat responseFormat = StoreResponseFormat.Load;
            public StoreResponseFormat ResponseFormat
            {
                get { return this.responseFormat; }
                set { this.responseFormat = value; }
            }
    
            private SaveStoreResponse saveResponse;
            public SaveStoreResponse SaveResponse
            {
                get
                {
                    if(this.saveResponse == null)
                    {
                        this.saveResponse = new SaveStoreResponse();
                    }
                    return this.saveResponse;
                }
            }
    
            public override void ExecuteResult(ControllerContext context)
            {
                switch (this.ResponseFormat)
                {
                    case StoreResponseFormat.Load:
                        StoreResponseData storeResponse = new StoreResponseData();
                        storeResponse.Data = JSON.Serialize(this.Data);
                        storeResponse.Total = this.Total;
                        storeResponse.Return();
                        break;
                    case StoreResponseFormat.Save:
                        Response response = new Response(true);
                        response.Success = this.SaveResponse.Success;
                        response.Message = this.SaveResponse.Message;
                        StoreResponseData saveResponse = new StoreResponseData();
                        //saveResponse.Confirmation = this.SaveResponse.ConfirmationList;
                        response.Data = saveResponse.ToString();
    
                        response.Return();
                        break;
                    default:
                        throw new ArgumentOutOfRangeException();
                }
            }
        }
    
        public enum StoreResponseFormat
        {
            Load,
            Save
        }
    
        public class SaveStoreResponse
        {
            private bool success = true;
            private string message;
    
            public bool Success
            {
                get { return this.success; }
                set { this.success = value; }
            }
    
            public string Message
            {
                get { return this.message; }
                set { this.message = value; }
            }
    
            //public ConfirmationList ConfirmationList { get; set; }
        }
    }
    
    using System;
    using System.Web.Mvc;
    using Ext.Net;
    
    namespace UAT28942.ReUsable
    {
        public class RestResult : ActionResult
        {
            private bool success;
            private string msg;
            private object data;
    
            public bool Success
            {
                get { return success; }
                set { success = value; }
            }
            public string Message
            {
                get { return msg; }
                set { msg = value; }
            }
    
            public object Data
            {
                get { return data; }
                set { data = value; }
            }
            
            public override void ExecuteResult(ControllerContext context)
            {
                Response response = new Response(true);
                response.Success = this.Success;
                response.Message = this.Message;
                response.Data = JSON.Serialize(this.Data);
    
                response.Return();
            }
        }
    }
  6. #6
    Is it your overrides or have you taken this code from Ext.NET v2.1?

    In general, AjaxStoreResult has been renamed to StoreResult. I renamed it in your code ans was able to run the sample.

    Please do the following.

    1. Set up this for the ComponentColumn with ComboBox.
    .Listeners(events =>
    {
        events.Bind.Handler = @"var store = cmp.getStore();
    
                                store.on('load', function () {
                                    cmp.setValue(record.data[item.dataIndex]);
                                }, null, { single: true });";
        events.Bind.Single = true;
    })
    or move out the Store from the ComboBox and assign it to the ComboBox via its StoreID property.

    2. Replace
    new ModelField("Id", ModelFieldType.String) { Mapping = "Id" }
    with
    new ModelField("Id", ModelFieldType.Int)
    Last edited by Daniil; May 22, 2013 at 3:36 PM.
  7. #7
    Quote Originally Posted by Daniil View Post
    Is it your overrides or have you taken this code from Ext.NET v2.1?

    In general, AjaxStoreResult has been renamed to StoreResult. I renamed it in your code ans was able to run the sample.

    Please do the following.

    1. Set up this for the ComponentColumn with ComboBox.
    .Listeners(events =>
    {
        events.Bind.Handler = @"var store = cmp.getStore();
    
                                store.on('load', function () {
                                    cmp.setValue(record.data[item.dataIndex]);
                                }, null, { single: true });";
        events.Bind.Single = true;
    })
    or move out the Store from the ComboBox and assign it to the ComboBox via its StoreID property.

    2. Replace
    new ModelField("Id", ModelFieldType.String) { Mapping = "Id" }
    with
    new ModelField("Id", ModelFieldType.Int)
    Hi,

    It is not working. It would be great if you can provide me any workable sample instead of this kind of snippets.

    Thanks in advance
  8. #8
    Well, this is the only things I changed in your sample to get it working. Except renaming AjaxStoreResult to StoreResult and tweaking to Proxies' URLs.

    If you can provide us with a simplified example, I can modify it and re-post.

    Though, for now, please post your existing modified page. I will check you applied the changes correctly.

Similar Threads

  1. [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
  2. [CLOSED] Grid to Grid Drag and Drop Questions
    By dmoore in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 15, 2011, 10:43 AM
  3. [CLOSED] [1.0] Grid to Grid Drag Drop
    By MP in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 22, 2010, 3:57 PM
  4. Replies: 2
    Last Post: Mar 11, 2009, 8:59 AM
  5. Grid to grid Drag and Drop grouping issue
    By bobs in forum 1.x Help
    Replies: 0
    Last Post: Feb 10, 2009, 7:13 AM

Posting Permissions