Ask Question

How to insert columns in spreadsheet Grid

Adam

asked at 19 Mar 2016

what would you use for datasource, a two-dimensional array ?

at 19 Mar 2016 Omu

Answers

here's an example (paste/merge it in the GridSpreadsheetDemo it reuses some js from there): <div class="bar"> <button type="button" class="awe-btn" id="addrow2">add row</button> <button type="button" class="awe-btn" onclick="awe.oc('addCol')">add column</button> </div> @Html.Awe().Grid("SpreadArrGrid").Url(Url.Action("MultiColGrid")).CssClass("spreadsh") @Html.Awe().InitCall("addCol").Url(Url.Action("AddColumn")).Success("utils.refreshGrid('SpreadArrGrid')") <script> function txtVal(i) { return function (model, name) { var val = model.Values[i]; if (!val) val = ""; //replace null with "" return "<input type='text' name='" + name + "' value='" + escapeChars(val) + "'/>"; }; } $(function () { $('#SpreadArrGrid').on('change', 'input', function () { var model = $(this).closest('.awe-row').data('model'); var col = parseInt($(this).attr("name")); var val = $(this).val(); model.Values[col] = val; $.post('@(Url.Action("SaveArr"))', { id: model.Id, col: col, value: val }, function (res) { if (!model.Values[0]) { model.Id = res.Id; $('#log').prepend('new record added id = ' + res.Id + ' \n'); } $('#log').prepend(val + ' saved \n'); }); }); $('#addrow2').on('click', add2); }); function add2() { var row = $('#SpreadArrGrid').data('api').renderRow({ Id: 0, Values:[] }); $('#SpreadArrGrid .awe-row:last').after(row); // insert the row row.find('input:first').focus(); } </script> controller: private static IList<List<string>> data = new List<List<string>>{ new List<string> { "Id", "Name", "Meal" }, new List<string> { "1", "Vincenzo", "Pizza" }, new List<string> { "2", "Ella", "French toast" }, new List<string> { "3", "Zazzles", "Pizza" }, new List<string> { "4", "Evan", "Banana" } }; private static int nextid = 5; public ActionResult AddColumn() { var header = data.First(); var name = "col" + header.Count; header.Add(name); for (var i = 1; i < data.Count; i++) { data[i].Add(string.Empty); } return Json(new { }); } public ActionResult SaveArr(int id, int col, string value) { if (id == 0) { id = nextid; nextid++; var newRow = new List<string> { id.ToString() }; for (var i = 1; i < data.Last().Count; i++) { newRow.Add(i == col ? value : string.Empty); } data.Add(newRow); return Json(new { Id = id }); } var exRow = data.SingleOrDefault(o => o[0] == id.ToString()); if (exRow == null) throw new Exception("edited row doesn't exist anymore"); exRow[col] = value; return Json(new { Id = id }); } public ActionResult MultiColGrid(GridParams g) { g.Paging = false; var columns = new List<Column>(); for (var i = 1; i < data[0].Count; i++) { columns.Add(new Column { Header = data[0][i], Bind = i.ToString(), ClientFormatFunc = "txtVal(" + i + ")" }); } var items = new List<GridArrayRow>(); for (var i = 1; i < data.Count; i++) { items.Add(new GridArrayRow { Id = data[i][0], Values = data[i].ToArray() }); } g.Columns = columns.ToArray(); var model = new GridModelBuilder<GridArrayRow>(items.AsQueryable(), g).Build(); return Json(model); } and css: .spreadsh .awe-row td { background: white; padding: 0; text-align: center; } .spreadsh input[type="text"] { width: 100%; margin: auto; border: none; padding: 5px; height: 27px; }
Omu

answered at 20 Mar 2016
- That looks fantastic! Only just ready your answer(s), apologies for missing your question. A two-dimensional array certainly works for demonstration purposes. Thanks again.
  
  at 22 Mar 2016 Adam

please Sign In to leave an answer