We Keep Coding

Change input values inside responsive datatables

I've a datable with responsive active.
Inside a column i've a input field PRICE. When i change it, it update automatically 1 or more input fields inside others column.
Now if i've a large screen and responsive is not active. All works ok.
But if i've a small screen and responsive active itself, i've problem: input field OUTSIDE the screen are not update.
See the fiddle example trying change PRICE input: http://jsfiddle.net/ebRXw/5349/
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
} );
$(".price").on("change", function(e) {
e.preventDefault();
var tr = $(this).closest("tr");
var total = $(this).val() * ( 1 + tr.find(".vat").val() / 100 );
tr.find(".txt_no_responsive_column").val(total);
tr.find(".txt_responsive_column").val(total);
});
} );
I think i've to modify this logic: var tr = $(this).closest("tr"); .Now i've disabled responsive in all my tables and activated scrollX to get it working. But i'd like to activate responsive in all my tables without pain and without doing deep update to javascript! Any solution valid for responsive triggered and responsive not triggered using unique code?
UPDATE: I tried solution provided by #Yash Shukla: jsfiddle.net/ebRXw/5361 but i get problem if I resize windows. Value inside new TR back to original value. See pic

I checked you jsfiddle in both cases if responsive is true or false the value in txt_responsive_column input is getting updated.
What is your main issue? If responsive is false then there is no x scroll bar and you are not able to see the input is this the issue?
Edited :
When you click on + sign it creates a new row with child class, so I have updated the jsfiddle with updated code. You just need to pick that new row also and update input values accordingly.
//code here
http://jsfiddle.net/ebRXw/5361/

Displaying dirty cell triangle on grid when changing datasource manually

I have a kendo grid with custom popup edit window to imitate popup edit, but with batch edit. Everything works fine, but I am experiencing a small issue. Whenever value is changed, the grid cell does not have that red triangle thingy in the corner indicating that this particular value different from original.
As I understand in this post, manually made changes in datasource does not appear on the grid, so I have to add them manually.
This post 'manually maintain dirty cell marker on paging in Kendo grid' gives an idea how to get it working. I could attach some listeners to kendoWindow inputs, track what fields are being edited, compare old and new values...
But is there a less painful way to achieve this functionality? Maybe there is some built in kendo function to achieve that?
Here's a small working example http://dojo.telerik.com/aSaXe/4

The red "dirty" marks appear automatically only when the built-in in-cell editing is used. From this point of view, your scenario requires these to be added manually after the custom editing popup is closed.
You may find the change event of the data item useful in the task. It will be fired each time a value in the popup is changed and the respective textbox is blurred.
var uid = $(e.target).parents('tr').attr('data-uid');
var grid = $('#grid').data("kendoGrid");
var dataItem = grid.dataSource.getByUid(uid);
dataItem.bind("change", function(args) {
// args.field
});
Finally, keep in mind that each change in the Grid dataSource causes the whole table to be redrawn (unless the built-in in-cell editing is used), so you will lose any previously applied custom styling.

You can use the save event on your kendo grid as:
save: function (e) {
addDirtyUid(e.model.uid);
setTimeout(refreshVisualDirtyElements, 100);
}
Other functions and var:
var dirtyIds = [];
function addDirtyUid(currentUid) {
if (dirtyIds.indexOf(currentUid) === -1) {
dirtyIds.push(currentUid);
}
}
function refreshVisualDirtyElements() {
for (var i = 0; i < dirtyIds.length; i++) {
var thisUid = dirtyIds[i];
$("tr[data-uid='" + thisUid + "']").find("td:eq(0)").addClass("k-dirty-cell");
$("tr[data-uid='" + thisUid + "']").find("td:eq(0)").prepend('<span class="k-dirty"></span>');
}
}

Sencha ExtJS 4.2: how can I synchronize two combo editors in a grid?

