Related
This is the component where I'm trying to put a Tooltip:
this.textFieldStreet = new Ext.form.TextField({
id : 'idTextFieldStreet',
fieldLabel : 'Street',
autoCreate : limitChar(30,30),
listeners : {
render : function(c){
Ext.QuickTips.register({
target : c.getEl(),
html : '' + Ext.getCmp('idTextFieldStreet').getValue()
}
});
}
}
});
In another .js I created the function that define every component like you see before and invoke the function as you see forward:
var componentFormCustomer = new ComponentFormCustomer();
Then I set value like:
componentFormCustomer.textFieldStreet.setValue('Some street info')
Now, here's the problem, I was looking for some ideas to do that and found nothing, I don't know if this is the right way to accomplish the tooltip. Help!
Solution:
Define show listener for created tooltip. In this listener get the value of textfield and update tooltip.
With this approach, the tooltip's content will change dynamically and will show the content of tooltip's target.
Ext.onReady(function(){
Ext.QuickTips.init();
var textFieldStreet = new Ext.form.TextField({
renderTo : Ext.getBody(),
id : 'idTextFieldStreet',
fieldLabel : 'Street',
value : 'Initial value',
bodyCfg : {
tag: 'center',
cls: 'x-panel-body',
html: 'Message'
},
listeners : {
render : function(c) {
new Ext.ToolTip({
target : c.getEl(),
listeners: {
'show': function (t) {
var value = t.target.getValue();
t.update(value);
}
}
});
}
}
});
var button = new Ext.Button({
renderTo : Ext.getBody(),
text : 'Change Tooltip',
handler : function () {
textFieldStreet.setValue('New value');
}
});
});
Notes:
Tested with ExtJS 3.4.1.
The Problem
So i am currently trying to implement a color picker inside of a Kendo grid, that will hopefully send the chosen color to my Sql Table. Unfortunately, It doesn't seem as though the Update controller is being reached. I am relatively new to Kendo UI, so there might be some incredibly dumb errors shown.
Questions
I guess my main question would be: How can i call the update method when update is clicked on the grid. Essentially, the color picker and the edit command are showing up in beautiful fashion. I just want to know how i can be sure that the method is being called when 'Update' is clicked, seeing as it is not reaching my controller. Feel free to ask if you need to see more code or perhaps a screen shot.
Code
Config.cshtml ( Grid )
#model IEnumerable<STZN.Models.AGCData.ErrorCode>
#{
ViewBag.Title = "Config";
}
#section HeadContent{
<script src="~/Scripts/common.js"></script>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
editable: "inline",
selectable: "row",
dataSource: {
schema: {
model: {
id: "error_code",
fields: {
color: { type: 'string' }
}
}
},
transport: {
read: {
type: "POST",
dataType: "json",
url: "#Url.Action("ErrorCodes")"
},
update: {
type: "POST" ,
dataType: "json",
url: "#Url.Action("UpdateErrorCodes")",
}
}
},
columns: [
{ command : [ "edit" ] },
{
field: "error_code", title: "Error Code",
},
{
field: "error_description", title: "Error Description"
},
{
field: "color",
width: 150,
title: "Color",
template: function (dataItem) {
return "<div style = 'background-color: " + dataItem.color + ";' </div>"
},
editor: function (container, options) {
var input = $("<input/>");
input.attr("color",options.field);
input.appendTo(container);
input.kendoColorPicker({
value: options.model.color,
buttons: false
})
},
}
]
});
});
</script>
}
Update Controller
public JsonResult UpdateErrorCodes(ErrorCode model)
{
using (var db = new AgcDBEntities())
{
db.Entry(model).State = System.Data.Entity.EntityState.Modified;
db.SaveChanges();
db.Configuration.ProxyCreationEnabled = false;
var data = db.ErrorCodes.Where(d => d.error_code == model.error_code).Select(x => new
{
error_code = x.error_code,
description = x.error_description,
color = x.color,
});
return new JsonResult()
{
JsonRequestBehavior = System.Web.Mvc.JsonRequestBehavior.AllowGet,
};
}
}
I actually managed to fix my issue by adding an additional input attribute to my editor function in the "color" field. It looks like this:
input.attr("data-bind","value:" + options.field);
There are still some present issues (unrelated to the fix/server update) , but as far as updating to the server, It work's as intended.
Can you please help me to have table sorter with ajax for individual column.
is there anything inbuilt method to call ajax call for filter column?
My source code is below
theme: 'blue',
widthFixed: true,
widgets: [ 'stickyHeaders', 'columnSelector','filter'],
textExtraction: function(node, table, cellIndex){
return $(node).text().replace(/\s'/g,'');
},
headers: {0: { filter: false},6: { filter: false},7: { filter: false},8: { filter: false}},
widgetOptions : {
// Use the $.tablesorter.storage utility to save the most recent filters
filter_saveFilters : false,
// jQuery selector string of an element used to reset the filters
filter_reset : 'button.reset',
// add custom selector elements to the filter row
filter_formatter : {
/*0 : function($cell, indx){
return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
dateFormat: 'dd/mm/yyyy',
changeMonth: true,
changeYear : true
});
},*/
// Alphanumeric (match)
4 : function($cell, indx){
return $.tablesorter.filterFormatter.select2( $cell, indx, {
match : true, // adds "filter-match" to header
// cellText : 'Select: ', // Cell text
width: '90%', // adjusted width to allow for cell text
value: [<%=createdBy%>], // initial values
placeholder: "Search.."
});
},
5 : function($cell, indx){
return $.tablesorter.filterFormatter.select2( $cell, indx, {
match : true, // adds "filter-match" to header
// cellText : 'Select: ', // Cell text
width: '90%', // adjusted width to allow for cell text
value: [<%=actions%>], // initial values
placeholder: "Search.."
});
},
/*7 : function($cell, indx){
return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
// from : '08/01/2013', // default from date
// to : '1/18/2014', // default to date
dateFormat : 'dd/MM/yyyy',
changeMonth : true,
changeYear : true,
cellText : ""
});
}*/
},
// option added in v2.16.0
filter_selectSource : {
// Alphanumeric match (prefix only)
// added as select2 options (you could also use select2 data option)
4 : function(table, column) {
return [<%=createdBy%>];
},
5 : function(table, column) {
return [<%=actions%>];
},
}
/* filter_placeholder : {
from : 'From...',
to : 'To...'
}*/
},
});
Please help me with above thing
thanks in advance.
If you aren't using the pager widget, then you can bind to the filterStart event. But make sure to add a method to not make another ajax call because the filterStart event will fire again after the table updates. Try something like this (this is untested code):
var $table = $('table');
$table
.on('filterBegin', function( event, filters ){
// only trigger an ajax call if the filters have changed
if ( filters.join(',') !== $table.data('lastSearch').join(',') ) {
// do some ajax stuff here
// then in the success callback, save content to table...
// then update
$table
.find('tbody')
.html( newContent )
.trigger('update');
}
})
.tablesorter({
// add your other options here
widgetOptions: {
// you might need to set this option to prevent
// rows from being hidden... maybe!
filter_serversideFiltering : true
},
initialized: function(){
lastSearch = $table.data('lastSearch');
}
});
I am using slickgrid to display certain data. How can i add custom method to slickgrid rows ?
For eg: I want to open modal box with current row data whenever enter key is pressed.
You can subscribe to the onKeyDown event in the grid to check this. Something like:
grid.onKeyDown.subscribe(function(e) {
if (e.which == 13) {
// open modal window
}
});
Let me know if this helps!
If i got your requirement well, then try out this code,
createInvoiceDetailsTable : function () {
var gridOptions, gridColumns;
gridColumns = [
{id:'ean_code', name:'EAN', field:'ean_code', width:125, cssClass: 'grid-cell'},
{id:'description', name:'Product Description', field:'description', width:250, formatter:opr.invoice.productGridDescriptionFormatter, cssClass: 'grid-cell'},
{id:'qty', name:'Qty', field:'qty', width:40, , formatter:UpdateQtyBtnFormatter},
];
gridOptions = {
editable: true,
autoEdit: true,
enableAddRow: false,
enableCellNavigation: true,
asyncEditorLoading: false,
enableColumnReorder: false,
rowHeight: 35
};
dataView = new Slick.Data.DataView();
invoiceProductGrid = new Slick.Grid($('#invoice_details_grid_div'), dataView , gridColumns, gridOptions);
function UpdateQtyBtnFormatter (row, cell, value, columnDef, dataContext) {
return '<input type="button" style="width:30px; height:30px;" class="update_invoice_product_qty" id="' + value + '" value="Q"/>';
}
}
Using this update_invoice_product_qty class name you can write event.
If this is not your requirement then please share with some code or procedure which you tried earlier.
I am using this article of architecture http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/
In my one class of Dashboardgrid i have two functions are :
,linkRenderer : function (data, cell, record, rowIndex, columnIndex, store) {
if (data != null) {
return ''+ data +'';
}
return data;
},
resellerwindow : function (cityname) {
// render the grid to the specified div in the page
// resellergrid.render();
resellerstore.load();
wingrid.show(this);
}
when the click event of linkrendrer function is called it gives error
this.resellerwindow is not a function
where and how should i put resellerwindow function ?
My ResellerDashBoard Class
Application.DashBoardGrid = Ext.extend(Ext.grid.GridPanel, {
border:false
,initComponent:function() {
var config = {
store:new Ext.data.JsonStore({
// store configs
autoDestroy: true,
autoLoad :true,
url: 'api/index.php?_command=getresellerscount',
storeId: 'getresellerscount',
// reader configs
root: 'cityarray',
idProperty: 'cityname',
fields: [
{name: 'cityname'},
{name: 'totfollowup'},
{name: 'totcallback'},
{name: 'totnotintrested'},
{name: 'totdealsclosed'},
{name: 'totcallsreceived'},
{name: 'totcallsentered'},
{name: 'totresellerregistered'},
{name: 'countiro'},
{name: 'irotransferred'},
{name: 'irodeferred'}
]
})
,columns: [
{
id :'cityname',
header : 'City Name',
width : 120,
sortable : true,
dataIndex: 'cityname'
},
{
id :'countiro',
header : ' Total Prospect',
width : 100,
sortable : true,
dataIndex: 'countiro'
},
{
id :'irotransferred',
header : 'Calls Transfered By IRO',
height : 50,
width : 100,
sortable : true,
dataIndex: 'irotransferred'
},
{
id :'irodeferred',
header : ' Calls Deferred By IRO',
width : 100,
sortable : true,
dataIndex: 'irodeferred'
},
{
id :'totcallsentered',
header : ' Total Calls Entered',
width : 100,
sortable : true,
dataIndex : 'totcallsentered',
renderer : this.linkRenderer
},
{
id :'totfollowup',
header : ' Follow Up',
width : 100,
sortable : true,
dataIndex: 'totfollowup'
},
{
id :'totcallback',
header : ' Call Backs',
width : 100,
sortable : true,
dataIndex: 'totcallback'
},
{
id :'totnotintrested',
header : ' Not Interested',
width : 100,
sortable : true,
dataIndex: 'totnotintrested'
},
{
id :'totdealsclosed',
header : ' Deals Closed',
width : 100,
sortable : true,
dataIndex: 'totdealsclosed'
},
{
id :'totresellerregistered',
header : ' Reseller Registered',
width : 100,
sortable : true,
dataIndex: 'totresellerregistered'
}
]
,plugins :[]
,viewConfig :{forceFit:true}
,tbar :[]
,bbar :[]
,height : 350
,width : 1060
,title : 'Reseller Dashboard'
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
Application.DashBoardGrid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
/**
* It is the renderer of the links of cell
* #param data value of cell
* #param record object of data has all the data of store and record.id is unique
**/
,linkRenderer : function (data, cell, record, rowIndex, columnIndex, store) {
if (data != null) {
return ''+ data +'';
}
return data;
},
resellerwindow : function (cityname) {
// render the grid to the specified div in the page
// resellergrid.render();
resellerstore.load();
wingrid.show(this);
}
,onRender:function() {
// this.store.load();
Application.DashBoardGrid.superclass.onRender.apply(this, arguments);
} // eo function onRender
});
Ext.reg('DashBoardGrid', Application.DashBoardGrid);
Your scope is messed up, when the function in your <a> tag is called this does not point to your object where you defined the function but to your <a>-dom node.
It's pretty hard to call member functions from within a html fragment like the fragment returned by a grid renderer. I suggest you take a look at Ext.grid.ActionColumn to solve this problem. When you look at the code in this column type you should be able to write your own column type that renders a link instead of an icon like the ActionColumn.
Another option is using my Ext.ux.grid.ButtonColumn which doesn't render links but buttons in your grid.
more info on scope in ExtJS (and js in general): http://www.sencha.com/learn/Tutorial:What_is_that_Scope_all_about
this.resellerwindow is not a function
because 'this', in the onclick function is in fact a reference to the 'a' dom element;
In order to access the 'resellerwindow' function from the onclick handler, you need to make the function accessible from the global scope, where your handler is executed:
var globalObj =
{
linkRenderer : function (data, cell, record, rowIndex, columnIndex, store)
{
if (data != null)
return ''+ data +'';
return data;
},
resellerwindow : function (cityname)
{
// render the grid to the specified div in the page
// resellergrid.render();
resellerstore.load();
wingrid.show(this);
}
}
so use the globalObj.resellerwindow(......);
The problem is that this does not point to the class itself. Should you need to render the a element as a string instead of JavaScript object you will need to call a global function in which to call the resellerwindow function (after obtaining correct reference). However, I believe a much more efficient way would be to abandon the string and use JavaScript object instead. Then you can do something like the following:
var a = document.createElement("a");
a.onclick = this.resselerwindow;
If you use jQuery something like the following can be used:
return $("<a />").click(this.resselerwindow)[0];
instead of building and passing direct html, try these.
Create Anchor object
{ tag: 'a',
href: '#',
html: 'click me',
onclick: this.resellerWindow }
Make sure that, scope in linkRenderer is grid, by settings 'scope: this' in that column definition. So that this.resellerWindow refers to grid's function.
try returning created object.