Change the class of a kendo ui cell -
i have grid on application.
@(html.kendo().grid<tekstenviewmodel.tekst>() .name("grid") .columns(columns => { columns.template(@<text></text>).clienttemplate("<input type='checkbox' class='checkbox' />").width(10); columns.bound(product => product.naam).width(100).clienttemplate("<div id='editdiv'><div class='inputdiv'><input id='naam' type='text' value='#=naam#' class='naaminput' ></div><div class='editordiv'><a class=\"meeracties iconbtn\" onclick=\"openpopupdemo('#: naam #', '#: id #', 'naam')\"></a></div></div>"); columns.bound(product => product.waarde).width(100).clienttemplate("<div id='editdiv'><div class='inputdiv'>#=waarde#</div><div class='editordiv'><a class=\"meeracties iconbtn\" onclick=\"openpopupdemo('#: waarde #', '#: id #', 'waarde')\"></a></div></div>"); columns.bound(product => product.opmerking).width(250).clienttemplate("<div id='editdiv'><div class='inputdiv'>#=opmerking#</div><div class='editordiv'><a class=\"meeracties iconbtn\" onclick=\"openpopupdemo('#: opmerking #', '#: id #', 'opmerking')\"></a></div></div>"); columns.template(@<text></text>).clienttemplate("<div id='editdiv'><div class='deletediv'><a class=\"delete iconbtn\" onclick=\"deleteresourceitem(#: id #, '#: naam #')\"></a></div></div>").title("").width(10); }) .pageable() .sortable() .filterable() .groupable() .navigatable() .editable(editable => editable.mode(grideditmode.incell).displaydeleteconfirmation(false)) .events(events => events.edit("onedit")).change("onchange")) .datasource(datasource => datasource .ajax() .batch(true) .model(model => { model.id(product => product.id); model.field(product => product.resource_set_id).defaultvalue(model.setid); model.field(product => product.type).defaultvalue(domain.agromilieu2.common.objects.entities.resources.resourcetype.global_resources); model.field(product => product.taal).defaultvalue(domain.agromilieu2.common.agromilieu2constants.resources.default_taal_code); }) .create(create => create.action(mvc.beheerteksten.actionnames.resourceitems_createupdate, mvc.beheerteksten.name)) .read(read => read.action(mvc.beheerteksten.actionnames.resourceitems_read, mvc.beheerteksten.name, new { setid = model.setid }).data("onreadadditionaldata")) .update(update => update.action(mvc.beheerteksten.actionnames.resourceitems_createupdate, mvc.beheerteksten.name)) .destroy(destroy => destroy.action(mvc.beheerteksten.actionnames.resourceitems_delete, mvc.beheerteksten.name)) ) ) i trying change class of input in first column specifying edit event in grid
.events(events => events.edit("onedit").change("onchange")) columns.bound(product => product.naam).width(100).clienttemplate("<div id='editdiv'><div class='inputdiv'><input id='naam' type='text' value='#=naam#' class='naaminput' ></div><div class='editordiv'><a class=\"meeracties iconbtn\" onclick=\"openpopupdemo('#: naam #', '#: id #', 'naam')\"></a></div></div>"); this event handlers.
function onedit(e) { $("input[name='naam']").toggleclass("naaminputedit"); } function onchange(e) { $("input[name='naam']").toggleclass("naaminput"); } these 2 classes.
#editdiv .naaminput { background: transparent; border: none; } #editdiv .naaminputedit { background: transparent; border: none; width: 500px; } and image of grid when click in input.
when click in input, nothing happens, if click anywhere in cell other in input, change other cells, except 1 click on.
here's example. clicked on first cell , changed second , others, matter.
what doing wrong? ideas??
please try below code snippet.
only edit function
edit: function (e) { alert($(e.container)); var row = $(e.container).closest("tr"); alert(row); var rowindex = $("tr", grid.tbody).index(row); alert(rowindex); var colidx = $("td", row).index($(e.container)); alert(colidx); var columname = e.sender.columns[colidx].field; alert(columname); e.container.find("[name='" + columname + "']").toggleclass('naaminput'); }, full page code
<!doctype html> <html> <head> <title>jayesh goyani</title> <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" /> <script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script> <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script> </head> <body> <div id="example"> <div id="grid"></div> <style> .naaminput { background: blue !important; border: none !important; } </style> <script> $(document).ready(function () { var crudservicebaseurl = "http://demos.telerik.com/kendo-ui/service", datasource = new kendo.data.datasource({ transport: { read: { url: crudservicebaseurl + "/products", datatype: "jsonp" }, update: { url: crudservicebaseurl + "/products/update", datatype: "jsonp" }, destroy: { url: crudservicebaseurl + "/products/destroy", datatype: "jsonp" }, create: { url: crudservicebaseurl + "/products/create", datatype: "jsonp" }, parametermap: function (options, operation) { if (operation !== "read" && options.models) { return { models: kendo.stringify(options.models) }; } } }, batch: true, pagesize: 20, schema: { model: { id: "productid", fields: { productid: { editable: false, nullable: true }, productname: { validation: { required: true } }, unitprice: { type: "number", validation: { required: true, min: 1 } }, discontinued: { type: "boolean" }, unitsinstock: { type: "number", validation: { min: 0, required: true } } } } } }); $("#grid").kendogrid({ datasource: datasource, navigatable: true, pageable: true, height: 550, edit: function (e) { var row = $(e.container).closest("tr"); var rowindex = $("tr", grid.tbody).index(row); var colidx = $("td", row).index($(e.container)); var columname = e.sender.columns[colidx].field; alert(columname); e.container.find("[name='" + columname + "']").toggleclass('naaminput'); }, toolbar: ["create", "save", "cancel"], columns: [ "productname", { field: "unitprice", title: "unit price", format: "{0:c}", width: 120 }, { field: "unitsinstock", title: "units in stock", width: 120 }, { field: "discontinued", width: 120 }, { command: "destroy", title: " ", width: 120 }], editable: true }); }); </script> </div> </body> </html> let me know if concern.
Comments
Post a Comment