Acutally i am using kendo tree view. If i click check box it will create another one grid inside of Activity Column.In that one of the column is outputcategorycode. when ever i am clicking the none value one dropdown will bind dynamically there. then i need to select any one of the value in that dropdown. Once selection is done , checkbox is changing to uncheck mode then inside grid also disappearing that means whole grid is refreshing.
Please have look my Dojo link and give me solution for that.
http://dojo.telerik.com/#bagya/iMeRi
Thanks in advance...
You can bind the databinding event and stop grid from refreshing. Adding this in databound will prevent grid from refreshing.
$("#grid").data("kendoGrid").bind("dataBinding", function(e) {
e.preventDefault();
});
Once you are done with 'doing stuff' you can unbind the function by simply calling
grid.unbind("dataBinding");
Check your updated dojo with the changes :
NOTE : I have added it in databound of the grid just to show working,
but you probably should not do that, since it wont bind other grid data. So
add a different handler and based on certain event as per your
requirement, disable grid refresh and enabled after event is done.
Update:
You can use the onOpen and onClose event of the kendoDropDownList. Refer below:
Bind the onOpen and onClose events to the dropdown
function OutputProductEditor(container, options) {
$('<input required data-text-field="Value" data-value-field="Key" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
//autoBind: false,
dataSource: ProductData,
close: onClose,
open: onOpen,
});
}
onOpen prevent refresh by adding databinding function
function onOpen() {
var grid = $("#grid").data("kendoGrid");
grid.bind("dataBinding", function(e) { e.preventDefault(); });
};
onClose - remove databinding
function onClose() {
var grid = $("#grid").data("kendoGrid");
grid.unbind("dataBinding");
};
Here is the updated dojo
Related
We have a tabulator column definition , where one of them is a button created by a formatter
{title:"input", field:"blank", width:30, frozen:true, responsive:0,formatter:customFormatter2}
Into formatter we create a button
var customFormatter2 = function (cell, formatterParams) {
var $button=$('<button>').text('Hola')
$button.click(function(){
$(cell.getElement()).trigger('contextmenu')
})
return $button.get(0);
}
Also we have a rowContextmenu created into tabulator.
I want call to menu that tabulator shows when we do right click in any row.
I tried call a trigger from cell,from row... and I dont know if the event is accessible ,or I dont know do it.
Thanks
I don't user jQuery often, but I believe the only thing missing is preventing the propagation of the click event after the contextmenu event, which hides the menu. Something like this should work, but I also had to add pageX and pageY to my custom event, so that Tabulator could calculate where to display the menu. I am not sure how I would do this in jQuery.
$button.click(function(event){
event.stopImmediatePropagation();
$(cell.getElement()).trigger('contextmenu');
});
Or without jQuery and definitely works,
function customFormatter(cell, formatterParams){
const button = document.createElement('button');
button.textContent = "Hola";
button.addEventListener('click', (event) => {
event.stopImmediatePropagation();
const myEvent = new Event('contextmenu');
myEvent.pageX = event.pageX;
myEvent.pageY = event.pageY;
cell.getRow().getElement().dispatchEvent(myEvent);
})
return button;
}
Here is a full example without jQuery.
https://jsfiddle.net/nrayburn/guxkw394/101/
Be careful with this. Because we are creating a custom event, it doesn't contain all of the normal properties that a real event would. If Tabulator starts relying on different event properties, it would break this code. (Maybe you could copy the original event from the click and pass those properties into the custom event. Not really sure how to do that.)
My HTML page has a Button and a Select Drop-Down (Combo Box). Drop-Down change event is like this:
$('#DDL_ID').on('change', function (e) {
// Some Code Here
});
When I click the button, I am setting some value to Drop-Down and it is working fine.
$('#BTN_ID').on('click', function (e) {
$('#DDL_ID').val('123');
});
When I click the button, Drop-Down value is getting changed but Drop-Down change event is not firing. Can anyone help me on this?
Please note this is not a duplicate question.
Setting the val() through jquery will not automatically trigger the event on the item... so you need to manually trigger() it...
$('#BTN_ID').on('click', function (e) {
$('#DDL_ID').val('123').trigger('change');
});
This is a dumb question but I've been all over the Semantic UI site, along with searching here and I haven't found a solution.
The gist is: I have been using the code below with a Semantic dropdown list. It works fine – except that I have a table component through which the user can also make a selection (which triggers a function) – and when they do, I update the Semantic dropdown to reflect the current selection . . . and then the onChange event fires – so a function is running twice when it doesn't need to.
I tried using onSelect but that is apparently not a valid event for a dropdown. I could do some stupid hack to work around this but I'd rather just use a different event. Is there one?
$(function () {
$('#productStates').dropdown({
allowAdditions: true,
allowReselection: true,
placeholder: "Select State",
onChange: function (value, text) {
if (projectData == undefined) return;
loadStateByID(value)
}
})
});
Ok - solved this. Wish the Semantic docs were clearer on event handling.
I was trying to prevent a "loading" function from getting called twice when a user clicked on a table cell and the dropdown was updated to reflect the current selection. I update the dropdown using:
$('#productStates').dropdown('set selected', activeStateID);
The onChange event handler captured all changes and so the "load" event would fire twice. Using action, the event only fires on a user action, not on setting the dropdown state through code.
$('#productStates').dropdown({
allowAdditions: true,
allowReselection: true,
placeholder: "Select State",
action: function (value, text) {
if (projectData == undefined) return;
$(this).dropdown('set selected', value);
loadStateByID(text)
}
})
I am using dojo dgrid for table representation. I have handled a row click event with grid.on('.dgrid-content .dgrid-row:click', function(){ // Open a Dialog}). But the problem I am facing here is: while user is trying to select any text on the row with a hope to copy, the event eventually ends up opening the dialog.
As per my knowledge, HTML5 has the support of ondrag event, but that is not working in my case. What are the other ways to separate these two events and handle accordingly?
Thanks in advance.
You can distinguish select from click in following way inside of your click handler:
clickHandler: function () {
var collapsed = window.getSelection().isCollapsed;
if (collapsed) {
console.log("Clicked");
//Open dialog
} else {
console.log("Selected");
//Do something else
}
}
You should add set allowTextSelection to true inside your grid. This allows the user select text inside the rows.
Make sure you read the documentation on the topic.
I've setup a grid with inline editing, and have the following for transport code. (Using local data). Why would the create event fire when I click the update button instead of the update event?
It may also help me if someone could explain what happens when the edit button is clicked in regards to what events are fired, etc.
"columnData" is a local dataset, and in reality I don't think I need the create as I don't have any functionality to add rows. This is just a simple editable grid where a user is allowed to edit 3 out of 4 columns with the first
column being read only.
transport: {
read: function(e) {
e.success(columnData);
},
update: function(e) {
e.success();
},
create: function(e) {
var item = e.columnData;
item.Id = columnData.length + 1;
e.success(item);
}
}