press separate edit button to edit cell or row in kendogrid - asp.net-mvc

Presently, I am attempting to have an edit button that the user can press to start editing the first cell, then have subsequent presses step through the rest of the cells in a kendogrid.
When I execute this code:
function initButtons() {
// ...
$("#edit-param-btn").kendoButton().on('click', function (e) { execEditParameter(e) });
// ...
}
function execEditParameter(e) {
var row = $("#rule-parameters").data('kendoGrid').dataItem($(e.currentTarget).closest("tr"));
$("#rule-parameters").data('kendoGrid').editRow(row);
}
Here is the UI:
This is the error I'm receiving when I press edit:
Uncaught TypeError: t.children is not a function
at pt.ui.DataBoundWidget.extend._createInlineEditor (http://localhost/Tdm/Scripts/Kendo/kendo.all.min.js:30:21788)
at pt.ui.DataBoundWidget.extend.editRow (http://localhost/Tdm/Scripts/Kendo/kendo.all.min.js:30:18039)
at eval (eval at evaluate (unknown source), <anonymous>:1:21)
at Object.InjectedScript._evaluateOn (<anonymous>:905:55)
at Object.InjectedScript._evaluateAndWrap (<anonymous>:838:34)
at Object.InjectedScript.evaluateOnCallFrame (<anonymous>:964:21)
Does anyone have any suggestions? TIA.

Ended up getting it working by changing execEditParameter to this:
function execEditParameter(e) {
var dataItem = $("#rule-parameters").data('kendoGrid').dataItem($(e.currentTarget).closest("tr"));
var row = $("#rule-parameters").data('kendoGrid').tbody.find("tr[data-uid='" + dataItem.uid + "']");
$("#rule-parameters").data('kendoGrid').editRow(row);
}
UPDATE:
The above works great for editing the first row, but if I want to edit the row the user has selected so it can select one of multiple rows, then this is better:
function execEditParameter() {
var row = $("#rule-parameters").data('kendoGrid').select();
$("#rule-parameters").data('kendoGrid').editRow(row);
}

Related

2 script hide columns based a cell value

how to make this script works on different sheet with different trigger?
simple is make same script run twice
original script works on many sheets and hiding many columns
on the 2nd script i make it simple, and reverse function.
with current condition, original script works fine, and 2nd script doesnt work
Script Source
function onEdit() {
onEdit1();
onEdit2();
}
function onEdit1() // Original Script
{
var ss = SpreadsheetApp.getActiveSpreadsheet();
["Calc", "Sheet1", "Sheet2", "Sheet3","Sheet4"].forEach(function (s) { var sheet = ss.getSheetByName(s); /// works on many sheets
var st =sheet.getRange("B2").getValue(); //trigger cell
if(st == false) //trigger word
{
sheet.hideColumn(sheet.getRange("W:Z"));
sheet.hideColumn(sheet.getRange("AA:AK"));
sheet.hideColumn(sheet.getRange("AL:AN"));
sheet.hideColumn(sheet.getRange("AO:AO"));
sheet.hideColumn(sheet.getRange("AP:AP"));
}
else
{
sheet.unhideColumn(sheet.getRange("W:Z"));
sheet.unhideColumn(sheet.getRange("A:K"));
sheet.unhideColumn(sheet.getRange("AL:AN"));
sheet.unhideColumn(sheet.getRange("AO:AO"));
sheet.unhideColumn(sheet.getRange("AP:AP"));
}
})}
function onEdit2() /// 2nd script
{
var ss = SpreadsheetApp.getActiveSpreadsheet();
["Duo","Sheet1","Sheet2"].forEach(function (s) { var sheet = ss.getSheetByName(s); /// bisa di banyak sheet
var st =sheet.getRange("AC5").getValue(); //trigger cell
if(st == True) //trigger word
{
sheet.unhideColumn(sheet.getRange("AU:BH")); // i Reverse hide unhide
}
else
{
sheet.hideColumn(sheet.getRange("AU:BH")); //here too
}
})}
Issue:
In JavaScript (and therefore, in Apps Script), the boolean values are true and false.
You are using True instead, with capital T, so most probably it's throwing an error because it's undefined (you can take a look at the Executions tab in your script in order to check this).
Solution:
In your onEdit2 function, change this:
if(st == True) //trigger word
To this:
if(st == true) //trigger word
Reference:
Boolean

Cannot insert data by pressing Enter in Combogrid after selection

I am using a combogrid for load data to insert into datagrid. I call the insert data to datagrid in onSelect. Thats mean when i select any data or press down key to scroll all my data then those rows will be selected any inserted automatically . But i want to look through the rows but only when i press inter then the selected row will be inserted.
I am trying this by using KeyUp function. But this wont working.
This is my previous code:
Combogrid add to row
function combogridData() {
var g = $('#itemListGrid').combogrid('grid'); // get datagrid object
var r = g.datagrid('getSelected'); // get the selected row
$('#itemListGrid').keyup(function(e){
if(e.keyCode == 13)
{
addrowtogrid(r);
}
});
$('#itemListGrid').combogrid('clear');
}
My Combogrid :
<select id="itemListGrid" class="easyui-combogrid" style="width:100%" data-options="
panelWidth: 600,
loader: myloader,
mode: 'remote',
idField: 'book_id',
textField: 'name',
method: 'get',
value: '',
columns: [[
{field:'book_id',title:'Item ID',width:'7%'},
{field:'name',title:'Book Name',width:'48%'},
{field:'retail',title:'retail',width:'5%',align:'right',hidden:true},
{field:'local_sale',title:'local',width:'7%',align:'right'},
{field:'whole_sale',title:'Whole',width:'8%',align:'right'},
{field:'isbn',title:'ISBN',width:'15%'},
{field:'authors',title:'Authors',width:'15%'},
]],
fitColumns: true,
labelPosition: 'top',
onSelect:combogridData ">
I am trying by using this code :
function combogridData() {
var g = $('#itemListGrid').combogrid('grid'); // get datagrid object
var r = g.datagrid('getSelected'); // get the selected row
$('#itemListGrid').keyup(function(e){
if(e.keyCode == 13)
{
addrowtogrid(r);
}
});
$('#itemListGrid').combogrid('clear');
}
I got My Own solution.
don't need to add onSelect anymore.
Just added
$('#itemListGrid').combogrid('textbox').bind('keyup', function(e){
if (e.keyCode == 13){ // when press ENTER key, accept the inputed value.
var g = $('#itemListGrid').combogrid('grid'); //get the combogrid
var r = g.datagrid('getSelected'); //get selected value
addrowtogrid(r); //add to another datagrid
}
});
under JQuery document.ready().
It's working perfectly. Thanks.

sproutcore scroll to after enterStateByRoute

Normally a user interacts with MyApp, that is, first scrolls, and then select an employee in a scrollview. A new feature is 'deeplinking' from another application, and then the sequence is based on the id in the given URL, that is programmatically select the employee and then scroll to it.
I noticed a difference in the behaviour of the following situations/workflows.
1) user scrolls and select in a employee, the details are shown, then alter the id in the URL to view another employee, the listview select and scrolls down automatically.
2) After loading the app, and copy paste a url with an employee id and date, the employee in the listview is selected (selectObject), but there is no automatic scroll action.
So, we have a own routine, called scrollToSelection, but also an deprecated message.
I have a state (loading_state) with a representRoute and a enterStateByRoute function.
representRoute: 'employee/:id/:date',
enterStateByRoute: function(context){
if ( this.get('loadingState').get('requiredDataLoaded') == YES ){
this.get('statechart').sendEvent('showEmployee', context.get('params'));
}
},
And in the next state (main_state) the called showEmployee function.
showEmployee: function(routeParams){
if (! this.isCurrentState()){
return;
}
if ( routeParams.hasOwnProperty('id') ) {
var id = routeParams.id;
var item = MyApp.store.find(MyApp.Employee, id);
if (! SC.none(item) && (item.get('status') & SC.Record.READY) ){
MyApp.employeeController.selectObject(item);
MyApp.employeeController.scrollToSelection();
}
},
And in the employeeController
scrollToSelection: function(){
this.invokeLast('realScrollToSelection');
},
realScrollToSelection: function(){
return;
var viewItems = $('.employeeListView').view();
var selectedItem = this.get('selection').firstObject();
if (viewItems.length > 0 && ! SC.none(selectedItem)){
var viewItem = viewItems[0];
var targetView = viewItem.itemViewForContentObject(selectedItem);
viewItem.scrollToItemView(targetView);
}
}.observes('status', 'length'),
Question: Is it possible to get the second workflow (deeplinking) working the same way as it is working in workflow 1 (user is altering the id in the url? So no need for a own routine at all.
I saw several a postings with suggestions, of making it a firstresponder?, use SC.ViewFor?, etc etc. But I wonder what is the correct/simple/short solution. Thanks in advance.
employeeScrollView
..
contentView: SC.ListView
contentBinding: 'MyApp.employeeController.arrangedObjects'
selectionBinding: 'MyApp.employeeController.selection'
How to apply the scrollToIndex correct? I got now a message 'not a function'. In the main_state.js/showEmployee(routeParams)
var id = routeParams.id
var item = App.store.find(App.Employee.id)
var contentIndex = App.employeeController.indexOf(item);
App.employeeController.selectObject(item)
App.employeeController.scrollToIndex(contentIndex)
This did the trick:
var view = App.calendarOverviewPage.getPath('calendarOverviewMainPane.calendarOverviewSplitView.leftView.employeeScrollView.contentView');
view.scrollToContentIndex(contentIndex);

How to catch the deselection event in Add-on SDK in Firefox

I use the Add-on Builder & SDK to develop Firefox add-on. I catch the event when users select a piece of text by the snippet:
var selection = require("sdk/selection");
selection.on('select', function () {
//Doing something
});
However, what I want also is to do other things when users does not select that text anymore, but I can not figure it out how to do it. Anyone can help me with this? Thank you very much.
I am not aware if there are events on Deselection of a text.
However, you could register for Mouse click event on body or div containing that text and then in the callback function of the event, you could check if last selected texts is currently selected or not.
var selection = require("sdk/selection");
var lastText;
function addSelection(){
var selection = false;
var body = document.body;
if(!selection.text){
//deselection
//remove DOM listeners
body.removeListener('click', addSelection);
}
if (!selection.isContiguous) {
for (var subselection in selection) {
if(subselection.text == lastText){
selection = true;
}
}
} else if(selection.text && selection.text == lastText){
selection = true;
}
if(!selection){
//deselected
//remove DOM listeners
}
}
selection.on('select', function () {
var body;
if(lastText !== selection.text){
//deselected
//remove listeners
};
lastText = selection.text;
body = document.body;
//add DOM listeners like click - that can potentially remove selection
body.addEventListener('click', addSelection);
});

jQuery UI portlets - toggle portlets to save to a cookie (half way there!)

I'm a bit of a jQuery n00b so please excuse me if this seems like a stupid question. I am creating a site using the jQuery UI more specifically the sortable portlets. I have been able store whether or not a portlet is has been open or closed to a cookie. This is done using the following code. The slider ID is currently where the controls are stored to turn each portlet on and off.
var cookie = $.cookie("hidden");
var hidden = cookie ? cookie.split("|").getUnique() : [];
var cookieExpires = 7; // cookie expires in 7 days, or set this as a date object to specify a date
// Remember content that was hidden
$.each( hidden, function(){
var pid = this; //parseInt(this,10);
$('#' + pid).hide();
$("#slider div[name='" + pid + "']").addClass('add');
})
// Add Click functionality
$("#slider div").click(function(){
$(this).toggleClass('add');
var el = $("div#" + $(this).attr('name'));
el.toggle();
updateCookie(el);
});
$('a.toggle').click(function(){
$(this).parents(".portlet").hide();
// *** Below line just needs to select the correct 'id' and insert as selector i.e ('#slider div#block-1') and then update cookie! ***
$('#slider div').addClass('add');
});
// Update the Cookie
function updateCookie(el){
var indx = el.attr('id');
var tmp = hidden.getUnique();
if (el.is(':hidden')) {
// add index of widget to hidden list
tmp.push(indx);
} else {
// remove element id from the list
tmp.splice( tmp.indexOf(indx) , 1);
}
hidden = tmp.getUnique();
$.cookie("hidden", hidden.join('|'), { expires: cookieExpires } );
}
})
// Return a unique array.
Array.prototype.getUnique = function() {
var o = new Object();
var i, e;
for (i = 0; e = this[i]; i++) {o[e] = 1};
var a = new Array();
for (e in o) {a.push (e)};
return a;
}
What I would like to do is also add a [x] into the corner of each portlet to give the user another way of hiding it but I'm unable to currently get this to store within the Cookie using the code above.
Can anyone give me a pointer of how I would do this?
Thanks in advance!
Gareth
Have you tried adding another selector to the click function?
$("#slider div, #slider div > span.ui-icon-x").click(function(){
$(this).toggleClass('add');
var el = $("div#" + $(this).attr('name'));
el.toggle();
updateCookie(el);
});

Resources