Develop Reference

Kendo Grid - Dont allow certain records for editing

I have the below command button column in my Kendo grid..
How to disable the "Edit" button in the rows with empty "ItemValue".
$("#list485").kendoGrid({
dataSource: dataSource,
columns: [
{ command: [{ name: "edit" }], title: " ", width: "100px"},
{ field: "ItemValue", title: "Item Description" }
],
editable: "popup"
});

you may hide edit button by on dataBound function as below
dataBound: function (e) {
var grid = $("#list485").data("kendoGrid");
var gridData = grid.dataSource.view();
for (var i = 0; i < gridData.length; i++) {
var currentUid = gridData[i].uid;
if (gridData[i].ItemValue == "") {
var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
var editButton = $(currenRow).find(".k-grid-edit");
editButton.hide();
}
}
}
i hope this will help you

Not sure if this can fulfill your need but it works fine for inline editing.
$("#list485").kendoGrid({
dataSource: dataSource,
columns: [
{ command: [{ name: "edit" }], title: " ", width: "100px"},
{ field: "ItemValue", title: "Item Description" }
],
editable: "popup",
edit: function(e) {
if(e.model.ItemValue == 100)//your condition
{
$("#grid").data("kendoGrid").refresh();
}
}
});
Anyway this is what I could able to find till now.
There must be some better solution for this.

EnhancedGrid within another EnhancedGrid

I'm using the dojo grid cell formatter to display an inner grid within another grid. Even though the inner grid is added, it does not display on the HTML page cause its height and width are 0px.
My JSP page and the JS page where the grids are created is shown below. Any help will be appreciated.
My guess is that calling grid.startup() in the cell formatter is probably not the right place. But where should I move the startup() call to -or- is there something else that needs to be done to get the inner grid to render correctly.
----JSP file ----
<script type="text/javascript"> dojo.require("portlets.ListPortlet"); var <portlet:namespace/>args = { namespace: '<portlet:namespace/>', listDivId: 'listGrid' }; var <portlet:namespace/>controller = new portlets.ListPortlet(<portlet:namespace/>args); dojo.addOnLoad(function(){ <portlet:namespace/>controller.init(); }); </script>
</div>
----JS file ----
dojo.declare("portlets.ListPortlet", null, {
constructor: function(args){
dojo.mixin(this,args);
this.params = args;
},
init: function(){
var layout = [[
{field: 'site', name: 'Site', width: '30px' }
{field: 'name', name: 'Full Name', width: '100px'},
{field: 'recordStatus', name: 'Status', width: '80px' }
],[
{field: '_item', name: ' ', filterable: false, formatter: this.formatNotesTable, colSpan: 3 }
]];
this.grid = new dojox.grid.EnhancedGrid({
autoHeight: true,
autoWidth: true,
selectable: true,
query:{
fromDate: start,
toDate: end
},
rowsPerPage: 10
});
this.grid.placeAt(dojo.byId(this.listDivId));
this.dataStore = new dojox.data.JsonRestStore({target: dataURL, idAttribute: idAttribute});
this.grid.setStructure(layout);
this.grid.startup();
},
formatNotesTable(rowObj) {
var gridData = {
identifier:"id",
items: [
{id:1, "Name":915,"IpAddress":6},
{id:2, "Name":916,"IpAddress":7}
]
};
var gridStructure = [{
cells:[
[
{ field: "Name",
name: "Name",
},
{ field: "IpAddress",
name: "Ip Address" ,
styles: 'text-align: right;'
}
]
]
}];
var gridStore = new dojo.data.ItemFileReadStore( { data: gridData} );
var cpane = new dijit.layout.ContentPane ({
content: "inner grid should be displayed below"
});
var subgrid = new dojox.grid.DataGrid({
store: gridStore,
structure: gridStructure,
style: {width: "325px", height: "300px"}
});
subgrid.placeAt(cpane);
subgrid.startup();
return cpane;
}
}

I solved my problem by using a dojox.layout.TableContainer inside the EnhancedGrid.

Check whether cursor is inside table in ckeditor dialog?

I am using ckeditor , and I have added 1 dialog where on button click i want to check whether cursor is inside table in ckeditor dialog ?
this is dialog code where on click of button i need to check the above condition
CKEDITOR.dialog.add( 'NDFSRSDialog', function( editor ) {
return {
title: 'Formula Editor',
contents: [
{
id: 'tab-basic',
label: 'Basic condition',
elements: [
{
type: 'text',
id: 'NDFSRS',
label: 'FIELD',
validate: CKEDITOR.dialog.validate.notEmpty( " field cannot be empty" )
},
{
type: 'button',
id: 'title',
label: 'CONDITION',
validate: CKEDITOR.dialog.validate.notEmpty( " field cannot be empty" ),
onclick : function( )
{
alert(0);
}
}
]
}
],
onOk: function() {
var dialog = this;
dialog.getElement('tab-basic', 'NDFSRS' ).hide();
}
};
});

Like this ?
if($("#ckeditor").is(":focus")){
//do stuff here
}

$( '#save' ).on( 'click', function () {
var editor = CKEDITOR.instances.ficeditor,
sel = editor.getSelection(),tbchk;
tbchk = sel.getStartElement();
while(tbchk!=null){
if(tbchk!=null && tbchk.getName()=="table"){
console.log("inside table");
}
tbchk=tbchk.getParent();
}
});

How do i get a class instance in Extjs?

I defined a class 'IMS.SellMgt.testForm'.when i click the button 'submit',i want to get 'var test = this.formPanel;',why test is null? if i want to get this.formPanel,how can i do?Thank you!
Ext.define('IMS.SellMgt.testForm', {
formPanel: null,
LoadForm: function () {
this.formPanel = new Ext.form.Panel({
renderTo: 'form-ct',
frame: true,
title: 'XML Form',
width: 300,
items: [{
xtype: 'fieldset',
title: 'Contact Information',
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
emptyText: 'First Name',
name: 'first'
}
]
}],
buttons: [{
text: 'Submit',
handler: function () {
var test = this.formPanel;
}
}]
});
}
});
Ext.onReady(function () {
var frmTest = Ext.create('IMS.SellMgt.testForm', {});
frmTest.LoadForm();
});

