Kendo Grid in MVVM and translating or customizing command buttons - mvvm

This is my MVVM Code and I have troubles customizing the text of Update/Cancel command buttons.
I have customized Edit/Delete buttons but what about the command buttons that are hidden for now and will be visible when I click on Edit button?
Please help me customizing such commands. How can I do that?
<div id="grid" data-role="grid" data-sortable="true" data-editable="inline" data-Scrollable="true"
data-toolbar='[{name:"create", text:"新しいドメインの追加"}]'
data-pageable="true" data-columns='[{field: "Domain", title: "ドメイン", width: 250, filterable: false, sortable: false},
{"command": [{name:"destroy",text:"削除"},
{name:"edit",text:"編集"}]}]'
data-bind="source: dataSource, events: { edit: edit, dataBound: dataBound }"></div>
Answering this question would help a lot of people who want to customize or translate Update Command or Cancel Command as well as Edit Command or Destroy Command.

If you want to customize the buttons update,cancel,delete,add,edit just do this
{
command : [{
name : "edit",
text : {// sets the text of the "Edit", "Update" and "Cancel" buttons
edit : "CustomEdit",
update : "CustomUpdate",
cancel : "CustomCancel"
},
}, {
name : "destroy",
text : "Destroy"
} // sets the text of the "Delete" button
]
Here is a fiddle

For localizing Update and Cancel buttons when you update on popup mode, you need to define the command as:
command: [
{
name: "edit",
text: { edit: "Edita", update: "Actualiza", cancel: "Cancela"}
},
{
name : "destroy",
text : "Borra"
}
],
EDIT: If you also want to change the title of the popup window, then you should add window.title to editable in the grid definition:
editable : {
mode : "popup",
window : {
title: "Edición",
}
},
If you want to take a look into an example: JSFiddle

Related

Change Kendo grid row on click

I'm hoping someone can offer help in this. I have a Kendo grid in a html document (no MVC), and am wanting to change the class of the entire row on row select. I have tried various approaches, still with no luck. I am currently at:
// within kendo grid definition - grid called '#grid'
change: function (e) {
$("#grid tbody").find("tr[k-state-selected]").css("color", "black");
var id = $("#grid").closest("tr").css("color", "black");
CallDocument(this._data[0]);
},
The function CallDocument is being fired, and so I know I can at least get to the function.
EDIT: Here is the solution that I came up with, and thanks to everyone
change: function (e) {
$("#grid tbody").find("tr.k-state-selected").attr("class", "detail read k-state-selected");
},
I needed to use the 'tr.k-state-selected' form, and change using attr in order to change the set of classes.
To mark every visited row as selected, you might add a CSS class on change event.
var grid = $("#grid").kendoGrid({
dataSource: ds,
editable : false,
pageable : true,
selectable: true,
columns :
[
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 200, title: "Last Name" },
{ field: "City", width: 200 }
],
change : function (e) {
this.select().addClass("ob-selected");
}
}).data("kendoGrid");
The class ob-selected stays when you move to another cell since this does nothing to do with KendoUI.
Example here : http://jsfiddle.net/2TGLp/1/
The only question is that it does not stay selected if you apply filters, change to a different page... but not sure if this is important for you.
I override my Kendo styles using both css and javascript (depending on the scenario).
CSS:
.k-state-selected {
color: black;
}
Javascript/jQuery:
$('k-state-selected').css('color', '#000000')

Extjs3.3.0 numberfield

The window contain a form which including NumberField(allowBlank: false), as soon as you open the window the NumberField is outlined in red. saying the field is required. but we hope the NumberField should not be outlined in red unless the user clicks the filed and clicks away without entering anything. how to config this NumberField.
extjs library: 3.3.0
Here is what I do.
Basically I listen to 'focus'/'blur' event and if value is blank, call markInvalid, otherwise clearInvalid.
xtype : 'numberfield',
fieldLabel :'number',
markNumberInvalid : function(){
if(this.getValue() == ""){
this.markInvalid();
}else{
this.clearInvalid();
}
},
listeners : {
'focus' : function(){
this.markNumberInvalid();
},
'blur' : function(){
this.markNumberInvalid();
}
}

Sencha Touch 1.1.0: Form is not showing scrollbars