I need to edit two columns of my grid using combos as editors, and I need the values shown in the second to be filtered accordingly to the value selected in the first one.
There is also the problem that I need to show the "bound" value (i.e. "description") instead of the Id, in the grid cell.
I prepared a (very simplified) fiddle to show the problem here
Click here for the fiddle
Looking at the fiddle, I'd need to select the brand in the first combo and then a model in the second, but I should obviously find only the models from the selected brand in there.
How can I show the descriptive text in the cell?
How can I filter the second combo?
Thanks

The editing plugin has an beforeedit event you can use, for example:
listeners: {
beforeedit: function(editor, context) {
var record = context.record;
if (context.field !== 'modelId') {
return;
}
models.clearFilter(true);
models.filter({
property: 'brandId',
value: record.getId()
});
}
}
Working example: https://fiddle.sencha.com/#fiddle/12hn

How to rebind a Kendo ListView after changing template

I'm attempting to rebind the listview data after changing the template, based on a DropDownList value. I've included a JSFiddle for reference. When I rebind currently the values in the template are undefined.
Thanks!
JSFiddle link
I was thinking the best way to handle it would be in the 'select' or 'change' function:
var cboDetailsCategory = $("#detail").kendoDropDownList({
data: [
"All",
"Customer",
"Location",
"Meter",
"Other"],
select: function (e) {
var template = $("#" + e.item.text()).html();
console.log("template", template);
$("#details").html(template);
},
change: function (e) {
},
please refer to the JSFiddle link and this graphic as a visual
Here is a lengthier workflow:
User completes a name search and clicks a search button.
Name results are populated in a listview, rendered individually as button controls using a template.
User then clicks one of the name results (shown as the button text).
A dropdownlist of categories ('All' <--default , 'Location', 'Customer'...) gives the user the ability to target what subject of data they want to see. 'All' is the default, showing all details about the selected name.
So by default the 'All' template is populated.
If user wants to see the 'Location' details (template) they select it from the dropdownlist.
The template shows but the values are all blank. The only way to populate it is to click the name (button) again.
I want to remove the need for having to re-click the button (name) to populate the template ('Location', etc...).
I have put together a JSFiddle showing the structure. Though due to the data being private and served over secure network I cannot access it.
Refer to JSFiddle:
I believe the issue is that the onclick event grabs the data-uid and passes it to the initial default template (named 'All' but it's not included in code as it's lengthy). When the user changes the dropdownlist (cboDetailsCategory) and selects a new template I lose the data.
Thanks for your help. I'm really stuck on this and it's a current show stopper.

There isn't an officially supported way to change templates, without destroying the listview and rebuilding it. However, if you don't mind poking into into some private api stuff (be warned I can't guarantee that kendo won't break it without telling you) you can do this
var listview = $("#MyListview").getKendoListView();
listview.options.template = templateString;
listview.template = kendo.template(listview.options.template);
//you can change the listview.altTemplate the same way
listview.refresh(); //redraws the elements
if you want to protect against unknown API changes you can do this, which has A LOT more overhead, but no risk of uninformed change (untested!)
var listview = $("#MyListview").getKendoListView(),
options = listview.options;
options.dataSource = listview.dataSource;
listview.destroy();
$("#MyListview").kendoListView(options);

Here's the solution, thanks for everyone's help!
JSFiddle Link
The issue was where I was setting the bind:
$("#list").on("click", ".k-button", function (e) {
var uid = $(e.target).data("uid");
var item = dataSource.getByUid(uid);
var details = dropdown.value();
var template = $("#" + details).html();
$("#details").html(template);
kendo.bind($("#details"), item);
currentData = item;
});

YUI Datatable Drag and Drop together with Cell Editor

I have a problem with YUI (2) Datatable and Drag and Drop combo. I have a table of items, one of them is item description which I made editable (and saveable) with YUI's TextboxCellEditor. I also made the rows draggable (so I can drop them to another container).
But I'm stuck with two items:
- I can only get DnD by clicking on the second column (the first one does not work)
- I can only get it to work on the second attempt since initialization.
Here is a snipet from my JS (simplified):
nameFormatter = function (elCell, oRecord, oColumn, oData) {
var link = '/share/page/site/' + Alfresco.constants.SITE + '/document-details?nodeRef=' + oRecord.getData('nodeRef');
elCell.innerHTML = '<span>' + oData + '</span>';
};
descFormatter = function(elCell, oRecord, oColumn, oData) {
elCell.innerHTML = '<pre class="desc">' + oData + '</pre>';
};
columnDefs = [
{key: "name", label: "Name", sortable: true, formatter: nameFormatter, resizable: true}
, {key: "description", label: "Description", sortable: true, formatter: descFormatter, editor: new YAHOO.widget.TextboxCellEditor(), resizable: true}
];
this.mediaTable = new YAHOO.widget.DataTable(this.id + "-media-table", columnDefs, this.dataSource, {
MSG_EMPTY: "No files"
});
// now we want to make cells editable (description)
var highlightEditableCell = function(oArgs) {
var elCell = oArgs.target;
if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) {
this.highlightCell(elCell);
}
};
this.mediaTable.subscribe("cellMouseoverEvent", highlightEditableCell);
this.mediaTable.subscribe("cellMouseoutEvent", this.mediaTable.onEventUnhighlightCell);
this.mediaTable.subscribe("cellClickEvent", this.mediaTable.onEventShowCellEditor);
this.mediaTable.subscribe("editorSaveEvent", this.saveDesc);
this.mediaTable.subscribe('cellMousedownEvent', this.onRowSelect);
The saveDesc function is simple Ajax call to save that items' description.
Here is the onRowSelect function:
onRowSelect = function(ev) {
console.log(" == method onRowSelect");
var tar = Event.getTarget(ev)
, dd
;
dd = new YAHOO.util.DDProxy(this.getTrEl(tar));
dd.on('dragDropEvent', function(e) {
YAHOO.Bubbling.fire('myCustomEvent', { target: e.info, src: tar});
dd.unreg();
});
};
If I just click on desc, I get the text editor, if I click on name, I get the link open.
Like I said, when I mouseDown on the second column (description), in first attempt I get nothing. Then I click and hold the second time, and this time it works (I get a DDProxy and I can Drag and drop it to the target, everything works there).
And the other issue is that when I click and hold on the name column, I don't get the DDProxy (I get my onRowSelect event and the correct row).
What am I doing wrong here?
UPDATE: Resolved the first issue by using Satyams answer - removing the formatter for my cell with link.
The second issue (only on the second click) was resolved because I added the missing dd.handleMouseDown(ev.event) in my onRowSelect function.

Dav Glass, who wrote DD, has this example in his page: http://new.davglass.com/files/yui/datatable4/ I used it in my example: http://www.satyam.com.ar/yui/2.6.0/invoice.html and it works just fine, though it is somewhat more involved than you have there. I'm sorry I cannot help you more precisely with your issue, D&D is not my string point but I hope the examples might help.
One reason for your problem might be that link in the cell. This is not a good idea, whether you have DD or not. In general, the recommended way to deal with this is to listen to the cellClickEvent and if the column of the cell that got clicked is the one that 'navigates', you build the URL based on the information in the record clicked and then navigate or do whatever you want with it. This allows the DataTable to render much faster, as it needs no formatter and, in the odd event that someone does click the cell, then and only then you bother to make the calculations. The size and number of DOM elements on the page also goes down.
Likewise, with the other cell with the pre-formatted tag, you can easily avoid it. The cells in each column in a DataTable gets a CSS class name made from the "yui-dt-col-" prefix and the 'key' value of the column (for example: yui-dt-col-description). Thus, you can simply add a style declaration for that CSS class name and spare yourself the formatter. Likewise, for highlighting the editable cells, how about defining some style for the .yui-dt-editable:hover selector? I've never done it myself but I imagine it should work.