hellow
i have one igGrid table, with datasource is in a server
my Grid show the data all right, but;
1.- i can't update valors in a server,
2.- when i press add row.. nothing
3.- when i click in a row, this row change her state to, editing, is ok, but in the 3º colum, the URL, i want listbox no textbox
I do not want to write and edit in the 3rd column only in the third column, I would like to appear a listbox with values from another table, eg value = column1, Name = "column2"
that only can select the various URL's in the database, and keep the value, then using the value field, to save the ID so the URL i not the text itself
can help me please?
my code is:
CONTROLER:<textarea cols="70" rows="10" readonly style="background-color:transparent; font-weight:bold; border:none">
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using ECOMMERCE_API.Code;using ECOMMERCE_API.Models;using ECOMMERCE_API.Funciones;
namespace ECOMMERCE_API.Controllers{ public class AdminController : Controller { public List<SQLDateModel> Data { get; set; } public List<ProcessingData> Tablas { get; set; } // GET: Admin public ActionResult Index() { if (AdminModel.IsLogged == false) { return RedirectToAction("LoginAdmin", "Home"); }
var NewVista = new ProcessingData();
NewVista.CreateTablaUsers();
return View(); }
}
</textarea>MODEL:<textarea cols="70" rows="10" readonly style="background-color:transparent; font-weight:bold; border:none">
</textarea>
AND THE WEB CODE IS:
LAYOUT:<textarea cols="70" rows="10" readonly style="background-color:transparent; font-weight:bold; border:none">
using System;
namespace ECOMMERCE_API.Models{ public class AdminModel { //Datos de acceso public static string User { get; set; } public static string Pass { get; set; } public static string LogInOk { get; set; } //Control de acceso public static bool IsLogged { get; set; } public static string MsgLogin { get; set; } }
public class SQLAdminModel { public string Admin { get; set; } public string Pass { get; set; } }
public class SQLDateModel { public Guid Unicod { get; set; } public string Url { get; set; } //Datos del grid public static string Lista { get; set; }
} public class SQLUserModel { public Guid Unicod { get; set; } public string User { get; set; } public string Pass { get; set; } public string Url { get; set; } //Datos del grid public static string Consulta { get; set; } public static string Tabla { get; set; } }
public class SQLURLModel { public static Guid Unicod { get; set; } public static string Url { get; set; } //Datos del grid public static string Consulta { get; set; } public static string Tabla { get; set; } }
public class SQLUpdateModel { public static Guid Unicod { get; set; } public static string User { get; set; } public static string Pass { get; set; } public static string Url { get; set; } }}
METAS <textarea cols="70" rows="10" readonly style="background-color:transparent; font-weight:bold; border:none">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>@ViewBag.Title</title>@*<!-- Ignite UI Required Combined CSS Files --><link href="~/CSS/themes/infragistics/infragistics.theme.css" rel="stylesheet" /><link href="~/CSS/structure/infragistics.css" rel="stylesheet" /><!-- Ajax & Jquery Required Combined JavaScript Files --><script src="~/scripts/modernizr-2.8.3.js"></script><script src="~/scripts/jquery-1.9.1.min.js"></script><script src="~/scripts/jquery-ui.min.js"></script><!-- Ignite UI Required Combined JavaScript Files --><script src="~/Js/infragistics.core.js"></script><script src="~/Js/infragistics.lob.js"></script>*@
<!-- Ignite UI Required Combined CSS Files --><link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /><link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script><!-- Ignite UI Required Combined JavaScript Files --><script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.core.js"></script><script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.lob.js"></script><script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<!-- Ignite UI Loader JavaScript File --><script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.loader.js"></script>
<!-- CSS CREADOS --><!-- Para Administracion --><link href="~/CSS/Admin/Index.css" rel="stylesheet" /><!-- Para Home --><link href="~/CSS/Home/LoginAdmin.css" rel="stylesheet" /><!-- Para Vistas Compartidas --><link href="~/CSS/Shared/_Footer.css" rel="stylesheet" /><link href="~/CSS/Shared/_Header.css" rel="stylesheet" /><link href="~/CSS/Shared/_Layout.css" rel="stylesheet" /><link href="~/CSS/Shared/Error.css" rel="stylesheet" /><link href="~/CSS/Shared/Lockout.css" rel="stylesheet" />
HEADER<textarea cols="70" rows="10" readonly style="background-color:transparent; font-weight:bold; border:none">
@{ Layout = null;}
<div id="login"> @if (ECOMMERCE_API.Models.AdminModel.IsLogged == true) { <div id="DivTituloWeb"> <h1 id="Titulo">@ViewBag.Title</h1> </div> <div id="container_menu"> <ul id="main_menu"> <li id="mi_who"><a href="/Admin/Index">Gestión de usuarios</a></li> <li id="mi_who"><a href="/Admin/ListUrl">Gestión de url</a></li> </ul> </div> <div id="LogOut"> <a id="ColorLoginSalir" href="/Home/LogOut">Salir</a> </div> } else { <div id="LogOut"><a id="ColorLoginSalir" href="/Home/LoginAdmin">Login</a></div> } <div style="clear:both"></div></div>
AND THE VIEW
INDEX<textarea cols="70" rows="10" readonly style="background-color:transparent; font-weight:bold; border:none">
@{ ViewBag.Title = "Gestión de Usuarios APP";}<div id="divUserTable"> <table id="UserTable"></table> @*<script src="http://www.igniteui.com/data-files/nw-products.js"></script> <script type="text/javascript" src="ig_ui/js/infragistics.loader.js"></script> <script src="scripts/jquery.min.js" type="text/javascript"></script> <script src="~/JS/infragistics.js" type="text/javascript"></script> <style src="~/CSS/infragistics" type="text/css"></style> <script src="scripts/ig_ui/js/modules/infragistics.ui.grid.updating.js" type="text/javascript"></script>*@
<script> //$.ig.loader({ // scriptPath: "{IG Resources root}/js/", // cssPath: "{IG Resources root}/css/", // resources: "igGrid.Updating" //});
var Produc =@Html.Raw(ECOMMERCE_API.Models.SQLUserModel.Consulta) $(function () { $("#UserTable").igGrid({ primaryKey: "uniCODOBJ", columns: [ @Html.Raw(ECOMMERCE_API.Models.SQLUserModel.Tabla)], dataSource: Produc, dataSourceType: "json", width: '100%', tabIndex: 1, autofitLastColumn: false, autoGenerateColumns: false, applySortedColumnCss: false, renderCheckboxes: true, responseDataKey: "results", autoCommit: false, allowGroupBy: false, features: [ { name: "Sorting", sortingDialogContainment: "window" }, { name: "Selection" }, { name: "Paging", pageSize: 10 }, { name: "Resizing" }, { name: "Filtering", type: "local" }, { name: "Updating", enableAddRow: true, editMode: "row", enableDeleteRow: true, generatePrimaryKeyValue: function (evt, ui) { ui.value = getTempKey(); }, columnSettings: [ { columnKey: "uniCODOBJ", editorOptions: { readOnly:true } }, { columnKey: "Usuario", editorOptions: { type: "string", disabled: false } }, { columnKey: "Password", editorOptions: { type: "string", disabled: false } }, { columnKey: "Url", editorOptions: { type: "igCombo", disabled: false , dataSource: "json"} }, ] } ] }); });
$("#saveChanges").bind({ click: function (e) { $("#UserTable").igGrid("saveChanges"); } });
function saveChanges(){ alert("hola"); }
var updates, customersLookup = [], loadingIndicator; $(function () { var grid = $("#UserTable"), comboDataSource = {}; //comboDataSource = grid.data("igGridUpdating").options.columnSettings[3].editorOptions.dataSource; comboDataSource = @Html.Raw(ECOMMERCE_API.Models.SQLDateModel.Lista); for (var i = 0; i < comboDataSource.length; i++) { customersLookup[comboDataSource[i].ID] = comboDataSource[i]; }
$("#saveChanges").igButton({ labelText: $("#saveChanges").val(), disabled: true }); $("#undo").igButton({ labelText: $("#undo").val(), disabled: true }); $("#redo").igButton({ labelText: $("#redo").val(), disabled: true });
//loadingIndicator = new GridModalLoadingIndicator(grid);
//grid.on("iggriddatabinding", function (e, args) { // loadingIndicator.show(); //});
//grid.on("iggriddatabound", function (e, args) { // loadingIndicator.hide(); //});
grid.on("iggridupdatingrowdeleted", function (e, args) { $("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); });
grid.on("iggridupdatingrowadded", function (e, args) { $("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); }); grid.on("iggridupdatingeditrowended", function (e, args) { if (args.update) { $("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); } }); $("#undo").on('igbuttonclick', function (e, args) { updates = $.extend({}, grid.data('igGrid').pendingTransactions()); $.each(updates, function (index, transaction) { grid.igGrid("rollback", transaction.rowId, true); });
$("#redo").igButton("option", "disabled", false); $("#undo").igButton("disable"); $("#saveChanges").igButton("disable");
return false; } );
$("#redo").on('igbuttonclick', function (e) { $.each(updates, function (index, transaction) { switch (transaction.type) { case "row": grid.igGridUpdating('updateRow', transaction.rowId, transaction.row, null,true); break; case "newrow": grid.igGridUpdating('addRow', transaction.row, true); break; case "deleterow": grid.igGridUpdating('deleteRow', transaction.rowId, true); break; }
}); $(this).igButton("disable"); $("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); } );
$("#saveChanges").on('igbuttonclick', function (e) { grid.igGrid("saveChanges", function saveSuccess() { //loadingIndicator.hide(); }); //loadingIndicator.show(); $("#undo").igButton("disable"); $(this).igButton("disable"); return false; } ); grid.on("iggridupdatingdatadirty", function (event, ui) { grid.igGrid("commit"); //saving local changes to the datasource when sorting return false; }); });
function lookupCustomer(id) { return customersLookup[id].CompanyName; } function getTempKey() { var key; key = new Guid(); return key; }
</script> @*<input type="button" id="saveChanges" value="Save Changes" />*@ <input type="button" id="saveChanges" class="button-style" value="Save Changes" /> <input type="button" id="undo" class="button-style" value="Undo" /> <input type="button" id="redo" class="button-style" value="Redo" /></div>
Please could you tell me where my mistake and as I could afford it? many thanks
Hello Carles,
Thank you for contacting Infragistics!
For the first two questions I see that you are not setting the updateUrl property of the grid, without that the grid will not know where to send data:
http://www.igniteui.com/help/api/2016.1/ui.iggrid#options:updateUrl
For your other question I recommend you look into the editor provider options of the column settings of the updating feature. With them you can set the type to combo and achieve editing with a dropdown list:
http://www.igniteui.com/help/api/2016.1/ui.iggridupdating#options:columnSettings.editorType
http://www.igniteui.com/help/api/2016.1/ui.iggridupdating#options:columnSettings.editorOptions
hi
Thank you so much for your helpbut ... I still can update, huh changed as you say code:
IN THE VIEW, INDEX,..
<textarea cols="270" rows="110" readonly style="background-color:transparent; font-weight:bold; border:none"><script>
//$.ig.loader({ // scriptPath: "{IG Resources root}/js/", // cssPath: "{IG Resources root}/css/", // resources: "igGrid.Updating" //}); //Initialize $(".selector").igGrid({ updateUrl : "/Update/Index" }); var Produc =@Html.Raw(ECOMMERCE_API.Models.SQLUserModel.Consulta) $(function () { comboDataSource = @Html.Raw(ECOMMERCE_API.Models.SQLDateModel.Lista); $("#UserTable").igGrid({ primaryKey: "uniCODOBJ", columns: [ @Html.Raw(ECOMMERCE_API.Models.SQLUserModel.Tabla)], dataSource: Produc, dataSourceType: "json", width: '100%', tabIndex: 1, autofitLastColumn: false, autoGenerateColumns: false, applySortedColumnCss: false, renderCheckboxes: true, responseDataKey: "results", autoCommit: false, allowGroupBy: false, features: [ { name: "Sorting", sortingDialogContainment: "window" }, { name: "Selection" }, { name: "Paging", pageSize: 10 }, { name: "Resizing" }, { name: "Filtering", type: "local" }, { name: "Updating", enableAddRow: true, editMode: "row", enableDeleteRow: true, generatePrimaryKeyValue: function (evt, ui) { ui.value = getTempKey(); }, columnSettings: [ { columnKey: "uniCODOBJ", editorOptions: { readOnly:true} }, { columnKey: "Usuario", editorOptions: { type: "string", disabled: false } }, { columnKey: "Password", editorOptions: { type: "string", disabled: false } }, { columnKey: "Url", editorType:"text", editorOptions: { buttonType:"dropdown", listItems: @Html.Raw(ECOMMERCE_API.Models.SQLDateModel.Lista), readOnly: true} }, ] } ] });
//Get var updateUrl = $(".selector").igGrid("option", "updateUrl"); var columnSettings = $("#UserTable").igGridUpdating("option", "columnSettings")[0].editorOptions; var addEnabled = $("#UserTable").igGridUpdating("option", "enableAddRow");
var updates, customersLookup = [], loadingIndicator; $(function () { var grid = $("#UserTable"), comboDataSource = {}; //comboDataSource = grid.data("igGridUpdating").options.columnSettings[3].editorOptions.dataSource; comboDataSource = @Html.Raw(ECOMMERCE_API.Models.SQLDateModel.Lista); for (var i = 0; i < comboDataSource.length; i++) { customersLookup[comboDataSource[i].uniCODOBJ] = comboDataSource[i].strURL; }
//loadingIndicator = new GridModalLoadingIndicator(grid); //grid.on("iggriddatabinding", function (e, args) { // loadingIndicator.show(); //}); //grid.on("iggriddatabound", function (e, args) { // loadingIndicator.hide(); //});
grid.on("iggridupdatingrowdeleted", function (e, args) { $("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); }); grid.on("iggridupdatingrowadded", function (e, args) { $("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); }); grid.on("iggridupdatingeditrowended", function (e, args) { if (args.update) { $("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); } });
$("#undo").on('igbuttonclick', function (e, args) { updates = $.extend({}, grid.data('UserTable').pendingTransactions()); $.each(updates, function (index, transaction) { grid.igGrid("rollback", transaction.rowId, true); });
$("#saveChanges").on('igbuttonclick', function (e) { grid.igGrid("saveChanges", function saveSuccess() { //loadingIndicator.hide(); }); //loadingIndicator.show(); $("#undo").igButton("disable"); $(this).igButton("disable"); return false; } ); grid.on("iggridupdatingdatadirty", function (event, ui) { grid.igGrid("commit"); //saving local changes to the datasource when sorting return false; }); //Set $("#UserTable").igGridUpdating("option", "enableAddRow", true); $("#UserTable").igGridUpdating("option", "columnSettings", columnSettings);
$("#saveChanges").bind({ click: function (e) { $("#UserTable").igGrid("saveChanges"); } }); });
function lookupCustomer(id) { return customersLookup[id].CompanyName; }
function getTempKey() { var key; return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { var r = Math.random()*16|0, v = c === 'x' ? r : (r&0x3|0x8); key = v.toString(16); return key; }); } });</script>
IN ROUTE CONFIG:
<textarea cols="270" rows="110" readonly style="background-color:transparent; font-weight:bold; border:none">
routes.MapRoute( name: "Update", url: "Update/Index", defaults: new { controller = "Update", action = "Index" } );
IN CONTROLER:
public ActionResult Index() { if (AdminModel.IsLogged == false) { return RedirectToAction("LoginAdmin", "Home"); }
AN THE UPDATE/INDEX only have a alert;
<script> $(function () { alert("Llege!!!!") });</script>
I tried it with a simplement alert to check that clicking on "save changes" get to the route update, I understand that later in this view'll have to pick up the data and SQL statements to run my "update", right ?because I can not jump me alert,I do not get get,I do not understand where my fault
i concerning the list do not understand is the "names" will understand where the values, but not as a value to indicate that I have, and want it to look text; example, the names of the options look, but when you save your id is saved
sometimes I've got I leave the drop-down list, but only ADDNEWROW, which are now, I can not get out (and that the option you have in the row is the default when changing
and when I get out I list always is empty, any idea why?