i think there is a bug with the Grid Column Show.

Question

Hello, Syncfusion Teams.i think there is a bug with the Grid Column Show.Turn Data Grid on and off with a buttonIn addition, to show only the columns specified by the user, set the default Visible to false and show only the necessary columns when created.When processed as a button, the Grid Column comes out with the same Width as the Header without any problem.However, when it is created, the Column Width is strangely displayed.I am attaching the code and snapshot below, so please take a look and catch the error if I did something wrong.

TaeWook Kang · Answer

TaeWook Kang · Answer

--------

@*cellEdit="cellEdit"*@

@*Frozen Column*@ (){ new Syncfusion.EJ2.Grids.GridColumn { Field = "RM_SNO" , Width = "130", HeaderText = "KEY" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Left}, new Syncfusion.EJ2.Grids.GridColumn { Field = "ROOM_NO" , Width = "90" , HeaderText = "ROOM NO." , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, ValidationRules = new { required = true, number=true}}, new Syncfusion.EJ2.Grids.GridColumn { Field = "ID_COND_ZONE", Width = "90" , HeaderText = "ZONE" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true, number=true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "AIR_SYS_NM" , Width = "90" , HeaderText = "AIR SYSTEM NAME", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "RM_NM" , Width = "140", HeaderText = "ROOM NAME" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Left, ValidationRules = new { required=true}}} }})"> @*ARCHITECHTURAL INFORMATION*@ (){ new Syncfusion.EJ2.Grids.GridColumn { Field = "RM_AREA" , Width = "80" , Visible = false, HeaderText = "ROOM AREA (m2)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "RM_WIDTH" , Width = "80" , Visible = false, HeaderText = "WIDTH (m)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "RM_LGTH" , Width = "80" , Visible = false, HeaderText = "LENGTH (m)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "RM_CLG_HGT" , Width = "90" , Visible = false, HeaderText = "CEILING HEIGHT (m)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "RM_FULL_HGT" , Width = "90" , Visible = false, HeaderText = "FULL HEIGHT (m)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "RM_VOL" , Width = "100", Visible = false, HeaderText = "ROOM VOLUME (m3)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "RM_NO_OF_OCC", Width = "100", Visible = false, HeaderText = "NUMBER OF OCCUPANCY", DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}} }, new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "OUTER WALL LENGTH", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List(){ new Syncfusion.EJ2.Grids.GridColumn { Field = "OWL_N", Width = "90", HeaderText = "N", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "OWL_E", Width = "90", HeaderText = "E", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "OWL_S", Width = "90", HeaderText = "S", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "OWL_W", Width = "90", HeaderText = "W", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}} }, new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "OUTER WALL AREA", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List(){ new Syncfusion.EJ2.Grids.GridColumn { Field = "OWA_N", Width = "90", HeaderText = "N", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}, new Syncfusion.EJ2.Grids.GridColumn { Field = "OWA_E", Width = "90", HeaderText = "E", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}, new Syncfusion.EJ2.Grids.GridColumn { Field = "OWA_S", Width = "90", HeaderText = "S", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}, new Syncfusion.EJ2.Grids.GridColumn { Field = "OWA_W", Width = "90", HeaderText = "W", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}} }, new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "DOOR Q'ty", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List(){ new Syncfusion.EJ2.Grids.GridColumn { Field = "DOOR_QTY_N", Width = "90", HeaderText = "N", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "DOOR_QTY_E", Width = "90", HeaderText = "E", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "DOOR_QTY_S", Width = "90", HeaderText = "S", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "DOOR_QTY_W", Width = "90", HeaderText = "W", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}} }, new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "WINDOW Q'ty", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List(){ new Syncfusion.EJ2.Grids.GridColumn { Field = "WIN_QTY_N", Width = "90", HeaderText = "N", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "WIN_QTY_E", Width = "90", HeaderText = "E", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "WIN_QTY_S", Width = "90", HeaderText = "S", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "WIN_QTY_W", Width = "90", HeaderText = "W", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}} }})"> @*HEAT DISSIPATION*@ (){ new Syncfusion.EJ2.Grids.GridColumn { Field = "HD_ELTR_WT" , Width = "90", Visible = false, HeaderText = "HEAT DISSIPATION (Watt)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required=true}}, new Syncfusion.EJ2.Grids.GridColumn { Field = "HD_ELTR_WT_AREA" , Width = "90", Visible = false, HeaderText = "HEAT DISSPATION / AREA (Watt/m2)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}} }, new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "INSTRUMENT", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List(){ new Syncfusion.EJ2.Grids.GridColumn { Field = "HD_ISTRM_WT" , Width = "90", Visible = false, HeaderText = "HEAT DISSIPATION (Watt)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required=true}}, new Syncfusion.EJ2.Grids.GridColumn { Field = "HD_ISTRM_WT_AREA" , Width = "90", Visible = false, HeaderText = "HEAT DISSPATION / AREA (Watt/m2)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}} }, new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "TELECOM", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List(){ new Syncfusion.EJ2.Grids.GridColumn { Field = "HD_TC_WT" , Width = "90", Visible = false, HeaderText = "HEAT DISSIPATION (Watt)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required=true}}, new Syncfusion.EJ2.Grids.GridColumn { Field = "HD_TC_WT_AREA" , Width = "90", Visible = false, HeaderText = "HEAT DISSPATION / AREA (Watt/m2)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}} }, new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "ETC", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List(){ new Syncfusion.EJ2.Grids.GridColumn { Field = "HD_ETC_WT" , Width = "90", Visible = false, HeaderText = "HEAT DISSIPATION (Watt)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required=true}}, new Syncfusion.EJ2.Grids.GridColumn { Field = "HD_ETC_WT_AREA" , Width = "90", Visible = false, HeaderText = "HEAT DISSPATION / AREA (Watt/m2)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}} }, new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "TOTAL", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List(){ new Syncfusion.EJ2.Grids.GridColumn { Field = "HD_TOTAL_WT" , Width = "90", Visible = false, HeaderText = "TOTAL HEAT DISSIPATION (Watt)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}, new Syncfusion.EJ2.Grids.GridColumn { Field = "HD_TOTAL_WT_AREA" , Width = "90", Visible = false, HeaderText = "TOTAL HEAT DISSPATION / AREA (Watt/m2)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}} }})"> @*FRESH AIR SELECTION*@ (){ new Syncfusion.EJ2.Grids.GridColumn { Field = "FAS_OB_OCC_UTFL", Width = "90", Visible = false, HeaderText = "UNIT FLOW (L/S/PERSON)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "FAS_OB_OCC_FLRT", Width = "90", Visible = false, HeaderText = "FLOW RATE (L/S)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}} }, new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "AREA BASE", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List(){ new Syncfusion.EJ2.Grids.GridColumn { Field = "FAS_AB_UTFL", Width = "90", Visible = false, HeaderText = "UNIT FLOW (L/S/m2)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "FAS_AB_FLRT", Width = "90", Visible = false, HeaderText = "FLOW RATE (L/S)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}} }, new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "FIXTURE UNIT BASE", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List(){ new Syncfusion.EJ2.Grids.GridColumn { Field = "FAS_FUB_TILT_UNFW", Width = "90", Visible = false, HeaderText = "UNIT FLOW (L/S/TOILET)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "FAS_FUB_TILT_FLRT", Width = "90", Visible = false, HeaderText = "FLOW RATE (L/S)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}, new Syncfusion.EJ2.Grids.GridColumn { Field = "FAS_FUB_SHW_UNFW" , Width = "90", Visible = false, HeaderText = "UNIT FLOW (L/S/SHOWER)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "FAS_FUB_SHW_FLRT" , Width = "90", Visible = false, HeaderText = "FLOW RATE (L/S)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}} }, new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "ΔP BASE", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List(){ new Syncfusion.EJ2.Grids.GridColumn { Field = "FAS_DPB_DP" , Width = "90", Visible = false, HeaderText = "ΔP" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "FAS_DPB_TIGHT", Width = "90", Visible = false, HeaderText = "TIGHTNESS" , DefaultValue = "0.7", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, Edit = new { create = "TIGHT_Create", read = "TIGHT_Read", destory = "TIGHT_Destory", write = "TIGHT_Write" }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "FAS_DPB_FLRT" , Width = "90", Visible = false, HeaderText = "FLOW RATE (L/S)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}} }, new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "ACH BASE", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List(){ new Syncfusion.EJ2.Grids.GridColumn { Field = "FAS_ACH" , Width = "90", Visible = false, HeaderText = "ACH" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "FAS_ACH_FLRT", Width = "90", Visible = false, HeaderText = "FLOW RATE (L/S)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}} }, new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "100% F.A", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List(){ new Syncfusion.EJ2.Grids.GridColumn { Field = "FAS_FA_FLRT", Width = "110", Visible = false, HeaderText = "FLOW RATE (L/S)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}} }, new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "SELECT F.A AS E.A", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List(){ new Syncfusion.EJ2.Grids.GridColumn { Field = "FAS_FA_SELEC_FLRT", Width = "170", Visible = false, HeaderText = "FLOW RATE (L/S)" , DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}} }})">

