15.2-pre .i want when click cancel row edit btn inline edit in row grid show event or call function for show mesasge .but when click Does not do anything.
plase see demo demo link
$('div[id^="jCancelButton"]').click(function () {
alert('test')
checkCrudGrid();
});
If I correctly understand your question then you can use afterRestore callback of actionsNavOptions
actionsNavOptions: {
afterRestore: function (rowid) {
alert("editing of the row with rowid=" +
rowid + " is canceled");
}
}
or jqGridInlineAfterRestoreRow event handler. See https://jsfiddle.net/OlegKi/dnfk8hmr/322/.
Additionally I'd recommend you don't use any old "-pre" versions. The version "15.2-pre" is some version after an official version 15.1. Moreover, one have to specify the date of "-pre" version. For example, the current code on GitHub today have the version number "jqGrid 4.15.5-pre" and "Date: 2018-04-21". If I would make some changes in the code then I would change the date to "Date: 2018-05-06" without changing the name of preliminary version "4.15.5-pre". After publishing the new version it will be "4.15.5". During the next changes after the release I will change the version to the next "-pre" version - "4.15.6-pre" or "4.16.0-pre".
Related
I have an Interactive Grid on my page and I want to add a button to a toolbar. I have wrote a javascript function and tried to add the code under Advanced->Javascript. But when I did that my grid content disappeared completely, only heading was left. Is that the wrong place to add my code? How to ensure the function gets called?
Below is my function:
function(config) {
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
toolbarGroup = toolbarData.toolbarFind("actions3"); // group where Add Row button is
toolbarGroup.controls.push({type: "BUTTON",
action: "selection-delete"
});
config.toolbarData = toolbarData;
return config;
}
I do not know why, but this problem occurs when you use this code in a detail of an interactive grid.
The problem is solved when you put the code in both the reports, the master and the detail.
The problem is that the function "toolbarFind" is deprecated or just removed in current version. Try:
toolbarGroup = toolbarData[toolbarData.length-2];
Does anyone know of a way to trigger the editing of a row just by clicking the row?
I would like to see the same functionality that I see when I click an edit command button, but triggered by selecting the row.
You can add this to your change event for your grid:
myGrid.setOptions({
editable: {
mode: "inline"
},
change: function(){
this.editRow(this.select());
}
});
I know this is an old question, but I just had need for a solution and this is what worked for me. I wanted to use double-click, but the click event should also work.
var grid = $('#grid').data('kendoGrid');
$('#grid .k-grid-content table').on(
'dblclick',
'tr',
function () { grid.editRow($(this)); }
);
The selector ("#grid .k-grid-content table") works for my current configuration (mainly I have virtual scrolling turned on) and so may need to be adjusted for your specific situation.
onKeyPress() event work fine when Grid has row in DhtmlxGrid. But when Grid is empty, event is not getting fire.
My code is :
grd.attachEvent("onKeyPress", ongrdInsert);
function ongrdInsert(nKeyCode,Ctrl,Shift,Event)
{
if (40 == nKeyCode)
{
alert("ongrdInsert");
}
}
Your issue is confirmed and fixed. If you have active support subscription, you may open a ticket at support.dhtmlx.com to get the fix. Also it will be included in the next dhtmlxGrid release.
I am using Kendo grid with pop up editing mode and editor template.
The editor template consists of a kendo drop down list which is bind through the database and i have inserted the optional label value ie "--select--" at run time in controller which works good for add method but for update method it is not autoselecting the "--select value--" and on click value is selected at second hit. Please help if anyone has any solution to this.
Edited: Please find the below code snippet for my drop down list.
#(Html.Kendo().DropDownList().Name("Type")
.DataTextField("Value")
.DataValueField("TypeID")
.DataSource(source =>
{
source.Read(read => { read.Action("Action Name", "Controller name"); });
})
)
// Controller code for binding drop down list
[AllowAnonymous]
public ActionResult GetTypes()
{
//my code to get list of types from db in object "Type"
Type.Insert(0, new TypeModel() { Value = "--Select--", TypeID = Guid.Empty });
return Json(Type, JsonRequestBehavior.AllowGet);
}
As you said in comment section, Kendo UI 2015 Q1 comes with some new features for dropdown family widget e.g autocomplete, dropdown, multiselect, etc and it also has some bug on it.
So its not your fault that the dropdown won't recognize on the first select event.
The developer had fixed this issue and release a service pack for this, therefore all you have to do is upgrade or downgrade your Kendo UI version..
See this dojo where the grid's filter doesn't work for the first time selection
and if you downgrade its version or upgrade it, it will works fine like in this dojo
Kendo UI 2015 Q1 SP1 Release History, you will see on DropDown section that the issue have been fixed..
I have ~400 elements on a page that have click events tied to them (4 different types of buttons with 100 instances of each, each type's click events performing the same function but with different parameters).
I need to minimize any impacts on performance that this may have. What kind of performance hit am I taking (memory etc) by binding click events to each of these individually (using JQuery's bind())? Would it be more efficient to have an inline onclick calling the function on each button instead?
Edit for clarification :):
I actually have a table (generated using JQGrid) and each row has data columns followed by 4 icon 'button' columns- delete & three other business functions that make AJAX calls back to the server:
|id|description|__more data_|_X__|_+__|____|____|
-------------------------------------------------
| 1|___data____|____data____|icon|icon|icon|icon|
| 2|___data____|____data____|icon|icon|icon|icon|
| 3|___data____|____data____|icon|icon|icon|icon|
| 4|___data____|____data____|icon|icon|icon|icon|
I am using JQGrid's custom formatter (http://www.trirand.com/jqgridwsiki/doku.php?id=wiki:custom_formatter) to build the icon 'buttons' in each row (I cannot retrieve button HTML from server).
It is here in my custom formatter function that I can easily just build the icon HTML and code in an inline onclick calling the appropriate functions with the appropriate parameters (data from other columns in that row). I use the data in the row columns as parameters for my functions.
function removeFormatter(cellvalue, options, rowObject) {
return "<img src='img/favoritesAdd.gif' onclick='remove(\"" + options.rowId + "\")' title='Remove' style='cursor:pointer' />";
}
So, I can think of two options:
1) inline onclick as I explained above
--or--
2) delegate() (as mentioned in below answers (thank you so much!))
Build the icon image (each icon type has its own class name) using the custom formatter.Set the icon's data() to its parameters in the afterInsertRow JQGrid event. Apply the delegate() handler to buttons of specific classes (as #KenRedler said below)
> $('#container').delegate('.your_buttons','click',function(e){
> e.preventDefault();
> var your_param = $(this).data('something'); // store your params in data, perhaps
> do_something_with( your_param );
> }); //(code snippet via #KenRedler)
I'm not sure how browser-intensive option #2 is I guess...but I do like keeping the Javascript away from my DOM elements :)
Because you need not only a general solution with some container objects, but the solution for jqGrid I can suggest you one more way.
The problem is that jqGrid make already some onClick bindings. So you will not spend more resources if you just use existing in jqGrid event handler. Two event handler can be useful for you: onCellSelect and beforeSelectRow. To have mostly close behavior to what you currently have I suggest you to use beforeSelectRow event. It's advantage is that if the user will click on one from your custom buttons the row selection can stay unchanged. With the onCellSelect the row will be first selected and then the onCellSelect event handler called.
You can define the columns with buttons like following
{ name: 'add', width: 18, sortable: false, search: false,
formatter:function(){
return "<span class='ui-icon ui-icon-plus'></span>"
}}
In the code above I do use custom formatter of jqGrid, but without any event binding. The code of
beforeSelectRow: function (rowid, e) {
var iCol = $.jgrid.getCellIndex(e.target);
if (iCol >= firstButtonColumnIndex) {
alert("rowid="+rowid+"\nButton name: "+buttonNames[iCol]);
}
// prevent row selection if one click on the button
return (iCol >= firstButtonColumnIndex)? false: true;
}
where firstButtonColumnIndex = 8 and buttonNames = {8:'Add',9:'Edit',10:'Remove',11:'Details'}. In your code you can replace the alert to the corresponding function call.
If you want select the row always on the button click you can simplify the code till the following
onCellSelect: function (rowid,iCol/*,cellcontent,e*/) {
if (iCol >= firstButtonColumnIndex) {
alert("rowid="+rowid+"\nButton name: "+buttonNames[iCol]);
}
}
In the way you use one existing click event handler bound to the whole table (see the source code) and just say jqGrid which handle you want to use.
I recommend you additionally always use gridview:true which speed up the building of jqGrid, but which can not be used if you use afterInsertRow function which you considered to use as an option.
You can see the demo here.
UPDATED: One more option which you have is to use formatter:'actions' see the demo prepared for the answer. If you look at the code of the 'actions' formatter is work mostly like your current code if you look at it from the event binding side.
UPDATED 2: The updated version of the code you can see here.
You should use the .delegate() method to bind a single click handler for all elements ,through jQuery, to a parent element of all buttons.
For the different parameters you could use data- attributes to each element, and retrieve them with the .data() method.
Have you considered using delegate()? You'd have one handler on a container element rather than hundreds. Something like this:
$('#container').delegate('.your_buttons','click',function(e){
e.preventDefault();
var your_param = $(this).data('something'); // store your params in data, perhaps
do_something_with( your_param );
});
Assuming a general layout like this:
<div id="container">
<!--- stuff here --->
<a class="your_buttons" href="#" data-something="foo">Alpha</a>
<a class="your_buttons" href="#" data-something="bar">Beta</a>
<a class="your_buttons" href="#" data-something="baz">Gamma</a>
<a class="something-else" href="#" data-something="baz">Omega</a>
<!--- hundreds more --->
</div>