extjs adding form contents to another form - form-submit

I have 2 forms,
var f1 = new Ext.form.FormPanel({
items: [{ xtype: 'label', text: 'form1'}]
});
var f2 = new Ext.form.FormPanel({
items: [{ xtype: 'label', text: 'form2'}]
});
I want to send form1 's items to form2 so that i only need 1 submit call. Is there any way to do that?

Keep only One submit button and add these two panels by using card or border layout.
On click of submit you collect all the details and if any validation needed do in Submit button click handler and go ahead.
I don't think its so difficult.
Have a look on layout examples and how to add forms as items.

Related

How to put field value in footer Kendo grid?

I want to get a value from a field in my grid, and put it in the footer of the grid. Is there a smart way to do it like
columns: [
{field: "product", title: "Product"},
{field: "price", title: "Price"},
{field: "priceDoubledInFooter", title:"priceDoubledInFooter",footerTemplate:#=price*price#},
]
I have prepared a simple dojo for you: http://dojo.telerik.com/UWOvi/2
This shows the contact names within the demo grid in a bootstrap popover when clicked.
Without knowing your specific needs I have included all the values from one column into the popover.
This is achieved by creating a function called getMeValues() that is assigned to the footerTemplate.
This function then does the following:
function getMeValues(data)
{
var gridDS = $('#grid').data('kendoGrid').dataSource.data();
var result = '';
gridDS.forEach(function(row, index){
result += index + '::' + row.ContactName + '<br/>';
});
return '<button class="btn btn-primary" data-container="body" data-toggle="popover" data-title="I am some data" data-content="' + result + '"/>' + ' Click Me</button>';
}
I gain access to the data within the dataSource for the grid and then iterate over the ContactName field and add that to a var. I finally then create a button which is placed in the footer which activates a popover to display the contents.
Then to get the newly created button to function I bind the popover event within the dataBound event of the grid so that it knows to activate the button for me.
Obviously change this example for your specific needs but if you have any further questions I'll be happy to help.

How to open kendoWindow() on a button click event inside a Kendo grid?

In my Kendo grid, I've a column (address). Instead of displaying customer's address, it shows a button. On clicking the button, I want to open a Kendo window as a modal and display the address.
...
{ field: "address",
title: "Customer Address",
width: "130px",
filterable: false,
template: '<span class="viewButton"><input type="button" value="Address" class="k-primary"></input></span>'
},
...
I've tried various strategies, including a custom command, an onClick event handler for the grid etc. But none seems to work. The best I've achieved so far is using custom command, in which I can open the Kendo window, but unable to display the underlying data for the column.
Any ideas for any possible way to achieve this?
You can get hold of current dataItem and show it in window.
$("#grid").on("click", ".viewButton",function(e){
var dataItem = grid.dataSource.dataItem($(e.currentTarget).closest('tr'));
var yourText = dataItem.address;
});

kendo tree view check boxes issue

I have kendo tree view with check boxes. When i do the button click the values are getting lost after refresh. I wanted to show back to the user after button click could you please help me on this.
$("#treeview1").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource:EquipmentTypes,
id: ["EquipmentTypeId"],
dataTextField:["EquipmentTypeName"],
expanded: false,
spriteCssClass: "rootfolder",
dataValueField: ["EquipmentTypeId"],
value:"#Model.UtilizationFilter.EquipmentTypeFilter"
});
I assume this is because the button in the question does a post of a form. If that is the case then I don't see any easy solutions.
You could either change the buttons so they fetch via ajax. Or add a change event to the tree and then save the values in hidden fields and set them manually after load.
.Events(e => e.Check("onCheck"))

Kendo Grid -- custom command doesn't fire after popup edit close

I've noticed that my custom Grid command is not working after a popup edit dialog is opened and closed (cancelled).
The command delrow is used to display a custom delete confirmation (I've simplified it in the fiddle to just use a standard JS confirmation).
I've setup a Fiddle that demonstrates the problem.
It works when the grid is initially loaded, but not after a cancelled edit. Not sure if this is a bug or something I'm doing wrong.
Any advice would be much appreciated. Thanks
Is the way you do it. You are binding the click event in the dataBound but when you cancel the edition the row is refreshed and you loose the bind.
You should define the action using click property as:
columns : [
{
command: [
{name: 'edit'},
{name:'delrow', click: delRow}],
title: ' ',
width: 100
},
{ field: "FirstName", width: 90, title: "First Name" },
...
Where delRow is the same code that you have as click event handler:
function delRow(e) {
var row = $(this).parents('tr:first');
var r=confirm("Are you sure you want to delete this row!");
if (r==true)
{
var g = grid.data('kendoGrid');
g.removeRow(row[0]);
}
}
See it in action here : http://jsfiddle.net/OnaBai/XNcmt/56/

Firefox ToolBar Button When Click Changes DOM?

New to firefox development and trying my best to figure this out.
Say I want to call a function in tap_browser.js that will modify the DOM when the user clicks on the toolbar widget, how would I do this?
This is the code I have so far
require("toolbarwidget").ToolbarWidget({
toolbarID: "nav-bar", // <-- Place widget on Navigation bar
id: "tap-icon",
label: "Tap",
contentURL: data.url("favicon.png"),
contentScriptFile: [data.url("tap_browser.js")]
});
I'm currently using a library to create the toolbar widget here: https://github.com/Rob--W/toolbarwidget-jplib
I don't know too much SDK but I helped someone with something that does. Check this out:
var my_wid = widgets.Widget({
id: "my-widget",
label: "CLIIIICK",
content: "CLICK ME",
width: 100,
onClick: function()
{
require('sdk/window/utils').getMostRecentBrowserWindow().gBrowser.contentDocument.documentElement.innerHTML = 'hi';
}
});
what this does is it shows a panel with 0 width and height, you can put stuff in there, and when it shows it executes the onShow function to change the html of the current document. its not recommended to use innerHTML, addons arent accepted. Im just showing you a quick and dirty copy paste example. One that is different from the sdk doc page "Modifying the Page Hosted by a Tab"

Resources