[CLOSED] Javascript error on cell click

  1. #1

    [CLOSED] Javascript error on cell click

    Hi Ext.NET Team,

    We have a grid whose columns we are generating dynamically through c#. Below is the snippet of the grid:

    //View



    Html.X().GridPanel().ID("grdPacks2").Scroll(ScrollMode.Both)
                                                    .Store(
                                                           X.Store().ID("Store1").RemoteFilter(true).RemoteSort(true)
                                                           .PageSize(
                                                                     Convert.ToInt32(PriceRight.Settings.PropertyReader.GetProperty("GRID_PAGE_SIZE"))
                                                                    )
                                                           .Proxy(
                                                                  Html.X().AjaxProxy()
                                                                          .Url(Url.Action("GetSalesData"))
                                                                          .Reader(Html.X().JsonReader().Root("data"))
                                                                          .ExtraParams(x => x.Add(new Parameter() { Name = "scenarioId", Value = Model.Scenario.ScenarioUUID.ToString(), Mode = ParameterMode.Raw }))
                                                                          .ExtraParams(x => x.Add(new Parameter() { Name = "scenarioAsOfDate", Value = Model.Scenario.SCENARIO_AS_OF_DATE.ToString(), Mode = ParameterMode.Value }))
                                                                 )
                                                          .Model(Html.X().Model().ID("ProjectSalesModel").Fields(ViewBag.Mfields))
                                                          )//End Store 
                                                    .ColumnModel(
                                                                   ((IEnumerable<object>)ViewBag.columns).Cast<ColumnBase>()
                                                                )//End ColumnModel
                                                    .SelectionModel(Html.X().CellSelectionModel()) //End SelectionModel
            //.Plugins(Html.X().CellEditing().Listeners(l => { l.BeforeEdit.Handler = "return !e.grid.lockEditing;"; })) //End Plugins
                                                            .Plugins(Html.X().CellEditing().Listeners(l => { l.BeforeEdit.Fn = "cellEdit"; }))

    // Controller
    In the GetSalesData Ajax call we have below code:
    private ActionResult FromDatabase(string scenarioId, StoreRequestParameters parameters, DateTime scenarioAsOfDate)
            {
                try
                {
                    var finallist = svc.GetRecords(Convert.ToInt32(scenarioId));
                    
    
                    Paging<ExpandoObject> paging = new Paging<ExpandoObject>();
    
                    //Filter data
                    finallist = paging.Filter<ExpandoObject>(finallist, parameters.GridFilters);
    
    
                    //Sort data
                    finallist = paging.Sort<ExpandoObject>(finallist,
                                                                    parameters.SimpleSort,
                                                                    parameters.SimpleSortDirection);
    
                    //get page size
                    int pageSize = paging.GetCurrentPageSize<ExpandoObject>(parameters.Limit, parameters.Start, finallist.Count);
    
                    //extract current page records
                    List<ExpandoObject> packs = paging.GetCurrentPageData<ExpandoObject>(finallist,
                                                                                                            parameters.Start,
                                                                                                            pageSize);
                    //creating paging object
                    var data = new Paging<ExpandoObject>(packs, finallist.Count);
                    return this.Store(data);
                }
                catch (Exception)
                {
    
                    throw;
                }
            }
    
    //Index action method that gets called when page is loaded for the first time.
    public ActionResult Index(int scenarioId, string actiontype)
            {
      var list = _svc.GetRecords(Convert.ToInt32(scenarioId));
     DataTable dt = GenereateDataTable(list, scenarioId, salesViewModel.Scenario.SCENARIO_AS_OF_DATE.Value);
    string months ="Jan-Dec ";
    foreach (DataColumn c in dt.Columns)
                {
                    Column cl = new Column();
                    clnm = new ColumnName();
    
                    if (columnsToBeHidden.Contains(c.ColumnName) ||
                       (c.ColumnName.StartsWith("ScenarioCountryPackSalesUUID")))
                    {
                        cl.Hidden = true;
                    }
    
                    if (c.ColumnName == "Country" || c.ColumnName == "Pack")
                    {
                        cl.Groupable = true;
                    }
    
                    if (c.ColumnName.Contains(months))
                    {
                        NumberColumn numcol = new NumberColumn();
                        clnm.Text = numcol.Text = c.Caption;
                        clnm.DataIndex = numcol.DataIndex = c.ColumnName;
                        numcol.ID = c.ColumnName;
    
                        NumberField nf = new NumberField();
                        nf.Listeners.Blur.Fn = "cellBlur";
                        nf.MaxLength = 9;
                        nf.SelectOnFocus = true;
                        numcol.Editor.Add(nf);
                        numcol.Groupable = false;
                        numcol.Flex = 1;
                        Columns.Add(numcol);
                    }
                    else// non year columns
                    {
                        cl.ID = c.ColumnName;
                        clnm.Text = cl.Text = c.Caption;
                        clnm.DataIndex = cl.DataIndex = c.ColumnName;                   
                        Columns.Add(cl);
                        cl.Flex = 1;
                    }
                    columnNames.Add(clnm);
                }
    
                ViewBag.columns = Columns;           
    
                List<ModelField> Mfields = (from fld in columnNames
                                            select new ModelField { Name = fld.DataIndex }).ToList();
    
                foreach (ModelField f in Mfields)
                {
                    if (f.Name.Contains(months))
                    {
                        f.Type = ModelFieldType.Int;
                    }
                }
    
    } 
    
    //Generate DataTable Method
    private DataTable GenereateDataTable(IList<ScenarioSalesDTO> list, int scenarioId, DateTime scenarioAsOfDate)
            {
                DataTable dataTable = new DataTable();
                var countryColumn = new DataColumn("Country");
                dataTable.Columns.Add(countryColumn);
                var packColumn = new DataColumn("Pack");
                dataTable.Columns.Add(packColumn);
                int currentYear = scenarioAsOfDate.Year;
    
                var packCd = new DataColumn("PackCD");
                dataTable.Columns.Add(packCd);
    
                var countryCode = new DataColumn("CountryCode");
                dataTable.Columns.Add(countryCode);
    
                ScenarioDTO scenariodto = _readService.GetScenarioById(scenarioId).TheEntity;
                int yearsCount = scenariodto.AnalysisTimeHorizonMonths / 12;
                //for (int i = 0; i <= analysisHorizon / 12; i++)
                for (int i = 0; i <= yearsCount; i++)
                {
                    if (i > 0)
                        currentYear = currentYear + 1;
                    DataColumn yearColumn = new DataColumn(months + currentYear);
                    var uniqueId = new DataColumn("ScenarioCountryPackSalesUUID" + currentYear);
    
                     yearColumn.Caption = months + currentYear;
    
                    dataTable.Columns.Add(yearColumn);
                    dataTable.Columns.Add(uniqueId);
                }
                return dataTable;
            }
    Click image for larger version. 

