I have a problem with my KendoGrid.
I have some commands in the last Column of my Grid. One of them calls up a delete function, in which a new KendoWindow opens up.
And now i need to display the Computer name (which is a field of the grid) of this row in the window.
In the delete function I tried to get the Data by:
function delete() {
var grid = $("#grid").data("kendoGrid");
var selectedRow = grid.selectedRow();
var data = this.dataItem(selectedRow);
var ComputerName = data.ComputerName;
//initialize and open window
.
.
};
And to show it in the window I tried an ASP data-bind:
Computername:<span id="ComputerName" data-bind="text: ComputerName"></span>
But it doesnt work.
I am new to this topic, so please apologize if my idea doesn't make any sense :D
Use the activate event of the window to actually bind the content of the window to that dataItem (called data in your case);
$('#windowName').data().kendoWindow.bind('activate',function(e){
kendo.bind(this.element,kendo.observable(data))
})
Related
When I use the code below, I remove the datatable values, but the data table structure still exists and displays empty fields (see pics) with the DOM explorer showing an empty table and table rows.
How can I clear the datatable values and the table itself? This way when I repopulate search again, the empty smaller table isn't present?
lvwOutput.Items.Clear();
lvwOutput.DataSource = null;
lvwOutput.DataBind();
Before
After items.clear and datasource = null
This is ridiculous and I believe there is a better way to do this, but the never ending server/client battle makes this harder than it should be. My listview binded to a datatable is called lvwOutput.
In my btnClear I had to put the following. You cannot hide the element or clear the items in the server side asp code for this to work
ScriptManager.RegisterStartupScript(Page, GetType(), "emptyTable", "javascript:emptyTableRows(); ", true);
In my javascript code I had to put the following, this clears the client code
function emptyTableRows(){
var tableHeaderRowCount = 0;
var table = document.getElementById('lvwOutputTable');
var rowCount = table.rows.length;
for (var i = tableHeaderRowCount; i < rowCount; i++) {
table.deleteRow(tableHeaderRowCount);
}
}
And then in the portion of my code that would display the listview and datatable when the user initiates another sql search. This clears the server side.
lvwOutput.Items.Clear();
lvwOutput.DataSource = null;
lvwOutput.DataBind();
You can create a property the stores the data table in session that way you can access it during the click event.
DataTable dtbleDataSource
{
get
{
return Session["dataSource"] as DataTable
}
set
{
Session["dataSource"] = value;
}
}
In your click event you can say:
dtbleDataSource.Reset();
Short Version: I want to have my Copy button in a table to be able to grab the values from an existing entry and populate those into a "Create Entry" Page Fragment. This way users don't have to reenter all the data when making a new entry.
Long Version:
I have two buttons added the rows in my table: Edit and Copy.
The Edit Button uses the following code to grab the information from that specific row and uses the Fragment to edit the entry.
widget.datasource.saveChanges();
app.datasources.SystemOrders.selectKey(widget.datasource.item._key);
app.showDialog(app.pageFragments.SystemOrders_Edit);
The Copy button is currently using the following code to duplicate the entry and automatically create it.
//Allows for copying table/row
var rowDataSource = widget.datasource;
var listDatasource = app.datasources.SystemOrders_HideComplete;
var createDataSource = listDatasource.modes.create;
widget.datasource.saveChanges();
// Enter fields you want to duplicate below
createDataSource.item.ProjectName = rowDataSource.item.ShowName;
createDataSource.item.DeliveryInfo = rowDataSource.item.DeliveryInfo;
createDataSource.item.SOB = rowDataSource.item.SOB;
createDataSource.item.DeliveryDate = rowDataSource.item.DeliveryDate;
createDataSource.item.Company = rowDataSource.item.Company;
createDataSource.item.Location = rowDataSource.item.Location;
createDataSource.item.AdditionalPeripherals = rowDataSource.item.AdditionalPeripherals;
createDataSource.item.Notes = rowDataSource.item.Notes;
createDataSource.createItem();
I would like to change this behavior so that the Copy button grab the values from those specific fields, however instead of doing a createDataSource/createItem(); I want it to place those values into a Page Fragment (ex: SystemOrders_Add) that has the corresponding fields.
This way the user can click "Copy" and the SystemOrders_Add Fragment appears with pre-populated values.
I want to make sure these values are only in the Page Fragment and do not get commited until the user presses the Submit button.
newSOEmailMessage(widget);
widget.datasource.createItem();
app.closeDialog();
Thank you for your help!
one way you can accomplish this is by passing the data to Custom Properties defined in your Page Fragment and then you can place those properties to the corresponding fields. I recommend you also check this article https://developers.google.com/appmaker/ui/viewfragments#use_custom_properties_to_customize_page_fragments
First you need to create the Custom Properties inside your Page Fragment. Then in your Copy button onClick event you can use something like this to save the row data from your table to the Custom Properties:
var rowDataSource = widget.datasource.item._key;
app.datasources.SystemOrders.selectKey(rowDataSource);
var projectName = app.datasources.SystemOrders.item.project_name;
var deliveryInfo = app.datasources.SystemOrders.item.delivery_info;
//...
app.pageFragments.SystemOrders_Edit.properties.ProjectName = projectName;
app.pageFragments.SystemOrders_Edit.properties.DeliveryInfo = deliveryInfo;
//...
app.showDialog(app.pageFragments.SystemOrders_Edit);
Assuming you have a form inside your Page Fragment, you can bind the value of each field with custom properties. Binding will ensure that the data is pre-populated. This can be done for each field via the Property Editor and the binding should look like this: #properties.ProjectName
Inside your Submit button onClick event you can use something like this to create a new item in the datasource using the values available in each field.
var projectName = widget.root.descendants.Field1.value;
var deliveryInfo = widget.root.descendants.Field2.value;
//...
var myDatasource = app.datasources.SystemOrders_HideComplete;
var myCreateDatasource = myDatasource.modes.create;
var draft = myDatasource.modes.create.item;
draft.project_name = projectName;
draft.delivery_info = deliveryInfo;
//...
// Create the new item
myCreateDatasource.createItem();
app.closeDialog();
You can set properties back to null once item is created (maybe onDetach) like this:
app.pageFragments.SystemOrders_Edit.properties.ProjectName = null;
Hope this helps!
I have a feeling that removing this line from the Copy Button click handler will make a trick(of course, if your page fragment is bound to ds.modes.create.item):
createDataSource.createItem();
In case, you are using Manual save mode and you are trying to reuse Page Fragment without overriding datasource... you need create new items using different approach:
// Copy Button click handler
var source = widget.datasource.item;
var listDatasource = app.datasources.SystemOrders_HideComplete;
// This line will add new item to the list datasource
// without saving it to database.
listDatasource.createItem();
var target = listDatasource.item;
// Enter fields you want to duplicate below
target.Field1 = source.Field1;
target.Field2 = source.Field1;
...
// Show fragment (assuming it is bound to listDatasource.item)
app.showDialog(app.pageFragments.EditItemFragment);
// -----------
// Page Fragment's Submit Button click handler
...
listDatasource.saveChanges(function() {
// TODO: handle successful save
});
Thank you to Pavel and Wilmar. The solution that worked for me is listed below:
//Allows for copying table/row
var rowDataSource = widget.datasource;
var listDatasource = app.datasources.SystemOrders_HideComplete;
var createDataSource = listDatasource.modes.create;
widget.datasource.saveChanges();
// Enter fields you want to duplicate below
createDataSource.item.ShowName = rowDataSource.item.ShowName;
createDataSource.item.DeliveryInfo = rowDataSource.item.DeliveryInfo;
createDataSource.item.SOB = rowDataSource.item.SOB;
createDataSource.item.Notes = rowDataSource.item.Notes;
app.datasources.SystemOrders.selectKey(widget.datasource.item._key);
app.showDialog(app.pageFragments.SystemOrders_Add);
(Deleted my old question to simplify it. )
I enter data in a table, I then want to make an exact duplicate of that data in a new item/record/row*.
*not sure the proper term.
Is there any way to accomplish this?
Sorry for the slow response. Here is what you should do:
Add a "copy" button in the row. In the onClick on that button, add this code:
var createDataSource = widget.datasource.modes.create;
var rowDataSource = widget.datasource;
createDataSource.item.foo = rowDataSource.item.foo;
createDataSource.item.bar = rowDataSource.item.bar;
// And so on for each field
createDataSource.createItem();
You could probably make sure of javascript for-in to loop through all the properties of the item in so you don't have to manually specify each record, but I didn't have time to experiment with this.
Edit:
The above code won't show the copied record in the list immediately, because I used row's create data source, instead of the lists create data source. Try this instead:
var rowDataSource = widget.datasource;
// Instead of using the row datasource for create, explicitly use the data source of your list.
var listDatasource = app.datasources.NameOfYourListsDataSource;
var createDataSource = listDatasource.modes.create;
createDataSource.item.foo = rowDataSource.item.foo;
createDataSource.item.bar = rowDataSource.item.bar;
// And so on for each field
createDataSource.createItem();
I have a datagrid control in my mxml file:
Now in my AS file, in the result function when obtaining data from DB, I can create columns dynamically. Let's say I create 1 column (client name):
private function GetDebtors_Result(event:ResultEvent):void
{
var arrayCol:Array = new Array();
var xmlSrc:XML = new XML("<main></main>");
var xmlTmp:XML;
var colClientname:DataGridColumn;
//Build an XML from DB data received (could as well use "event.result" directly to act as dataprovider for the datagrid, but I needed to break it down here)
for each(var o:Object in event.result)
{
xmlTmp = <row>
<CLIENTNAME>{o.CLIENTNAME}</CLIENTNAME>
</row>;
xmlSrc.appendChild(xmlTmp);
}
//Create the column CLIENTNAME
colClientname = new DataGridColumn("CLIENTNAME");
colClientname.headerText = "Client Name";
//Add the newly created column in the "Column" array.
arrayCol.push(colClientname);
//Use the "Column" array to set the columns of the datagrid.
dgSearch.columns = arrayCol;
//Populate the datagrid with the XML data.
dgSearch.dataProvider = xmlSrc.row;
}
This works well.
Now comes the issue: I need to add a second column which will contain checkboxes. They will be selected or deselected depending on the data from database. I'll show how I've done it by updating the same "GetDebtors_Result" function as above (added lines are commented as "// ADDED"):
private function GetDebtors_Result(event:ResultEvent):void
{
var arrayCol:Array = new Array();
var xmlSrc:XML = new XML("<main></main>");
var xmlTmp:XML;
var colClientname:DataGridColumn;
var colSel:DataGridColumn; // **ADDED**
//Build an XML from DB data received (could as well use "event.result" directly to act as dataprovider for the datagrid, but I needed to break it down here)
for each(var o:Object in event.result)
{
xmlTmp = <row>
<CLIENTNAME>{o.CLIENTNAME}</CLIENTNAME>
<SELECTED>{(o.SELECTED == 1)?true:false}</SELECTED> //**ADDED**
</row>;
xmlSrc.appendChild(xmlTmp);
}
//Create the column CLIENTNAME
colClientname = new DataGridColumn("CLIENTNAME");
colClientname.headerText = "Client Name";
//Create the column SELECTED
colSel = new DataGridColumn("SELECTED"); // **ADDED**
colSel.headerText = ""; // **ADDED**
colSel.itemRenderer = new ClassFactory(mx.controls.CheckBox); // **ADDED**
colSel.dataField = "SELECTED"; // **ADDED**
//Add the newly created column in the "Column" array.
arrayCol.push(colClientname);
//Add the "selection" column in the "Column" array.
arrayCol.push(colSel); // **ADDED**
//Use the "Column" array to set the columns of the datagrid.
dgSearch.columns = arrayCol;
//Populate the datagrid with the XML data.
dgSearch.dataProvider = xmlSrc.row;
}
Problem #1: The checkbox column appears, I can check and uncheck the checkboxes, but they are not checked/unchecked respective to DB data when loaded.
Problem #2: How do I associate a function to the checkboxes, for instance one which will update the XML so that I can save the new data to the DB?
Anybody got the solution? Thank you in advance.
Seems to be a very old question that I saw today.
Hopefully you would have found out the solution by now, just in-case if anyone has same problem:
While adding a checkbox to column- just instantiate it 1st:
var chkTempCheck: Checkbox = new CheckBox();
Then set all the properties required:
chkTempCheck.selected = o.dBColumnToDecideCheckUnCheck
here 'o' is the Object you are using from event.result.
This will work for sure!
The initial scenario was: all columns were defined in the mxml file. The checkbox column used itemrenderer and was working properly. I was using the same datagrid in 3 different cases - only thing was that some columns were set visible/invisible depending on the 'views'. The problem was when shifting 'views' and populate the grid and shift 'views' again, the column widths kept increasing exponentially. I excluded the checkbox column and everything worked fine; columns widths were ok. I included the checkbox column back and tried setting the column widths in AS file and the column-increasing-exponentially problem was fixed but the column widths were never the same when populating grid in view A and when populating grid in view B. ...So I ventured out in trying to set the columns in AS file just after obtaining DB data. Hope you can find yourself in those situations. Thanks for helping.
I have an AdvancedDataGrid with a HierarchicalCollectionView as its dataProvider. When I view the grid with the dataset I'm working with, and click the header of the column I wish to sort on, everything works perfectly. It sorts it hierarchically exactly how I would expect it to.
What I want to do now is have the grid already be sorted when it is shown to the user. Is there a way to do this programatically? I can't for the life of me figure out how to do this, and clearly it's possible since the AdvancedDataGrid has this built in.
Edit - BTW, I've tried this:
var myData:HierarchicalCollectionView = new HierarchicalCollectionView(theDataSource);
// Works fine using only the line above and clicking the header to sort.
// This is the part that I tried adding:
var sort:Sort = new Sort();
sort.fields = [new SortField("startDate")];
myData.sort = sort;
myData.refresh();
This appears to do something as far as sorting goes, but it doesn't sort it in the same way as clicking the column header. "startDate" is a property of an object in theDataSource by the way.
Looks like you want to sort dates. Sort can't do that out of the box. You have to use a compareFunction.
If your objects are of type Date it's quite easy:
var sortField:SortField = new SortField("startDate");
sortField.compareFunction = ObjectUtil.dateCompare;
In case your column contains dates as strings you'll have to parse them first (code example from http://blog.flexexamples.com/2007/08/12/sorting-date-columns-in-a-datagrid/):
private function date_sortCompareFunc(itemA:Object, itemB:Object):int
{
/* Date.parse() returns an int, but
ObjectUtil.dateCompare() expects two
Date objects, so convert String to
int to Date. */
var dateA:Date = new Date(Date.parse(itemA));
var dateB:Date = new Date(Date.parse(itemB));
return ObjectUtil.dateCompare(dateA, dateB);
}
var sortField:SortField = new SortField("startDate");
sortField.compareFunction = date_sortCompareFunc;
Then just use the sortField like you did in your example. That should work fine.
You can create a new advanced data grid sort event and dispatch it on the grid after the hierarchical data is set on it (unfortunately I've had to use a callLater to give the grid time to deal with the collection internally it seems assignments to the dataProvider of the ADG are sometimes asynchronous)
var advancedDataGridEvent : AdvancedDataGridEvent = new AdvancedDataGridEvent(AdvancedDataGridEvent.SORT, false, true);
advancedDataGridEvent.columnIndex = columnIndex;
advancedDataGridEvent.dataField = dataField;
dispatchEvent(advancedDataGridEvent);
This code is from an extension of ADG so you would want the dispatchEvent to actually be on your instance of the grid if you're not creating an extension.
Also a note from the code:
//setting sortDescending=true on a column does not work as expected. so, until a solution
//is found, this works just as well. the event that is dispatch just tells the column
//to reset. so, one resorts ascending (the default), while a second resorts descending.
//however, this second is only dispatched if defaultSortDesc is true on the grid.
if (defaultSortDesc)
{
dispatchEvent(advancedDataGridEvent);
}
It dispatches the event twice to flip the sort.