How can i get radgrid insert items from clientside.
I have used the following code, but its not working.
var mode = rgBoxLimits.get_isItemInserted();
var insertItems;
var dpToDate;
if (mode) {
insertItems= rgBoxLimits.get_insertItem();
dpToDate = insertItems[0].findElement("dtToDate"); //Not working
}
For edit items, i have the following code and its working fine.
var editedItems = rgBoxLimits.get_editItems();
var dpToDate = editedItems[0].findElement("dtToDate");
The problem is that you are running the get_isItemInserted() and get_insertedItem() method on a RadGrid object, while they are methods for a GridTableView object. See the RadGrid Documentation for more info.
Try this:
function getItems(sender, args) {
var myRadGrid = document.getElementById("MainContent_RadGrid1");
var grid = window.$find("MainContent_RadGrid1");
var mode = grid.get_masterTableView().get_isItemInserted();
mode = true;
var insertItems;
var dpToDate;
if (mode) {
insertItems = grid.get_masterTableView().get_insertItem();
dpToDate = insertItems[0].findElement("dtToDate"); //Not working
}
}
Related
I have a huge spreadsheet matrix, from which I create a long list of check boxes. The users then select different abilities, press search. The code the cross-checks with the database spreadsheet, returning names of the persons who has those abilities.
I need to update the "rightPanel" with the results of my search. But i simple can't figure out how to - if at all posible - update a panel in my UI..
var dataSSkey = 'sheetID'; //datasheet ID
var dataSheet = SpreadsheetApp.openById(dataSSkey).getSheetByName('Ansatte');
var groupsArray = [[],[],[],[]];
var lastRow = dataSheet.getLastRow();
var lastColumn = dataSheet.getLastColumn();
var dataArray = dataSheet.getRange(1,1,lastRow,lastColumn).getValues();
var numberGroups
var app = UiApp.createApplication().setTitle('Find Consultant');
var panel = app.createVerticalPanel();
var leftPanel = app.createVerticalPanel().setWidth(450);
var rightPanel = app.createVerticalPanel().setWidth(450);
var grid = app.createGrid(1, 2).setId('myGrid')
var outputArray = []; //to store output from search
var positiveList = [[],[]]; //array to store name and folder-ID of consultants matching
var numberPositive = 0; //number of consultants matching
function doGet() {
buildGroupsArray()
addCheckBoxesToUI()
var scrollPanel = app.createScrollPanel().setHeight(460);
//Search button
var searchButton = app.createButton('Search');
var clickHandler = app.createServerClickHandler("respondToSearch");
searchButton.addClickHandler(clickHandler);
clickHandler.addCallbackElement(panel);
var spacerImage = app.createImage("http://www.bi..ge.jpg").setHeight(3);
scrollPanel.add(panel);
rightPanel.add(app.createLabel('resultat her'));
leftPanel.add(scrollPanel);
leftPanel.add(spacerImage);
leftPanel.add(searchButton);
grid.setWidget(0, 0, leftPanel)
grid.setWidget(0, 1, rightPanel);
app.add(grid);
return app;
}
function respondToSearch(e){
var numberLogged = 0;
//define firstEmpty
var firstEmpty = "A"+lastRow;
if(lastRow !== 1){
firstEmpty = "A"+(lastRow+1);
};
//find selected competencies --> store in array + count competencies
for(i = 1; i <= lastRow; i++){
if (e.parameter["Checkbox"+i] == "true") {
var value = e.parameter["CheckboxValue"+i];
outputArray[numberLogged] = value;
numberLogged++;
}
}
for(i = 2; i <= lastColumn; i++){
var numberCorrect = 0;
//Run through rows according to content of output from selection
for(j in outputArray){
//Check if consultant own selected competency
if(dataArray[outputArray[j]][i] == "x"){
numberCorrect++; //if consultant owns selected competency then count
}
}
//if consultant owns all competencies, then add name and folder-id to array
if(numberCorrect == numberLogged){
positiveList[0][numberPositive] = dataArray[1][i]; //Add consultant name
positiveList[1][numberPositive] = dataArray[2][i]; //Add consultant-folder ID
numberPositive++ //count the number of consultants that own all competencies
}
}
for(j in positiveList[0]){
var name = positiveList[0][j];
var id = positiveList[1][j];
Logger.log(name);
Logger.log(id)
var anchor = app.createAnchor(name,'https://ww......folderviewid='+id);
rightPanel.add(anchor)
}
return app;
}
I don't really understand the problem you have...
In your handler function you only have to use app=UiApp.getActiveApplication() and from there populate the panel exactly the same way you did it in the doGet() function, ending with a return app; that will actually update the current Ui.
There are dozens of examples all around... did I misunderstand something in your question ?
Edit : following your comment.
I suppose you defined your variables outside of the doGet function hoping they will become global and so available to all the functions in your script but this is not going to work. Global variables in Google Apps script can't be updated by functions.
I would strongly recommend that you create app and panels in the doGet function and give them an ID so that you can get them back and update their values (or content) from the handler functions.
Here is a re-written version of your code (didn't test)
: (some parts are not reproduced (see //...)
var dataSSkey = 'sheetID'; //datasheet ID
var dataSheet = SpreadsheetApp.openById(dataSSkey).getSheetByName('Ansatte');
var groupsArray = [[],[],[],[]];
var lastRow = dataSheet.getLastRow();
var lastColumn = dataSheet.getLastColumn();
var dataArray = dataSheet.getRange(1,1,lastRow,lastColumn).getValues();
var numberGroups
var outputArray = []; //to store output from search
var positiveList = [[],[]]; //array to store name and folder-ID of consultants matching
var numberPositive = 0; //number of consultants matching
function doGet() {
var app = UiApp.createApplication().setTitle('Find Consultant');
var panel = app.createVerticalPanel();
var leftPanel = app.createVerticalPanel().setWidth(450).setId('leftPanel');
var rightPanel = app.createVerticalPanel().setWidth(450).setId('rightPanel');;
var grid = app.createGrid(1, 2).setId('myGrid')
buildGroupsArray(app); // in this function get app as parameter or use UiApp.getActiveApplication();
addCheckBoxesToUI(app);// in this function get app as parameter or use UiApp.getActiveApplication();
var scrollPanel = app.createScrollPanel().setHeight(460);
//...
//...
return app;
}
function respondToSearch(e){
//...
//...
var app = UiApp.getActiveApplication();
var rightPanel = app.getElementById('rightPanel');
for(j in positiveList[0]){
var name = positiveList[0][j];
var id = positiveList[1][j];
Logger.log(name);
Logger.log(id)
var anchor = app.createAnchor(name,'https://ww......folderviewid='+id);
rightPanel.add(anchor)
}
return app;
}
My first post and I must admit that I'm bad at explaining stuffs. let me try.
I have this java code in spreadsheet which adds a UI, have certain checkboxes & a chart attached to UI.
When the first (EDC) checkbox is clicked range(C2) goes as true/false, changes the chart values in data.
Since the chart doesnt automatically update, I decided to remove the existing chart and add a new one. When the code is runned for first time...the UI is visible along with Populate charts, when I click checkbox the existing chart gets delete but the populate_chart function does not. Can any one help me??? Almost my first code (such big).
function Show_chart() {
var ss = SpreadsheetApp.getActive();
var calc = ss.getSheetByName("Calculations");
var data = calc.getRange(6, 19, 22, 2)
// var values = data.getValues()
// for (var row in values) {
// for (var col in values[row]) {
// Logger.log(values[row][col]);
// }
// }
var app = UiApp.createApplication().setHeight(600).setWidth(1200).setTitle("Attrition Report");
var mygrid = app.createGrid(7, 2)
var label1 = mygrid.setWidget(0, 0, app.createLabel("EDC Project"));
var label2 = mygrid.setWidget(1, 0, app.createLabel("Customer Project"));
var label3 = mygrid.setWidget(2, 0, app.createLabel("Support"));
var checkbox1 = mygrid.setWidget(0, 1, app.createCheckBox().setName("EDC"));
var checkbox2 = mygrid.setWidget(1, 1, app.createCheckBox().setName("CP"));
var checkbox3 = mygrid.setWidget(2, 1, app.createCheckBox().setName("Support"));
checkbox1.addClickHandler(app.createServerHandler("myClickHandler"));
var panel = app.createVerticalPanel();
panel.add(mygrid);
app.add(panel);
populate_charts()
ss.show(app);
}
function populate_charts(){
var ss = SpreadsheetApp.getActive();
var app = UiApp.getActiveApplication();
var calc = ss.getSheetByName("Calculations");
var data = calc.getRange(6, 19, 22, 2);
//1200 300
var chart = Charts.newLineChart().setDimensions(300, 100)
.setDataTable(data)
.build();
var chartpanel = app.createHorizontalPanel().setId("tbd");
chartpanel.add(chart);
return app.add(chartpanel);
}
function myClickHandler(e) {
var ss = SpreadsheetApp.getActive();
var calc = ss.getSheetByName("Calculations");
var app = UiApp.getActiveApplication();
// var data = calc.getRange(6, 19, 22, 2)
var chvalue = e.parameter.EDC;
calc.getRange("C2").setValue(chvalue);
var del = app.getElementById("tbd");
return app.remove(del);
populate_charts()
}
Thanks...
You should call populate_charts(); before return app.remove(del); in your function myClickHandler.
Whatever you add after returnin your function simply doesn't happen.
Don't delete an UiElement and recreate a new element with the same Id - very bad things will happen in UiApp, or GWT which is the mechanics behind UiApp.
You could simplify populate_charts:
function populate_charts(app, sSheet){
var data = sSheet.getSheetByName("Calculations").getRange(6, 19, 22, 2);
var chart = Charts.newLineChart().setDimensions(300, 100)
.setDataTable(data).build();
return chart;
}
myClickHandler could be reduced as well:
function myClickHandler(e) {
var app = UiApp.getActiveApplication();
var chvalue = e.parameter.EDC;
var sSheet = SpreadsheetApp.getActive();
sSheet.getSheetByName("Calculations").getRange("C2").setValue(chvalue);
app.getElementById("chartContainer").clear().add(populate_charts(app, sSheet));
return app;
}
The last 7 lines of Show_chart changed to:
app.add(mygrid.setId('grid'));
app.add(app.createFlowPanel()
.setId('chartContainer').add(populate_charts(app, ss)));
checkbox1.addClickHandler(
app.createServerHandler('myClickHandler')
.addCallbackElement(app.getElementById('grid'))
.addCallbackElement(app.getElementById('chartContainer')));
return app;
}
Don't forget to add all missing semicolons ; .
I will try and keep this brief. I am attempting to make a google web app in google spreadsheet that will allow me to enter a values for min and max.
I have been able to create the GUI and add it to the panel. But I can't seem to pass the integer being entered into another function. I've tried everything, I'm relatively new to creating Google Script so I'm sorry if this comes across as a bit of a noobish problem.
Here is all the code so far :
function onOpen() {
var ss = SpreadsheetApp.getActive();
var menuEntries = [];
menuEntries.push({name: "Open Dialog", functionName: "showDialog"});
ss.addMenu("Min/Max", menuEntries);
}
//creating a panel to add the min and max of low to high for scoring
function showDialog() {
max = 10;
var app = UiApp.createApplication();
app.setTitle("My Applicaition");
var panel = app.createVerticalPanel();
var textBox = app.createTextBox();
var label = app.createLabel("Set the min value for 'Low'");
//had to create a hidden element with id="min" for a global value that can be updated
var min = app.createHidden().setValue('0').setName('min').setId('min');
textBox.setName('myTextBox').setId('myTextBox');
var button = app.createButton('Submit');
panel.add(label);
panel.add(textBox);
panel.add(min);
panel.add(button);
//click handler for setting the value of min to the new value
var clickHandler = app.createServerClickHandler("responedToSubmit");
button.addClickHandler(clickHandler);
clickHandler.addCallbackElement(panel);
app.add(panel);
var doc = SpreadsheetApp.getActive();
doc.show(app);
}
function responedToSubmit(e) {
var app = UiApp.getActiveApplication();
var textBoxValue = e.parameter.myTextBox;
Logger.log(e.parameter.min);
if (typeof textBoxValue != "number") {
var num = parseInt(textBoxValue);
app.getElementById('min').setValue(num);
Logger.log("textBoxValue is = "+textBoxValue+"\n min value is = "+e.parameter.min);
} else {
throw "value needs to be set as number";
}
return app.close();
}
This is where I believe things aren't going according to plan :
function responedToSubmit(e) {
var app = UiApp.getActiveApplication();
var textBoxValue = e.parameter.myTextBox;
Logger.log(e.parameter.min);
if (typeof textBoxValue != "number") {
var num = parseInt(textBoxValue);
app.getElementById('min').setValue(num);
Logger.log("textBoxValue is = "+textBoxValue+"\n min value is = "+e.parameter.min);
} else {
throw "value needs to be set as number";
}
return app.close();
}
I find that each time I test the .setValue() will not update the value of 'min' and I cannot see why. Can you please help?
You need to add textBox element to callBack elements list of your clickHandler.
Try this:
//click handler for setting the value of min to the new value
var clickHandler = app.createServerClickHandler("responedToSubmit");
clickHandler.addCallbackElement(panel);
clickHandler.addCallbackElement(textBox);
button.addClickHandler(clickHandler);
app.add(panel);
I have a datagrid with a custom itemrenderer for coloring cells, rows and columns.When i change the color of row sometimes it is perfectly shown but sometimes one or more cells are not colored. I didn't find the reason behind. Can anybody please give any hints on that?
Here is my custom itemrenderer code below..
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
bd.setStyle("backgroundColor",getStyle("bgColor"));//bordercontainer
lbl.setStyle("fontSize",getStyle("fontSize"));//label in //that bordercontainer
lbl.setStyle("fontFamily",getStyle("fontFamily"));
lbl.setStyle('color', getStyle("fgColor"));
}
and I'm using AdvancedDatagrid and using styleFunction in it..
public function applyFormat(data:Object,col:AdvancedDataGridColumn):Object {
var obj:Object = new Object();
for each(var taskFontFormatVo:TaskFontFormatVo in data.taskFontFormats){
if(!taskFontFormatVo.barchartView ){
if(col.headerText == taskFontFormatVo.columnName){
var bgColor:String = "0x"+taskFontFormatVo.bgColor;
var fgColor:String = "0x"+taskFontFormatVo.fgColor;
var fontSize:Number = taskFontFormatVo.fontSize;
var fontFamily:String = taskFontFormatVo.fontFamily;
obj.bgColor = bgColor;
obj.fgColor = fgColor;
obj.fontSize = fontSize;
obj.fontFamily = fontFamily;
break;
}
}
}
return obj;
}
Is there a way to refresh a single Kendo grid row without refreshing the whole datasource or using jQuery to set the value for each cell?
How do you define the row that you want to update? I'm going to assume that is the row that you have selected, and the name of the column being updated is symbol.
// Get a reference to the grid
var grid = $("#my_grid").data("kendoGrid");
// Access the row that is selected
var select = grid.select();
// and now the data
var data = grid.dataItem(select);
// update the column `symbol` and set its value to `HPQ`
data.set("symbol", "HPQ");
Remember that the content of the DataSource is an observable object, meaning that you can update it using set and the change should be reflected magically in the grid.
data.set will actually refresh the entire grid and send a databound event in some cases. This is very slow and unnecessary. It will also collapse any expanded detail templates which is not ideal.
I would recommend you to use this function that I wrote to update a single row in a kendo grid.
// Updates a single row in a kendo grid without firing a databound event.
// This is needed since otherwise the entire grid will be redrawn.
function kendoFastRedrawRow(grid, row) {
var dataItem = grid.dataItem(row);
var rowChildren = $(row).children('td[role="gridcell"]');
for (var i = 0; i < grid.columns.length; i++) {
var column = grid.columns[i];
var template = column.template;
var cell = rowChildren.eq(i);
if (template !== undefined) {
var kendoTemplate = kendo.template(template);
// Render using template
cell.html(kendoTemplate(dataItem));
} else {
var fieldValue = dataItem[column.field];
var format = column.format;
var values = column.values;
if (values !== undefined && values != null) {
// use the text value mappings (for enums)
for (var j = 0; j < values.length; j++) {
var value = values[j];
if (value.value == fieldValue) {
cell.html(value.text);
break;
}
}
} else if (format !== undefined) {
// use the format
cell.html(kendo.format(format, fieldValue));
} else {
// Just dump the plain old value
cell.html(fieldValue);
}
}
}
}
Example:
// Get a reference to the grid
var grid = $("#my_grid").data("kendoGrid");
// Access the row that is selected
var select = grid.select();
// and now the data
var data = grid.dataItem(select);
// Update any values that you want to
data.symbol = newValue;
data.symbol2 = newValue2;
...
// Redraw only the single row in question which needs updating
kendoFastRedrawRow(grid, select);
// Then if you want to call your own databound event to do any funky post processing:
myDataBoundEvent.apply(grid);
I found a way to update the grid dataSource and show in the grid without refreshing all the grid.
For example you have a selected row and you want to change column "name" value.
//the grid
var grid = $('#myGrid').data('kendoGrid');
// Access the row that is selected
var row = grid.select();
//gets the dataItem
var dataItem = grid.dataItem(row);
//sets the dataItem
dataItem.name = 'Joe';
//generate a new row html
var rowHtml = grid.rowTemplate(dataItem);
//replace your old row html with the updated one
row.replaceWith(rowHtml);
updateRecord(record) {
const grid = $(this.el.nativeElement).data('kendoGrid');
const row = grid.select();
const dataItem = grid.dataItem(row);
for (const property in record) {
if (record.hasOwnProperty(property)) {
dataItem.set(property, record[property]);
}
}
}