(){ new Syncfusion.EJ2.Grids.GridColumn { Field = "AIR_FRESH" , Width = "90", Visible = false, HeaderText = "FRESH AIR (L/S)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "AIR_SUPPLY" , Width = "90", Visible = false, HeaderText = "SUPPLY AIR (L/S)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "AIR_RETURN" , Width = "90", Visible = false, HeaderText = "RETURN AIR (L/S)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}, new Syncfusion.EJ2.Grids.GridColumn { Field = "AIR_OV_PRS" , Width = "90", Visible = false, HeaderText = "OVER-PRESSURE (L/S)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}, new Syncfusion.EJ2.Grids.GridColumn { Field = "AIR_EXHAUST" , Width = "90", Visible = false, HeaderText = "EXHAUST AIR (L/S)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}, new Syncfusion.EJ2.Grids.GridColumn { Field = "AIR_EXHAUST_CHK" , Width = "90", Visible = false, HeaderText = "SELECT F.A AS E.A" , DefaultValue = "N", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Edit = new { create = "SEL_FA_Create", read = "SEL_FA_Read", destory = "SEL_FA_Destory", write = "SEL_FA_Write" }} }}, new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "SPACE HEAT LOAD" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List(){ new Syncfusion.EJ2.Grids.GridColumn { Field = "SHL_CSLW", Width = "90", Visible = false, HeaderText = "COOLING SENSIBLE LOAD(Watt)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "SHL_CLLW", Width = "90", Visible = false, HeaderText = "COOLING LATENT LOAD(Watt)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "SHL_HSLW", Width = "90", Visible = false, HeaderText = "HEATING SENSIBLE LOAD(Watt)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "SHL_HLLW", Width = "90", Visible = false, HeaderText = "HEATING LATENT LOAD(Watt)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }} }}, new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "PLUMBING FIXTURE" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List(){ new Syncfusion.EJ2.Grids.GridColumn { Field = "PF_VALV_WC" , Width = "90", Visible = false, HeaderText = "WATER CLOSET (FLUSH VALVE)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "PF_TANK_WC" , Width = "90", Visible = false, HeaderText = "WATER CLOSET (FLUSH TANK)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "PF_FHPS" , Width = "90", Visible = false, HeaderText = "FAUCET/ HOSS BIBB/ PERENNIAL SPRAY" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "PF_URINAL" , Width = "90", Visible = false, HeaderText = "URINAL" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "PF_LAVATORY" , Width = "90", Visible = false, HeaderText = "LAVATORY" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "PF_SERVICE_SK" , Width = "90", Visible = false, HeaderText = "SERVICE SINK" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "PF_ABLUTION_TAP" , Width = "90", Visible = false, HeaderText = "ABLUTION TAP" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "PF_KITCHEN_SK" , Width = "90", Visible = false, HeaderText = "KITCHEN SINK" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "PF_DK_FOUNTAIN" , Width = "90", Visible = false, HeaderText = "DRINKING FOUNTAIN" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "PF_HUMIDIFIER" , Width = "90", Visible = false, HeaderText = "HUMIDIFIER" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "PF_E_WASHER" , Width = "90", Visible = false, HeaderText = "EYE WASHER" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "PF_E_WS" , Width = "90", Visible = false, HeaderText = "EYE WASH & SHOWER" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "PF_SHOWER" , Width = "90", Visible = false, HeaderText = "SHOWER" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { required = true }} }}, new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "INDOOR CONDITION", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List(){ new Syncfusion.EJ2.Grids.GridColumn { Field = "ID_COND_SUMM_DB", Width = "100", Visible = false, HeaderText = "SUMMER DB (°C)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "ID_COND_WNTR_DB", Width = "100", Visible = false, HeaderText = "WINTER DB (°C)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "ID_COND_RH" , Width = "100", Visible = false, HeaderText = "RH (%)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number = true }}, new Syncfusion.EJ2.Grids.GridColumn { Field = "ID_COND_AH" , Width = "100", Visible = false, HeaderText = "AH (kg/kg)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number = true }} }} })">

TaeWook Kang · Answer

function beforeBatchAdd(args) {
        let bldgNo = document.getElementById('BldgNo').value;
        if (bldgNo == "") args.cancel = true;


        args.defaultData["RM_SNO"] = bldgNo;
    }


function GridCreated() {


        //Grid Create
        var BLDGValue = document.getElementById("BLDG_NO").ej2_instances[0].itemData;
        var DataGrid = document.getElementById("DataInputGrid").ej2_instances[0];


        var BldgKey = (BLDGValue == null) ? null : BLDGValue.Key;
        DataGrid.dataSource = new ej.data.DataManager({
            url: "/HvacInform/HD_URL?BldgNm=" + BldgKey ,
            crudUrl: "/HvacInform/HD_CRUD?BldgNm=" + BldgKey ,
            adaptor: new ej.data.UrlAdaptor()
        });




        //Check Box Check Status
        var Sdata = { };
        $.ajax({
            url: "/HvacInform/HVACColumn",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify(Sdata),
            success: function (data) {


                //CheckBox
                for (var iCol = 0; iCol < data[0].length; iCol++) {
                    var columnName = data[0][iCol].COL_NM;
                    var columnUse = data[0][iCol].USE_AT;


                    var checkBox;
                    switch (columnName) {
                        case "10":
                            checkBox = document.getElementById("checkBD").ej2_instances[0];
                            checkBox.checked = true;
                            break;
                        case "20":
                            checkBox = document.getElementById("checkWL").ej2_instances[0];
                            checkBox.checked = true;
                            break;
                        case "30":
                            checkBox = document.getElementById("checkDW").ej2_instances[0];
                            checkBox.checked = true;
                            break;
                        case "40":
                            checkBox = document.getElementById("checkHD").ej2_instances[0];
                            checkBox.checked = true;
                            break;
                        case "50":
                            checkBox = document.getElementById("checkFA").ej2_instances[0];
                            checkBox.checked = true;
                            break;
                        case "60":
                            checkBox = document.getElementById("checkAB").ej2_instances[0];
                            checkBox.checked = true;
                            break;
                        case "70":
                            checkBox = document.getElementById("checkSL").ej2_instances[0];
                            checkBox.checked = true;
                            break;
                        case "80":
                            checkBox = document.getElementById("checkPL").ej2_instances[0];
                            checkBox.checked = true;
                            break;
                        case "90":
                            checkBox = document.getElementById("checkID").ej2_instances[0];
                            checkBox.checked = true;
                            break;
                    }
                }

                //Column
                let colList = [];
                for (var i = 1; i < data.length; i++) {
                    for (var iCol = 0; iCol < data[i].length; iCol++) {


                        var CNT = data[i][iCol].CNT;
                        var USE_AT = data[i][iCol].USE_AT;
                        var COL_NM = data[i][iCol].COL_NM;
                        var HAS_Child = data[i][iCol].HAS_CHILD;


                        if (HAS_Child == "0") {
                            var column = DataGrid.getColumnByField(COL_NM);


                            if (USE_AT == 1) {
                                colList.push(column.field);
                                if (CNT < 3) {
                                    column.width = "200px";
                                }
                            }
                        }
                    }
                }
                DataGrid.showColumns(colList, 'field');
                isFlag = 1;
            }
        });
    }

TaeWook Kang · Answer

---<script>

 function cellSave(args) {
        let rowData = args.rowData;
        let cellValue = args.value;
        let bldgNo = document.getElementById('BldgNo').value;
        switch (args.columnName) {
            case "ROOM_NO":
                if (args.previousValue != args.value) {
                    let calValue = rowData["RM_SNO"];
                    if (calValue != null || calValue != "") {
                        let result = bldgNo + "-" + cellValue;
                        var rowIndex = this.getRowInfo(args.cell.closest('tr')).rowIndex;
                        this.updateCell(rowIndex, "RM_SNO", result);
                    }
                }


                break;
        }
    }

TaeWook Kang · Answer

#region HVAC Url / CRUD //HVAC DataSource public ActionResult HD_URL([FromBody] DataManagerRequest dm, string BldgNm) { HvacInformModel model = new HvacInformModel() { BLDG_SNO = BldgNm }; List list = HvacInformModel.GetHVACList(model); int listCnt = list.Count; return dm.RequiresCounts ? Json(new { result = list, count = listCnt }) : Json(list); } //HVAC Data Update public ActionResult HD_CRUD([FromBody] CRUDModel value, string BldgNm) { bool resultCRUD = false; string[] arrBldg = BldgNm.Split('-'); HvacInformModel model = new HvacInformModel(); foreach (HvacInformModel add in value.Added) { model = new HvacInformModel() { RM_SNO = BldgNm + "-" + add.ROOM_NO, JOB_NO = arrBldg[0], REV_NO = int.Parse(arrBldg[1]), BLDG_SNO = BldgNm, ROOM_NO = add.ROOM_NO, AIR_SYS_NM = add.AIR_SYS_NM, RM_NM = add.RM_NM, RM_AREA = add.RM_AREA, RM_WIDTH = add.RM_WIDTH, RM_LGTH = add.RM_LGTH, RM_CLG_HGT = add.RM_CLG_HGT, RM_FULL_HGT = add.RM_FULL_HGT, RM_VOL = add.RM_VOL, RM_NO_OF_OCC = add.RM_NO_OF_OCC, OWL_E = add.OWL_E, OWL_N = add.OWL_N, OWL_W = add.OWL_W, OWL_S = add.OWL_S, OWA_E = add.OWA_E, OWA_N = add.OWA_N, OWA_W = add.OWA_W, OWA_S = add.OWA_S, DOOR_QTY_N = add.DOOR_QTY_N, DOOR_QTY_E = add.DOOR_QTY_E, DOOR_QTY_S = add.DOOR_QTY_S, DOOR_QTY_W = add.DOOR_QTY_W, WIN_QTY_N = add.WIN_QTY_N, WIN_QTY_E = add.WIN_QTY_E, WIN_QTY_S = add.WIN_QTY_S, WIN_QTY_W = add.WIN_QTY_W, HD_ELTR_WT = add.HD_ELTR_WT, HD_ELTR_WT_AREA = add.HD_ELTR_WT_AREA, HD_ISTRM_WT = add.HD_ISTRM_WT, HD_ISTRM_WT_AREA = add.HD_ISTRM_WT_AREA, HD_TC_WT = add.HD_TC_WT, HD_TC_WT_AREA = add.HD_TC_WT_AREA, HD_ETC_WT = add.HD_ETC_WT, HD_ETC_WT_AREA = add.HD_ETC_WT_AREA, HD_TOTAL_WT = add.HD_TOTAL_WT, HD_TOTAL_WT_AREA = add.HD_TOTAL_WT_AREA, FAS_OB_OCC_UTFL = add.FAS_OB_OCC_UTFL, FAS_OB_OCC_FLRT = add.FAS_OB_OCC_FLRT, FAS_AB_UTFL = add.FAS_AB_UTFL, FAS_AB_FLRT = add.FAS_AB_FLRT, FAS_FUB_TILT_UNFW = add.FAS_FUB_TILT_UNFW, FAS_FUB_TILT_FLRT = add.FAS_FUB_TILT_FLRT, FAS_FUB_SHW_UNFW = add.FAS_FUB_SHW_UNFW, FAS_FUB_SHW_FLRT = add.FAS_FUB_SHW_FLRT, FAS_DPB_DP = add.FAS_DPB_DP, FAS_DPB_TIGHT = add.FAS_DPB_TIGHT, FAS_DPB_FLRT = add.FAS_DPB_FLRT, FAS_ACH = add.FAS_ACH, FAS_ACH_FLRT = add.FAS_ACH_FLRT, FAS_FA_FLRT = add.FAS_FA_FLRT, FAS_FA_SELEC_FLRT = add.FAS_FA_SELEC_FLRT, AIR_FRESH = add.AIR_FRESH, AIR_SUPPLY = add.AIR_SUPPLY, AIR_RETURN = add.AIR_RETURN, AIR_OV_PRS = add.AIR_OV_PRS, AIR_EXHAUST = add.AIR_EXHAUST, AIR_EXHAUST_CHK = add.AIR_EXHAUST_CHK, SHL_CSLW = add.SHL_CSLW, SHL_CLLW = add.SHL_CLLW, SHL_HSLW = add.SHL_HSLW, SHL_HLLW = add.SHL_HLLW, PF_VALV_WC = add.PF_VALV_WC, PF_TANK_WC = add.PF_TANK_WC, PF_FHPS = add.PF_FHPS, PF_URINAL = add.PF_URINAL, PF_LAVATORY = add.PF_LAVATORY, PF_SERVICE_SK = add.PF_SERVICE_SK, PF_ABLUTION_TAP = add.PF_ABLUTION_TAP, PF_KITCHEN_SK = add.PF_KITCHEN_SK, PF_DK_FOUNTAIN = add.PF_DK_FOUNTAIN, PF_HUMIDIFIER = add.PF_HUMIDIFIER, PF_E_WASHER = add.PF_E_WASHER, PF_E_WS = add.PF_E_WS, PF_SHOWER = add.PF_SHOWER, PC_WALL_AREA = add.PC_WALL_AREA, PC_AES = add.PC_AES, PC_AL = add.PC_AL, PC_QR = add.PC_QR, PC_V = add.PC_V, PC_SF = add.PC_SF, ID_COND_SUMM_DB = add.ID_COND_SUMM_DB, ID_COND_WNTR_DB = add.ID_COND_WNTR_DB, ID_COND_RH = add.ID_COND_RH, ID_COND_AH = add.ID_COND_AH, ID_COND_ZONE = add.ID_COND_ZONE }; resultCRUD = HvacInformModel.HVACDML(model, "I"); } foreach (HvacInformModel update in value.Changed) { model = new HvacInformModel() { RM_SNO = update.RM_SNO, ROOM_NO = update.ROOM_NO, AIR_SYS_NM = update.AIR_SYS_NM, RM_NM = update.RM_NM, RM_AREA = update.RM_AREA, RM_WIDTH = update.RM_WIDTH, RM_LGTH = update.RM_LGTH, RM_CLG_HGT = update.RM_CLG_HGT, RM_FULL_HGT = update.RM_FULL_HGT, RM_VOL = update.RM_VOL, RM_NO_OF_OCC = update.RM_NO_OF_OCC, OWL_E = update.OWL_E, OWL_N = update.OWL_N, OWL_W = update.OWL_W, OWL_S = update.OWL_S, OWA_E = update.OWA_E, OWA_N = update.OWA_N, OWA_W = update.OWA_W, OWA_S = update.OWA_S, DOOR_QTY_N = update.DOOR_QTY_N, DOOR_QTY_E = update.DOOR_QTY_E, DOOR_QTY_S = update.DOOR_QTY_S, DOOR_QTY_W = update.DOOR_QTY_W, WIN_QTY_N = update.WIN_QTY_N, WIN_QTY_E = update.WIN_QTY_E, WIN_QTY_S = update.WIN_QTY_S, WIN_QTY_W = update.WIN_QTY_W, HD_ELTR_WT = update.HD_ELTR_WT, HD_ELTR_WT_AREA = update.HD_ELTR_WT_AREA, HD_ISTRM_WT = update.HD_ISTRM_WT, HD_ISTRM_WT_AREA = update.HD_ISTRM_WT_AREA, HD_TC_WT = update.HD_TC_WT, HD_TC_WT_AREA = update.HD_TC_WT_AREA, HD_ETC_WT = update.HD_ETC_WT, HD_ETC_WT_AREA = update.HD_ETC_WT_AREA, HD_TOTAL_WT = update.HD_TOTAL_WT, HD_TOTAL_WT_AREA = update.HD_TOTAL_WT_AREA, FAS_OB_OCC_UTFL = update.FAS_OB_OCC_UTFL, FAS_OB_OCC_FLRT = update.FAS_OB_OCC_FLRT, FAS_AB_UTFL = update.FAS_AB_UTFL, FAS_AB_FLRT = update.FAS_AB_FLRT, FAS_FUB_TILT_UNFW = update.FAS_FUB_TILT_UNFW, FAS_FUB_TILT_FLRT = update.FAS_FUB_TILT_FLRT, FAS_FUB_SHW_UNFW = update.FAS_FUB_SHW_UNFW, FAS_FUB_SHW_FLRT = update.FAS_FUB_SHW_FLRT, FAS_DPB_DP = update.FAS_DPB_DP, FAS_DPB_TIGHT = update.FAS_DPB_TIGHT, FAS_DPB_FLRT = update.FAS_DPB_FLRT, FAS_ACH = update.FAS_ACH, FAS_ACH_FLRT = update.FAS_ACH_FLRT, FAS_FA_FLRT = update.FAS_FA_FLRT, FAS_FA_SELEC_FLRT = update.FAS_FA_SELEC_FLRT, AIR_FRESH = update.AIR_FRESH, AIR_SUPPLY = update.AIR_SUPPLY, AIR_RETURN = update.AIR_RETURN, AIR_OV_PRS = update.AIR_OV_PRS, AIR_EXHAUST = update.AIR_EXHAUST, AIR_EXHAUST_CHK = update.AIR_EXHAUST_CHK, SHL_CSLW = update.SHL_CSLW, SHL_CLLW = update.SHL_CLLW, SHL_HSLW = update.SHL_HSLW, SHL_HLLW = update.SHL_HLLW, PF_VALV_WC = update.PF_VALV_WC, PF_TANK_WC = update.PF_TANK_WC, PF_FHPS = update.PF_FHPS, PF_URINAL = update.PF_URINAL, PF_LAVATORY = update.PF_LAVATORY, PF_SERVICE_SK = update.PF_SERVICE_SK, PF_ABLUTION_TAP = update.PF_ABLUTION_TAP, PF_KITCHEN_SK = update.PF_KITCHEN_SK, PF_DK_FOUNTAIN = update.PF_DK_FOUNTAIN, PF_HUMIDIFIER = update.PF_HUMIDIFIER, PF_E_WASHER = update.PF_E_WASHER, PF_E_WS = update.PF_E_WS, PF_SHOWER = update.PF_SHOWER, PC_WALL_AREA = update.PC_WALL_AREA, PC_AES = update.PC_AES, PC_AL = update.PC_AL, PC_QR = update.PC_QR, PC_V = update.PC_V, PC_SF = update.PC_SF, ID_COND_SUMM_DB = update.ID_COND_SUMM_DB, ID_COND_WNTR_DB = update.ID_COND_WNTR_DB, ID_COND_RH = update.ID_COND_RH, ID_COND_AH = update.ID_COND_AH, ID_COND_ZONE = update.ID_COND_ZONE }; resultCRUD = HvacInformModel.HVACDML(model, "U"); } foreach (HvacInformModel del in value.Deleted) { model = new HvacInformModel() { RM_SNO = del.RM_SNO }; resultCRUD = HvacInformModel.HVACDML(model, "D"); } model = new HvacInformModel() { BLDG_SNO = BldgNm }; List list = HvacInformModel.GetHVACList(model); string msg = (resultCRUD) ? "Success CRUD" : "Failed CRUD"; return Json(list); } #endregionpublic ActionResult HVACColumn() { string UserEmail = HttpContext.User.FindFirstValue("Email"); List

Pavithra Subramaniyam · Answer

Hi TaeWook Kang, 
 
Thanks for contacting Syncfusion support. 
 
We suspect that the reported issue is due to the changes in grid column inside an ajax success handler which is asynchronous. So, the Grid columns will be changed after the Grid rendering and the Grid header ignore these changes. This causes the header misalignment in your Grid. To overcome this, we suggest you refresh the Grid header by calling the “headerRefresh” method after showing the column while initial rendering. 
 
In the below sample code, we have refreshed the header inside the “dataBound” event after the column changes. 
 




function dataBound() { 
    if (flag) { 
      // Use flag to avoid multiple refreshing 
      flag = false; 
      DataGrid.refreshHeader(); 
    } 
  } 
  function GridCreated() { 
    DataGrid.showColumns(colList, 'field'); 
    flag = true; 
  } 
 
 
 
API        : https://ej2.syncfusion.com/javascript/documentation/api/grid/#databound 
                https://ej2.syncfusion.com/javascript/documentation/api/grid/#refreshheader 
 
Please get back to us if you need further assistance on this. 
 
Regards, 
Pavithra S

TaeWook Kang · Answer

thank you for answer.i tried your code. but, i couldn't solve it.Your answer said that GridHeader appears to be wrong.But, the grid header size is the width I set, and the cell below is different.Could you please check this part again?Below is the error when I add as you said.Thank and regards.

Pavithra Subramaniyam · Answer

Hi TaeWook, 
 
To overcome the reported scenario, we suggest you call the “refreshColumns” method inside the created event as shown in below code example. 
 




var flag = true; 
function GridCreated() { 
        var DataGrid = document.getElementById("DataInputGrid").ej2_instances[0]; 
     
    if (flag) { 
        DataGrid.dataSource = new ej.data.DataManager({ 
            url: "/Home/HD_URL", 
            adaptor: new ej.data.UrlAdaptor() 
        }); 
        //Check Box Check Status 
        var Sdata = {}; 
        var ajax = new ej.base.Ajax({ 
            url: "/Home/HVACColumn", 
            type: "POST", 
            contentType: "application/json", 
            data: JSON.stringify(Sdata) 
        }); 
        ajax.onSuccess = function (data) { 
            //Column 
            let colList = []; 
            DataGrid.columnModel.filter((e) => { colList.push(e.field) }); 
 
            DataGrid.showColumns(colList, 'field'); 
            flag = false; 
            DataGrid.refreshColumns(); 
             
            isFlag = 1; 
        }; 
        ajax.send(); 
    } 
    } 
 
API: https://ej2.syncfusion.com/javascript/documentation/api/grid/#refreshcolumns 
 
Please get back to us if you need further assistance on this. 
 
Regards, 
Pavithra S