Name:	grid.png 
Views:	12 
Size:	16.2 KB 
ID:	7434

    So when we run with the above code the grid gets loaded fine as shown in above attachment with the dynamic columns. But when we try to edit cells under columns e.g:"Jan-Dec 2013" we get a javascript exception as shown in the below attachment

    Click image for larger version. 

Name:	exception.jpg 
Views:	16 
Size:	104.8 KB 
ID:	7433


    Please let me know what could be wrong / missing in the code. Also let me know if you need any more information

    Thanks
    Last edited by geoffrey.mcgill; Jan 03, 2014 at 3:10 AM. Reason: [CLOSED]
  2. #2
    Hello!

    It seems the problem could be in this line:

    .Plugins(Html.X().CellEditing().Listeners(l => { l.BeforeEdit.Fn = "cellEdit"; }))
    Can you provide a full sample with this function?
  3. #3
    Quote Originally Posted by Baidaly View Post
    Hello!

    It seems the problem could be in this line:

    .Plugins(Html.X().CellEditing().Listeners(l => { l.BeforeEdit.Fn = "cellEdit"; }))
    Can you provide a full sample with this function?
    Hi Baidaly,

    Thanks for the reply. Below is the javascript function for cellEdit:

    var changedRows = [];
        var fieldname = null;
        var pageNo = 0;
        var cellEdit = function (editor, e) {
            debugger;
            if (e.grid.lockEditing) {
                return false;
            }
            else {
                for (var i = 0; i < changedRows.length; i++) {
                    if (changedRows[i].IsEdited == false) {
                        changedRows.splice(i, 1);
                    }
                }
                fieldname = e.field;
                pageNo = $('#PageBar').find('input[type="text"]').val();
                var rowIndex = e.rowIdx; //App.grdPacks2.getSelectionModel().selected.items[0].index;//Get the selected row index        
                var yearNum = fieldname.substr(fieldname.length - 1);
                var pkColValue = App.grdPacks2.store.getAt(rowIndex).get("ScenarioCountryPackSalesUUID" + yearNum);
    
    
                changedRows.push({
                    "IsEdited": false,
                    "Field": e.field,
                    "PageIndex": pageNo - 1,
                    "RowIndex": rowIndex,
                    "PKColValue": pkColValue,
                    "NewValue": "",
                    "DateTimeVal": new Date(),
                    "PackCode": e.view.store.data.items[rowIndex].data.PackCode,
                    "CountryCode": e.view.store.data.items[rowIndex].data.CountryCode,
                    "YearNum": yearNum,
                    "PackDescription": e.view.store.data.items[rowIndex].data.PackDesc
                });
                return true;
            }
    
    
        };
    Please let me know if this is what you required. Or you need a full sample. Thanks
  4. #4
    Yes, please provide a full sample.
  5. #5
    Quote Originally Posted by Daniil View Post
    Yes, please provide a full sample.
    Problem has been solved.It seems the dataIndex property of column does not takes space. Initially we had dataIndex as "Jan-Dec 2013" when we changed it to "Jan-Dec2013" by removing the space it worked.

    Why is it so? Is there any reason. Please let me know

    Thanks for all the help
  6. #6
    Quote Originally Posted by PriceRightHTML5team View Post
    Why is it so? Is there any reason. Please let me know
    DataIndex should not contain spaces.
    Geoffrey McGill
    Founder

Similar Threads

  1. [CLOSED] Gridpanel editalbe cell - select all text of field on cell click
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 18, 2013, 5:20 AM
  2. [CLOSED] Button click Javascript Error IE7/IE8
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 07, 2013, 3:01 PM
  3. Replies: 1
    Last Post: Jul 10, 2012, 11:16 AM
  4. Replies: 1
    Last Post: May 21, 2012, 8:36 AM
  5. [CLOSED] GridPanel Cell Tooltip - javascript error on this.hide()
    By iansriley in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 16, 2011, 12:22 PM

Tags for this Thread

Posting Permissions