try something like:
......
handler: function () {
var test = this.findParentByType(Ext.form.FormPanel);
}
....

handler is a simpler way of specifying a click event listener for the button. Since it is short hand, it has some drawbacks.
With handler, the context of the function is always the button. In other words, this inside the handler function is the button, not your form.
In order for this to be your class, use a listener with a scope specified:
buttons: [{
text: 'Submit',
listeners: {
click: function() {
this.formPanel; // will work now
...
},
scope: this // this is the key
}
}]
You can also use up to find the form:
handler: function() {
var form = this.up('form');
...
}

Ext js combo not working properly

I'm new in ExtJS and I'm trying to display a window with a combo, a cancel and an OK button but the combo does not seem to be working properly: It's not showing the label and when I click the picker (or the trigger) it does not show the list.
I need the combo to either accept free text and selected values but I don't know what I'm doing wrong. I went over Sencha api and forums but I can't work this out.
I hope you guys have a solution for this. Thanks and sorry if my English is not good enough.
function new_filter()
{
var ds_filter2 = new Ext.data.JsonStore({
url: 'forms-combobox-data-filters.php?user='+user_id,
fields: ['id', 'name'],
autoLoad: true/*,
totalProperty: "results"*/
});
var dlg = new Ext.Window(
{
title: 'Save Current Settings as a Filter',
id: 'frmFilter',
width: 350,
y: 200,
height: 120,
minWidth: 350,
minHeight: 100,
iconCls: 'save',
bodyStyle:'padding:0px 0px 0px 0px; background-color:#F5F5F5;',
modal: true,
resizable: false,
maximizable: false,
draggable:false,
closable: true,
closeAction: 'close',
hideMode: "offsets",
constrainHeader: true,
//autoLoad: { url : 'filter_form2.php', scripts: true},
keys: [
{ key: [Ext.EventObject.ENTER], handler: function() {
create_new_filter();
}
},
{ key: [Ext.EventObject.ESCAPE], handler: function() {
dlg.close();
}
}],
buttons:[
{
text : 'OK',
handler: function()
{
var selectedValue = Ext.getCmp('combo-new-filter').value; //selectedValue => Nombre
var rec = ds_filter2.getById(selectedValue); //rec => ID
//alert('rec: '+rec+'\nselected value: '+selectedValue);
if (rec == undefined ) //si el valor seleccionado no se encuentra en combo
{
create_new_filter(selectedValue);
dlg.close();
}
else
{
//alertar con el message box si se desea sobre escrbir el filtro
//ok---> grabar
//cancel--->cancelar
var selected_text = rec.get('name');
var id = rec.get('id');
//alert("selected text: "+selected_text);
Ext.MessageBox.confirm('Confirm','Are you sure you want to overwrite this filter "'+selected_text+'"?', function(btn)
{
if (btn=='yes')
{
var url = 'deleteFilter.php?filter='+id;
var mnmxmlhttp = Array ();
mnmxmlhttp = new myXMLHttpRequest ();
if (mnmxmlhttp)
{
mnmxmlhttp.open ("POST", url, true);
mnmxmlhttp.setRequestHeader ('Content-Type', 'application/x-www-form-urlencoded');
mnmxmlhttp.send ("");
mnmxmlhttp.onreadystatechange = function ()
{
if (mnmxmlhttp.readyState == 4)
{
create_new_filter(selected_text);
}
}
}
}
});
}
}
},
{
text : 'Cancel',
handler: function() {
dlg.close();
}
}
],
items:[
/*{
xtype: 'label',
forId: 'myFieldId',
text: 'Name of saved filter:',
},*/
{
id:'combo-new-filter',
labelAlign: 'left',
fieldLabel: 'Filter Name:',
xtype: 'combo',
store: ds_filter2,
//queryMode: 'local',
displayField:'name',
valueField: 'id',
//editable: true,
x: 110,
y: 20,
listeners: {
/*beforerender: function(combo){
combo.setValue("Select saved filter to apply");
},
select:{fn:function(combo, value) {
if (combo.getValue()>0){onSelectFilter(combo.getValue());}
}
}*/
}
}
]
});
dlg.show();
}

Your window needs to have the layout: 'form' configuration. In order to display fields, combos, etc, the layout that contains them needs to be a form one.