I am creating an Application that consist of a Panel,
This panel contains a Tab-Panel and a Form-Panel. (Initially, Form-Panel is Hidden)
The Tab-Panel has a Tab, which contains a List.
When Tapped on a List-Item it dose the following
Shows the Form-Panel
Hides the Tab-Panel
My Problem is When it does so , The form do not show any scroll bars, How ever when i change the orientation of the device(iPhone) and then it allows me to scroll.
Can anyone explain me if i am doing it correctly, or is there any better way to achieve this functionality, or can the Main Panle be changed with a view Port ?
A small example will be really great.
Below is my Code (i will try to keep it simple)
Decleration of List and Event Listener
var lstRequestTracker = new Ext.List({
itemTpl : '{emplFirstName} {emplLastName}'
,store : storeRequestTracker
,fullscreen: true
});
lstRequestTracker.on('itemtap', function( oThis, index, item, event) {
var rec = oThis.getStore().getAt(index);
tpnlMyForms.hide();
fpnlOnBoard.show();
//pnlMain.doComponentLayout();
fpnlOnBoard.doComponentLayout();
});
Code for declaring the Main-Panel, Tab-Panel and The Form-Panel
var tpnlMyForms = new Ext.TabPanel({
tabBar : {dock : 'bottom', layout:'hbox'}
,fullscreen : true
,defaults : {scroll: 'vertical', layout:'fit'}
,items : [ {
title : 'Request Tracker'
,items : [lstRequestTracker]
,iconCls: 'time'
}
]
});
var fpnlOnBoard = new Ext.form.FormPanel({Contains form Fields});
Ext.setup({
onReady: function() {
var pnlMain = new Ext.Panel({
fullscreen : true
,dockedItems: [{dock:'top', xtype:'toolbar',title:'STARS'}]
,layout: 'fit'
,items : [tpnlMyForms,fpnlOnBoard]
});
fpnlOnBoard.hide();
}// eo onReady Function
});
Have you tried giving your formPanel a scroll option (scoll: 'horizontal') ? I really don't know wether this will help, but I remember I also had a form a few days ago and this was the solution. That had nothing to do with the device orientation by the way, but who knows..

TinyMCE - Pass value from Popup

I am using TinyMCE . On a Click I am opening an inline popup successfully.But I have no idea how I can pass a value from popup to tinyMCE.Any help highly appreciated.
tinyMCE.activeEditor.windowManager.open({
file : "options.jsp",
title : 'Image Manager',
width : 800,
height : 600,
resizable : "yes",
inline : "yes",
close_previous : "no",
win : window
});
Took me some time to find it out myself. It is not that difficult. To insert HTML to your editor from the popup you may use something like
var my_html_code = 'New phrase!';
tinyMCEPopup.execCommand('mceInsertContent', false, my_html_code);
Using tinyMCEPopup.editor you may address the editor from where you opened the popup.
You could for example set a variable in the editor using
tinyMCEPopup.editor.new_variable = 'blah blah';

Adding custom tag with TinyMCE using ed.selection.setContent

I'm trying to add a custom tag to content selected in the editor, but <title> content </title> does not work. This works though: [title] content [/title]
Googling leads me to believe that I need to use these lines as well, but it does not help:
extended_valid_elements : "title",
custom_elements: "title",
Example:
For some reason this code does not work:
setup : function(ed) {
// Add a custom button
ed.addButton('mybutton', {
title : 'My button',
'class' : 'Mybutton',
image : 'img/example.gif',
onclick : function() {
// Add you own code to execute something on click
ed.focus();
ed.selection.setContent("<title>" + ed.selection.getContent() + '</title>');
}
But this works:
setup : function(ed) {
// Add a custom button
ed.addButton('mybutton', {
title : 'My button',
'class' : 'Mybutton',
image : 'img/example.gif',
onclick : function() {
// Add you own code to execute something on click
ed.focus();
ed.selection.setContent("[title]" + ed.selection.getContent() + '[/title]');
}
This is the way to go
extended_valid_elements : "title",
custom_elements: "title",
You do not see anything because title is not defined elsewhere than in the head.
You will find your title-tag using firebug and it will hold what you expect to hold (ed.selection.getContent() wrapped into a title-tag.):