JSFiddle - React, Tailwind, and code Playground

by Mark

HTML

<!-- This is code from Associate.cs Model-->
        public string GetAssociateFromDB()
        {
            DataTable dt = new DataTable();
            string jsonData;
            string connString = ConfigurationManager.ConnectionStrings["DEFCOMP"].ConnectionString;
            using (SqlConnection connection = new SqlConnection())
            {
                connection.ConnectionString = connString;
                using (var cmd = new SqlCommand("SELECT * FROM FUND", connection))
                {
                       connection.Open();
                       SqlDataAdapter myAdapter = new SqlDataAdapter(cmd);
                    myAdapter.Fill(dt);
                    System.Web.Script.Serialization.JavaScriptSerializer serializer = new JavaScriptSerializer();
                    var rows = new List<Dictionary<string, object>>();
                    Dictionary<string, object> row;
                    foreach (DataRow dr in dt.Rows)
                    {
                        row = new Dictionary<string, object>();
                        foreach (DataColumn col in dt.Columns)
                        {
                            row.Add(col.ColumnName, dr[col]);
                        }
                        rows.Add(row);
                    }

                   // var json = JsonConvert.SerializeObject(dt, Formatting.Indented);
                  //  jsonData = json;

                    System.Diagnostics.Debug.WriteLine(serializer);
                    return serializer.Serialize(rows);
                    
                }            
                
            }

           
        }

<!-- This gets returned to the Controller HomeController.cs-->
Public class HomeController : Controller { 

<!-- code omitted...-->

        public JsonResult GetJsonData()
        {
            Associate associate = new Associate();
            string jsonData = associate.GetAssociateFromDB();
            System.Diagnostics.Debug.WriteLine(jsonData);
     ...

CSS

/* this is the result set returned from jsonData */

[{"FUND_SEQ_ID":1,"FUND_ID":23,"FUND_NM":"INSTITUTIONAL MONEY MARKET FUND","FUND_TICKER_NM":"TINXX","FUND_SALARY_IND":"A","FUND_BONUS_IND":"N","FUND_ALCTN_IND":"\u0000","BEG_DT":"20140101","END_DT":"24000101"},
{"FUND_SEQ_ID":2,"FUND_ID":30,"FUND_NM":"LARGE CAP GROWTH FUND CLASS Y","FUND_TICKER_NM":"TIQIX","FUND_SALARY_IND":"A","FUND_BONUS_IND":"B","FUND_ALCTN_IND":"\u0000","BEG_DT":"20140101","END_DT":"24000101"},
{"FUND_SEQ_ID":3,"FUND_ID":34,"FUND_NM":"HIGH YIELD FUND CLASS Y","FUND_TICKER_NM":"THYYX","FUND_SALARY_IND":"N","FUND_BONUS_IND":"B","FUND_ALCTN_IND":"\u0000","BEG_DT":"20140101","END_DT":"24000101"},
{"FUND_SEQ_ID":4,"FUND_ID":41,"FUND_NM":"MID CAP GROWTH FUND CLASS Y","FUND_TICKER_NM":"TEGYX","FUND_SALARY_IND":"N","FUND_BONUS_IND":"B","FUND_ALCTN_IND":"\u0000","BEG_DT":"20140101","END_DT":"24000101"},
{"FUND_SEQ_ID":5,"FUND_ID":500,"FUND_NM":"EMERGING MARKETS EQUITY FUND CLASS Y","FUND_TICKER_NM":"TEMYX","FUND_SALARY_IND":"A","FUND_BONUS_IND":"B","FUND_ALCTN_IND":"\u0000","BEG_DT":"20140101","END_DT"
:"24000101"},{"FUND_SEQ_ID":6,"FUND_ID":502,"FUND_NM":"MID CAP VALUE FUND CLASS Y","FUND_TICKER_NM":"TCVYX","FUND_SALARY_IND":"N","FUND_BONUS_IND":"B","FUND_ALCTN_IND":"\u0000","BEG_DT":"20140101","END_DT":"24000101"}]

JavaScript

$("#grid").jqGrid({
                url: '@Url.Action("GetJsonData", "Home")',
                datatype: "json",
                loadonce: true,
                width: '100%',
                colNames: ["seqid", "fundid", "name", "ticker", "salary", "bonus", "allocation", "begin", "end"],
                colModel: [
                        { name: "FUND_SEQ_ID" },
                        { name: "FUND_ID" },
                        { name: "FUND_NM" },
                        { name: "FUND_TICKER_NM" },
                        { name: "FUND_SALARY_IND" },
                        { name: "FUND_BONUS_IND" },
                        { name: "FUND_ALCTN_IND" },
                        { name: "BEG_DT" },
                        { name: "END_DT" }
                    ],
                cmTemplate: { editable: true },
                gridview: true,
                autoencode: true,
                rowNum: 10,
                rowList: [10, 20, 30],
                viewrecords: true,
                pager: '#pager',
                'cellEdit': true,
                'cellsubmit': 'clientArray',
                editurl: 'clientArray'

                loadError: function (jqXHR, textStatus, errorThrown) {
                    alert('HTTP status code: ' + jqXHR.status + '\n' +
                               'textStatus: ' + textStatus + '\n' +
                                'errorThrown: ' + errorThrown);
                    alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);

}
    /*            beforeProcessing: function (data) {
                if (!data.SUCCESS) {
                    // error response. we set empty "DATA"
                    data.DATA = { TOTAL: 0, PAGE: 0, ROWS: [] };

                    // now the data.ERRORS should be processed
                alert(data.ERRORS.join(','));
                }
            }  */

            });

//                for(var i=0; i<mydata.length;i++)
//               ...