How to get Ember.js's bindAttr to refresh? - css

I am trying to create "sort by" buttons which change sorting and css-classes when clicked on using Ember.js.
The sorting part and the initial class assignments work, however, the class assignments are not refreshed when I update the dependant properties.
What am I missing?
This is in my HTML:
<script type="text/x-handlebars" data-template-name="sort-option-item">
<dd {{bindAttr class="IsActive:active IsDesc:reversed"}}
{{action sortBy on="click"}}>{{Name}}</dd>
</script>
<script type="text/x-handlebars">
{{#each option in controller.sortOptions}}
{{view App.SortOptionView controllerBinding="option"}}
{{/each}}
</script>
An this is in my Javascript:
var App = null;
$(function () {
App = Ember.Application.create();
// Define Types:
App.SortOptionCtrl = Ember.Controller.extend({
Name: null,
Predicate: null,
Controller: null,
IsActive: false,
IsDesc: false,
sortBy: function () {
if (this.Controller != null)
this.Controller.sortBy(this.Predicate);
},
Check: function () {
this.IsActive = this.Controller != null
&& this.Controller.isSortedBy(this.Predicate);
this.IsDesc = this.Controller != null
&& this.Controller.isSortedDescBy(this.Predicate);
// adding an alert(this.IsActive); here
// proves that the function is indeed called and works as expected
}
});
App.ProductsController = Ember.ArrayController.extend({
initialized: false,
content: [],
viewContent: [],
sortProperties: ['Order'],
sortAscending: true,
sortOptions: [],
initialize: function () {
if (this.initialized == true)
return;
this.initialized = true;
var ctrl = this;
this.sortOptions.pushObject(App.SortOptionCtrl.create({
Name: 'Unsorted',
Predicate: null,
Controller: ctrl,
}));
this.sortOptions.pushObject(App.SortOptionCtrl.create({
Name: 'By Name',
Predicate: 'Name',
Controller: ctrl,
}));
this.sortOptions.pushObject(App.SortOptionCtrl.create({
Name: 'By Date',
Predicate: 'Date',
Controller: ctrl,
}));
this.sortOptions.forEach(function (opt) { opt.Check(); });
},
load: function () {
this.initialize();
// ....
},
sortBy: function (predicate) {
var prevPredicate = this.sortProperties[0];
if (predicate == prevPredicate && predicate != null) {
this.sortAscending = !(this.sortAscending);
}
else {
this.sortAscending = true;
}
this.sortProperties.length = 0;
if (predicate)
this.sortProperties.pushObject(predicate);
else
this.sortProperties.pushObject('Order');
this.sortOptions.forEach(function (opt) { opt.Check(); });
},
isSortedBy: function (predicate)
{
if (predicate == null)
predicate = 'Order';
var activePredicate = this.sortProperties[0];
if (predicate == activePredicate) {
return true;
}
else {
return false;
}
},
isSortedDescBy: function (predicate) {
if (predicate == null)
predicate = 'Order';
var activePredicate = this.sortProperties[0];
if (predicate == activePredicate) {
if (this.sortAscending)
return false;
else
return true;
}
else {
return false;
}
},
});
App.SortOptionView = Ember.View.extend({
templateName: 'sort-option-item'
});
// Create Instances:
App.productsController = App.ProductsController.create({
});
App.productsController.load();
App.initialize();
});
Versions: Ember: 1.0.0-rc.2, handlebars: 1.0.0-rc.3

If you want your views to react to whatever happens in the controller, you should create computed properties (via fn(){}.property('dependency')). However, in order for computed properties to work properly, you need to use Ember's get() and set() property accessors.
In your code you are doing things like
this.IsActive = this.Controller != null &&
this.Controller.isSortedBy(this.Predicate);
When you should be doing something like this:
this.set('active',
this.get('controller') != null &&
this.get('controller').isSortedBy(this.get('Predicate'))
);
You might have noticed that this code is setting a value into active, but the template is listening to isActive. That property has been changed into a computed property:
isActive: function() {
return this.get('active');
}.property('active')
It will listen for changes in the active property, and whenever that happens, it will cache the new value, and notify all subscriber objects to refresh/update.
Using Ember's get and set accessors is indicated in order to properly use the observables that make this chain of events possible.
I have modified your sample applying get and set where appropriate.
You can see it in this fiddle: http://jsfiddle.net/schawaska/fRMYu/

After Joe's help, more reading of Ember's manual and clean up of my code, I got to this sorter solution:
Sort option controller:
App.SortOptionCtrl = Em.Controller.extend({
Name: null,
Predicate: null,
_isActive: false,
isActive: function () {
return this.get('_isActive');
}.property('_isActive'),
_isDesc: false,
isDesc: function () {
return this.get('_isDesc');
}.property('_isDesc'),
controller: null,
updateState: function () {
if (!this.Predicate) {
this.set('_isActive', (this.get('controller')
.get('activePredicate') == null));
this.set('_isDesc', false);
}
else {
this.set('_isActive', (this.get('controller')
.get('activePredicate') == this.Predicate));
this.set('_isDesc', (this.get('_isActive')
&& !this.get('controller').get('sortAscending')));
}
}.observes('controller.activePredicate', 'controller.sortAscending'),
sortBy: function () {
if (this.get('controller') != null) {
this.get('controller').sortBy(this.Predicate);
}
},
});
Products controller:
App.ProductsController = Ember.ArrayController.extend({
content: [],
viewContent: [],
activePredicate: null,
sortProperties: ['Order'],
sortAscending: true,
sortOptions: [],
filter: function (obj) {
return true;
},
init: function () {
this._super();
var ctrl = this;
this.sortOptions.pushObject(App.SortOptionCtrl.create({
Name: 'Unsorted',
Predicate: null,
controller: ctrl,
}));
this.sortOptions.pushObject(App.SortOptionCtrl.create({
Name: 'By Name',
Predicate: 'Name',
controller: ctrl,
}));
this.sortOptions.pushObject(App.SortOptionCtrl.create({
Name: 'By Date',
Predicate: 'Date',
controller: ctrl,
}));
this.sortOptions.forEach(function (opt) {
opt.updateState();
});
},
sortBy: function (predicate) {
var prevPredicate = this.sortProperties[0];
if (predicate == prevPredicate && predicate != null) {
this.set('sortAscending', !(this.get('sortAscending')));
}
else {
this.set('sortAscending', true);
}
this.set('activePredicate', predicate);
this.set('sortProperties.length', 0);
if (predicate)
this.get('sortProperties').pushObject(predicate);
else
this.get('sortProperties').pushObject('Order');
},
});

Related

FullCalendar input is undefined in eventDataTransform

I have this app with fullcalendar and everything but the eventDataTransform works fine. The code is really large, so i will publish the relevant parts
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,basicDay',
},
allDaySlot: false,
nextDayThreshold: '00:00:00',
slotLabelFormat: 'h(:mm)a',
views: {
month: {
//para que no se pueda arrastrar en la vista month
droppable: false,
timeFormat: 'h(:mm)a',
showNonCurrentDates:true,
},
week: {
timeFormat: 'h:mm:ss a'
},
day: {
timeFormat: 'h:mm:ss a'
},
basicDay:{
droppable: false,
}
},
locale: getVarLocale(),
editable: true,
droppable: true,
slotDuration: '00:15:00',
eventDurationEditable:false,
eventDragStart:function( event, jsEvent, ui, view ) {
isDragging=true;
},
eventDragStop:function( event, jsEvent, ui, view ) {
isDragging=false;
},
dayClick: function (date, jsEvent, view) {
if(isValidDate(date)==false)
return false;
if (view.name === "month") {
$('#calendar').fullCalendar('gotoDate', date);
$('#calendar').fullCalendar('changeView', 'agendaDay');
}
},
eventOverlap: function (stillEvent, movingEvent) {
if(stillEvent.start.isSame(movingEvent.end)||stillEvent.end.isSame(movingEvent.start)){
return false;
}
if (movingEvent.type == tiposEventos.bloque){
if(isDragging==false)
performAlert(translationCal.noNestedBlock,'event');
return false;
}
if(movingEvent.overlaped==false){
if (stillEvent.type!=tiposEventos.bloque){
if(isDragging==false)
performAlert(translationCal.noOverlapAllowed,'block');
return false;}
}
if(movingEvent.start.isBefore(stillEvent.start)){
if(isDragging==false)
return false;
}
updateEvent(stillEvent, movingEvent,true);
return true;
function performAlert(msg,type){
var alerted = localStorage.getItem(type) || '';
if(alerted=='alerted')
return false;
localStorage.setItem(type,'alerted');
var e=Array();
e.push(msg);
addModalError('pm-modal-error',$translation.error, e);
}
},
eventDataTransform:function(eventData){
console.log(eventData);
},
eventSources:[
{
events: function (start, end, timezone, callback) {
var events = [];
var options = {};
options.data = {};
options.data.start=start.format('YYYY-MM-DD');
options.data.end=end.format('YYYY-MM-DD');
options.type = 'text/json'
options.method = 'POST';
options.url = Routing.generate('publication_all');
options.errorcallback = function (error) {
console.log(error);
}
options.successcallback = function (data) {
var parseData = JSON.parse(data);
$(parseData).each(function () {
var startTime = this.startTime;
startTime = (((startTime.date).split(' ')[1]).split('.'))[0];
var startObj = moment(startTime, 'HH:mm:ss');
var startDate = (this.startDate.date).split(' ')[0];
var startDate = moment(startDate, 'YYYY-MM-DD HH:mm:ss').utcOffset(+0000);
startDate.set({
'hour': startObj.get('hour'),
'minute': startObj.get('minute'),
'second': startObj.get('second')
});
var endTime = this.endTime;
endTime = (((endTime.date).split(' ')[1]).split('.'))[0];
var endObj = moment(endTime, 'HH:mm:ss');
var endDate = (this.endDate.date).split(' ')[0];
endDate = moment(endDate, 'YYYY-MM-DD HH:mm:ss').utcOffset(+0000);
endDate.set({
'hour': endObj.get('hour'),
'minute': endObj.get('minute'),
'second': endObj.get('second')
});
if(isValidDate(startDate)==true){
events.push(
{
title: this.title, // use the element's text as the event title
idRef: this.idRef,
type: this.type,
publicationId: this.idPub,
color: setColors(this.type,this.idRef),
overlaped: false,
overlaps: false,
parentBlock: this.parent,
start: startDate,
end: (startDate.diff(endDate)==0)?endDate.set({'second':endDate.get('second')+1}):endDate,
stick: true,
idRef: this.ref,
direct:-1,
allDay:false,
durationEditable:(this.type==tiposEventos.bloque||this.type==tiposEventos.patron||this.type==tiposEventos.sennal)?true:false
}
);
}
});
callback(events);
};
ajaxAccess(options);
}
}
],
});
});
The thing is, everything works fine, but the eventDataTransform always throws TypeError: input is undefined
out._id = input._id || (input.id === undefined ? '_fc' + eventGUID++ : input.id ...
I checked the docs and I am calling the event in the proper way. I dont know if the problem is related to the fact that my eventSource is an ajax function.
your function doesn't return anything.
the eventDataTransform function has to. At least you could test:
console.log(eventData);
return eventData;

How to return "then()" method in angularjs?

My case:
app.js:
let app = angular.module('myApp', []);
app.controller('login', function ($scope, $login) {
$scope.account = {};
$scope.loginForm_submit = function ($event, account) {
$event.preventDefault();
if ($login.isValid(account)) {
$login.submit(account);
// goal:
$login.submit(account).then(function () {
window.location = '/'
}, function (msg) {
console.log(msg)
});
}
};
});
login.js:
app.factory('$login', function () {
let o = {
isValid: function (x) {
let success = false;
// validating...
return success
},
submit: function (x) {
// prevent to force submitting
if (this.isValid(x)) {
let formData = new FormData(), xhttp = new XMLHttpRequest();
// appending data to 'formData' via 'x'...
xhttp.onreadystatechange = function () {
if (xhttp.readyState === XMLHttpRequest.DONE) {
let data = JSON.parse(xhttp.responseText);
if (data['Success']) {
// return then() with successCallback() function
} else {
let msg = data['ErrorMessage'];
// return then() with errorCallback() function
}
}
}
xhttp.open('POST', '/account/register');
xhttp.send(formData);
}
}
}
return o
});
data is an object like:
let data = {
'Success': false,
'ErrorMessage': 'Invalid login attempt.'
};
I want to return then() method after submitting to access result. How can I do that?
UPDATE:
In controller:
[HttpPost]
public async Task<ObjectResult> Login(LoginViewModel model)
{
IDictionary<string, object> value = new Dictionary<string, object>();
value["Success"] = false;
if (ModelState.IsValid)
{
// login
value["Success"] = true;
}
return new ObjectResult(value);
}
First of all, you should avoid using $ for your own functions.
About your problem, you need to use $q. And you should use what angular offers to you.
Let me give you this :
app.factory('loginFactory', function($q, $http) {
var ret = {
isValid: isValid,
submit: submit
}
return ret;
function isValid(x) {
// Your code ...
return false;
}
function submit(x) {
// x is your form data, assuming it's a JSON object
var deferred = $q.defer();
// Assuming you're posting something
$http.post('yoururl', x,{yourConfigAsAnObject: ''})
.then(function(success){
console.log(success.data);
deferred.resolve(success.data);
}, function(error) {
console.log(error);
deferred.reject(error);
});
return deferred.promise;
}
});
Now, in your controller, you can use
loginFactory.submit(yourParam).then(function(success){
// Your code
}, function(error) {
// Your code
});
app.factory('$login', function ($q) {
let o = {
isValid: function (x) {
let success = false;
// validating...
return success
},
submit: function (x) {
var d = $q.defer();
// prevent to force submitting
if (this.isValid(x)) {
let formData = new FormData(), xhttp = new XMLHttpRequest();
// appending data to 'formData' via 'x'...
xhttp.onreadystatechange = function () {
if (xhttp.readyState === XMLHttpRequest.DONE) {
let data = JSON.parse(xhttp.responseText);
if (data['Success']) {
// return then() with successCallback() function
d.resolve('success');
} else {
let msg = data['ErrorMessage'];
d.reject(msg);
// return then() with errorCallback() function
}
}
}
xhttp.open('POST', '/account/register');
xhttp.send(formData);
}
else {
d.reject('error');
}
return d.promise;
}
}
return o
});
dude,I made a sample function with promise
$q should be injected as dependency
class AppUserService {
constructor($http,CONFIG_CONSTANTS,$q, AuthService) {
this.API_URL = CONFIG_CONSTANTS.API_URL;
this.$http = $http;
this.$q = $q;
this.api_token = AuthService.api_token;
}
getAppUserList() {
const deferred = this.$q.defer();
this.$http.get(`${this.API_URL}/customer?api_token=${this.api_token}`)
.success(response => deferred.resolve(response))
.error(error => deferred.reject(error));
return deferred.promise;
}
}
its in ES6 form.
How to use:
AppUserService.getAppuserList().then(success => {
// code for success
},error => {
// code for error
})
submit: function (x) {
return $q(function (resolve, reject) {
// prevent to force submitting
if (this.isValid(x)) {
let formData = new FormData(), xhttp = new XMLHttpRequest();
// appending data to 'formData' via 'x'...
xhttp.onreadystatechange = function () {
if (xhttp.readyState === XMLHttpRequest.DONE) {
let data = JSON.parse(xhttp.responseText);
if (data['Success']) {
resolve(data);
// return then() with successCallback() function
} else {
let msg = data['ErrorMessage'];
reject(msg);
}
}
}
xhttp.open('POST', '/account/register');
xhttp.send(formData);
}
else
reject('x not valid');
}
}
}
But I recommended to use angular $http service.

returning embedded document from collection find

This Meteor code tries to return a cursor to the embedded documents referenced by the field data, then checks if it exists (because some times it does not exist in ActiveTaskCol) before returning this template helper method.
added later
The expected returned cursor will be used in the html {{#each data}} for more work hence the use of .find instead of .findOne.
The problem is that the if statement evaluates to true even though there is no data field in the ActiveTaskCol, I also tried obj.count() > 0 which also true even though "data" field does not exist in the collection.
How can I fix this? Thanks
Template.index.helpers({
taskInputs: function () {
var ready = Meteor.subscribe('inputsCol').ready();
var data = InputsCol.find({});
var selectedTask = Session.get('taskSelected');
var obj = ActiveTaskCol.find({action: selectedTask}, {field: {data: 1}});
if (typeof obj != 'undefined') { //<-always true --------------
return {items: obj};
} else {
return {items: data, ready: ready};
}
}
});
It is always true because, you are using find, which returns a cursor. Instead, you should use findOne, so that, it will return document or undefined, if there is no such document. I also suggest, you use obj, which checks for falsy values like undefined, null, false instead of typeof obj != 'undefined'
Template.index.helpers({
taskInputs: function () {
var ready = Meteor.subscribe('inputsCol').ready();
var data = InputsCol.find({});
var selectedTask = Session.get('taskSelected');
var obj = ActiveTaskCol.findOne({action: selectedTask}, {field: {data: 1}});
if (obj) {
return {items: obj};
} else {
return {items: data, ready: ready};
}
}
});
Update:
Based on your comments, you can use obj.count() to check whether there are documents matching your criteria.
Template.index.helpers({
taskInputs: function () {
var ready = Meteor.subscribe('inputsCol').ready();
var data = InputsCol.find({});
var selectedTask = Session.get('taskSelected');
var obj = ActiveTaskCol.find({action: selectedTask}, {field: {data: 1}});
if (obj.count() > 0) {
return {items: obj};
} else {
return {items: data, ready: ready};
}
}
});
Update 2
Template.index.helpers({
taskInputs: function () {
var ready = Meteor.subscribe('inputsCol').ready();
var data = InputsCol.find({});
var selectedTask = Session.get('taskSelected');
var obj = ActiveTaskCol.find({
action: selectedTask,
data: { $exists: true }
}, {
field: {data: 1}
});
if (obj.count() > 0) {
return {items: obj};
} else {
return {items: data, ready: ready};
}
}
});

Passing selected rows in a controller in nop Commerce Terilik grid

I am beginner in using nopCommerce 2.30 (MVC 3 Razor) and Telerik().Grid. I am currently working
on Nop.Admin project.I try to create a Html.Telerik().Grid in my form, with many features.
Please see my grid image below.
These are the features.
grid data should be filter the selected value of the dropdownlist.
all grid columns are enable sorting.
in first column header contains a checkbox,for multiselect.
grid view must enable a column context menu.
Please see my code below.
My .cshtml file
<td>
#(Html.Telerik().Grid<NotificationMailReminderModel>()
.Name("productvariants-grid")
.DataKeys(keys =>
{
keys.Add(pv => pv.Username);
})
.DataBinding(dataBinding =>
dataBinding.Ajax()
.Select("EmailReminderByEvent", "Customer")
)
.Columns(columns =>
{
columns.Bound(pv => pv.IsSelected)
.ClientTemplate("<input type='checkbox' name='Id' value='<#= Id #>' />")
.HeaderTemplate(#<text><input type="checkbox" title="check all records" id="checkAllRecords" /></text>)
.Width(50)
.HeaderHtmlAttributes(new { style = "text-align:center" })
.HtmlAttributes(new { style = "text-align:center" });
columns.Bound(pv => pv.Username).ReadOnly().Width(250);
columns.Bound(pv => pv.Firstname).ReadOnly();
columns.Bound(pv => pv.Lastname).ReadOnly();
})
.ClientEvents(events => events.OnDataBinding("Grid_onDataBinding").OnError("Grid_onError").OnSubmitChanges("Grid_onSubmitChanges")
.OnRowDataBound("onRowDataBound"))
.Editable(editing => editing.Mode(GridEditMode.InCell))
.Pageable(settings => settings.PageSize(2).Position(GridPagerPosition.Both))
.Sortable(sorting => sorting.Enabled(true))
)
<script type="text/javascript">
$(document).ready(function () {
$('#search-products').click(function () {
var grid = $('#productvariants-grid').data('tGrid');
grid.currentPage = 1; //new search. Set page size to 1
grid.ajaxRequest();
return false;
});
$('#send-mail-reminder').click(function () {
var grid = $('#productvariants-grid').data('tGrid');
grid.ajaxRequest();
return false;
});
$('#grdCustomerEventRoleData #productvariants-grid table thead #checkAllRecords').click(function () {
$("#grdCustomerEventRoleData #productvariants-grid table tbody input:checkbox").attr("checked", this.checked);
});
});
function Grid_onError(args) {
if (args.textStatus == "modelstateerror" && args.modelState) {
var message = "Errors:\n";
$.each(args.modelState, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
args.preventDefault();
alert(message);
}
}
function Grid_onDataBinding(e) {
var loadData = true;
var grid = $(this).data('tGrid');
if (loadData) {
var searchModel = {
Event: $('#select-event').val()
};
e.data = searchModel;
}
}
function Grid_onSubmitChanges(e) {
//TODO pass current search parameters
//we can't pass search parameters in submit changes
//that's why let's just clear search params
//$('##Html.FieldIdFor(model => model.Event)').val('');
//$('#SearchCategoryId').val('0');
//$('#SearchManufacturerId').val('0');
}
</script>
</td>
My Controller actions
public ActionResult EmailReminder()
{
if (!_permissionService.Authorize(StandardPermissionProvider.ManageCustomers))
return AccessDeniedView();
var model = new NotificationMailReminderModels();
model.Event = 0;
List<Nop.Core.Domain.Catalog.Product> products = _productRepository.Table.Where(p => p.EventDate != null && p.EventDate >= DateTime.MinValue).OrderBy(o => o.Name).ToList();
model.Events = products.Select(p => new System.Web.Mvc.SelectListItem
{
Text = p.Name.Trim(),
Value = p.Id.ToString()
}).ToList();
return View(model);
}
[HttpPost, GridAction(EnableCustomBinding = true)]
public ActionResult EmailReminderByEvent(int[] Id, GridCommand command, NotificationMailReminderModels model)
{
if (!_permissionService.Authorize(StandardPermissionProvider.ManageCustomers))
return AccessDeniedView();
var gridModel = new GridModel();
string vwSlEv = ViewBag.SelectedEvent;
int selevent = 0;
if (!string.IsNullOrEmpty(vwSlEv))
{
Int32.TryParse(vwSlEv, out selevent);
}
else
{
selevent = model.Event;
}
var csts = _customerEventRoleRepository.Table.Where(e => e.EventId == selevent).Select(cs => cs.CustomerId).Distinct().ToArray();
var customers = _customerRepository.Table.Where(c => !string.IsNullOrEmpty(c.Username) && !string.IsNullOrEmpty(c.Email) && csts.Contains(c.Id)).ToList();
var gridmodel = customers.Select(x =>
{
NotificationMailReminderModel not = new NotificationMailReminderModel();
not.Id = x.Id;
not.Username = x.Username;
not.Firstname = x.CustomerAttributes.FirstName;
not.Lastname = x.CustomerAttributes.LastName;
return not;
});
var grddata = new PagedList<NotificationMailReminderModel>(gridmodel.ToList(), command.Page - 1, command.PageSize);
gridModel.Data = grddata;
gridModel.Total = grddata.TotalCount;
return new JsonResult
{
Data = gridModel
};
}
data grid sorting and filtering works fine in my grid. But i can't get the ContextMenu
function in the Razor intellisence.
I want to passing the selected rows to the Controller POST function.
But, How to pass the selected rows in to the controller function.
please help.
But, How to pass the selected rows in to the controller function.
JQuery (Sample Code)
var MyConnectionList = {
ColorList: []
};
function SendStream() {
debugger;
MyConnectionList.ColorList.push({
"Name": 'Test1',
"Color": 'red'
});
MyConnectionList.ColorList.push({
"Name": 'Test2',
"Color": 'Green'
});
$.ajax({
url: "Ur url",
data: JSON.stringify(MyConnectionList),
type: 'POST',
contentType: 'application/json',
dataType: 'json',
success: function (data) { }
});
}
Action Method
public ActionResult SendStream(List<Sample> ColorList)
{
}

Kendo UI bug with jQuery versions

I have a Kendo UI grid and a Kendo UI Window on the same page. The window contains form elements for record insertion, a record being represented by a row in the grid. But for reasons not known by me, when I opened the window and closed it again and then reopened, Kendo UI scaled it to be 100x smaller. I didn't want to hack the window, so I've looked for alternative solution.
I've used jQuery 1.7.2. I've updated jQuery to version 1.8.0. and window opening, closing and reopening worked. I was very happy until I realized that now the grid filters are not working. When I click on a grid filter, nothing happens, no popup, nothing. What is the cause of this and what would be the solution?
EDIT:
This is my code (I've replaced the values of the Urls). Grid filters are working with jQuery 1.7.2. and window reopen works with new versions of jQuery. Also, if I remove the sort hack, the grid filter popup still doesn't show up.
var hshflt = {};
var addWindow;
var editWindow;
var init = false;
//Sort Hack
/*
Changes all dataSources to case insensitive sorting (client side sorting).
This snipped enable case insensitive sorting on Kendo UI grid, too.
The original case sensitive comparer is a private and can't be accessed without modifying the original source code.
tested with Kendo UI version 2012.2.710 (Q2 2012 / July 2012).
*/
var CaseInsensitiveComparer = {
getterCache: {},
getter: function (expression) {
return this.getterCache[expression] = this.getterCache[expression] || new Function("d", "return " + kendo.expr(expression));
},
selector: function (field) {
return jQuery.isFunction(field) ? field : this.getter(field);
},
asc: function (field) {
var selector = this.selector(field);
return function (a, b) {
if ((selector(a).toLowerCase) && (selector(b).toLowerCase)) {
a = selector(a).toLowerCase(); // the magical part
b = selector(b).toLowerCase();
}
return a > b ? 1 : (a < b ? -1 : 0);
};
},
desc: function (field) {
var selector = this.selector(field);
return function (a, b) {
if ((selector(a).toLowerCase) && (selector(b).toLowerCase)) {
a = selector(a).toLowerCase(); // the magical part
b = selector(b).toLowerCase();
}
return a < b ? 1 : (a > b ? -1 : 0);
};
},
create: function (descriptor) {
return this[descriptor.dir.toLowerCase()](descriptor.field);
},
combine: function (comparers) {
return function (a, b) {
var result = comparers[0](a, b),
idx,
length;
for (idx = 1, length = comparers.length; idx < length; idx++) {
result = result || comparers[idx](a, b);
}
return result;
};
}
};
kendo.data.Query.prototype.normalizeSort = function (field, dir) {
if (field) {
var descriptor = typeof field === "string" ? { field: field, dir: dir} : field,
descriptors = jQuery.isArray(descriptor) ? descriptor : (descriptor !== undefined ? [descriptor] : []);
return jQuery.grep(descriptors, function (d) { return !!d.dir; });
}
};
kendo.data.Query.prototype.sort = function (field, dir, comparer) {
var idx,
length,
descriptors = this.normalizeSort(field, dir),
comparers = [];
comparer = comparer || CaseInsensitiveComparer;
if (descriptors.length) {
for (idx = 0, length = descriptors.length; idx < length; idx++) {
comparers.push(comparer.create(descriptors[idx]));
}
return this.orderBy({ compare: comparer.combine(comparers) });
}
return this;
};
kendo.data.Query.prototype.orderBy = function (selector) {
var result = this.data.slice(0),
comparer = jQuery.isFunction(selector) || !selector ? CaseInsensitiveComparer.asc(selector) : selector.compare;
return new kendo.data.Query(result.sort(comparer));
};
kendo.data.Query.prototype.orderByDescending = function (selector) {
return new kendo.data.Query(this.data.slice(0).sort(CaseInsensitiveComparer.desc(selector)));
};
//Sort Hack
$("#refresh-btn").click(function () {
refreshGrid();
});
var grid;
function getPageIndex() {
if (!(grid)) {
return 0;
}
return grid.pager.page() - 1;
}
function getPageSize() {
if (!(grid)) {
return 10;
}
return grid.pager.pageSize();
}
function getFilters() {
if (!(grid)) {
return "";
}
return grid.dataSource.filter();
}
function getSorts() {
if (!(grid)) {
return "";
}
var arr = grid.dataSource.sort();
if ((arr) && (arr.length == 0)) {
return "";
}
var returnValue = "";
for (var index in arr) {
var type = "";
for (var col in grid.columns) {
if (grid.columns[col].field === arr[index].field) {
type = grid.columns[col].type;
}
}
returnValue += ((returnValue.length > 0) ? (";") : ("")) + arr[index].field + "," + (arr[index].dir === "asc") + "," + type;
}
return returnValue;
}
function getColumns() {
if (!(grid)) {
return "";
}
var columns = "";
for (var col in grid.columns) {
if (columns.length > 0) {
columns += ";";
}
columns += grid.columns[col].field + "," + grid.columns[col].type;
}
return columns;
}
var initGrid = true;
var grid2Data;
function getDataSource() {
$.ajax({
type: 'POST',
url: 'mydsurl' + getParams(),
data: "filter=" + JSON.stringify(getFilters()) + "&columns=" + getColumns(),
success: function (param) { grid2Data = param; },
//dataType: dataType,
async: false
});
return grid2Data.Data;
}
var shouldClickOnRefresh = false;
function refreshGrid() {
shouldClickOnRefresh = false;
$.ajax({
type: 'POST',
url: 'mydsurl' + getParams(),
data: "filter=" + JSON.stringify(getFilters()) + "&columns=" + getColumns(),
success: function (param) { grid2Data = param; },
//dataType: dataType,
async: false
});
grid.dataSource.total = function () {
return grid2Data.Total;
}
for (var col in grid.columns) {
if ((grid.columns[col].type) && (grid.columns[col].type === "Date")) {
for (var row in grid2Data.Data) {
grid2Data.Data[row][grid.columns[col].field] = new Date(parseInt((grid2Data.Data[row][grid.columns[col].field] + "").replace("/Date(", "").replace(")/", "")));
}
}
}
grid.dataSource.data(grid2Data.Data);
shouldClickOnRefresh = true;
}
function getParams() {
return getPageSize() + "|" + getPageIndex() + "|" + getSorts();
}
function bindGrid() {
var editUrl = 'myediturl';
if (!(editWindow)) {
editWindow = $("#edit-window");
}
$(".k-button.k-button-icontext.k-grid-edit").each(function (index) {
$(this).click(function () {
if (!editWindow.data("kendoWindow")) {
editWindow.kendoWindow({
title: "Edit User",
width: "60%",
height: "60%",
close: onClose,
open: onEditOpen,
content: editUrl + $("#grid").data().kendoGrid.dataSource.view()[index]["ID"]
});
}
else {
editWindow.data("kendoWindow").refresh(editUrl + $("#grid").data().kendoGrid.dataSource.view()[index]["ID"]);
editWindow.data("kendoWindow").open();
}
editWindow.data("kendoWindow").center();
return false;
})
});
$(".k-button.k-button-icontext.k-grid-delete").each(function (index) {
$(this).click(function () {
var r = confirm("Are you sure you want to delete this user?");
if (r == true) {
$.ajax({
type: 'POST',
url: 'mydelurl' + $("#grid").data().kendoGrid.dataSource.view()[index]["ID"],
success: function (param) { refreshGrid(); },
async: false
});
}
return false;
});
});
}
function onDataBound() {
if (!(shouldClickOnRefresh)) {
shouldClickOnRefresh = true;
bindGrid();
}
else {
refreshGrid();
}
}
$(function () {
$("#grid").kendoGrid({
dataBound: onDataBound,
dataSource: {
autoSync: true,
data: getDataSource(),
serverPaging: true,
schema: {
model: {
fields: {
Email: { type: "string" },
FullName: { type: "string" },
LogCreateDate: { type: "date" },
RoleName: { type: "string" },
UserName: { type: "string" }
}
},
total: function (response) {
return grid2Data.Total;
}
},
pageSize: 10
},
toolbar: ["create"],
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false,
pageSizes: true
},
columns: [
{
command: ["edit", "destroy"],
title: " "
},
{
field: "Email",
title: "Email",
type: "String"
},
{
field: "FullName",
title: "Full Name",
type: "String"
},
{
field: "LogCreateDate",
title: "Created",
type: "Date",
template: '#= kendo.toString(LogCreateDate,"MM/dd/yyyy") #'
},
{
field: "RoleName",
title: "Role",
type: "Custom"
},
{
field: "UserName",
type: "String"
}
],
editable: "popup"
});
grid = $("#grid").data("kendoGrid");
function onAddOpen() {
}
addWindow = $("#add-window");
$(".k-button.k-button-icontext.k-grid-add").click(function () {
if (!addWindow.data("kendoWindow")) {
addWindow.kendoWindow({
title: "Add User",
width: "60%",
height: "60%",
close: onClose,
open: onAddOpen,
content: 'myaddurl'
});
}
else {
addWindow.data("kendoWindow").open();
}
addWindow.data("kendoWindow").center();
addWindow.data("kendoWindow").refresh();
return false;
});
});
function onClose() {
$("#refresh-btn").click();
}
function onEditOpen() {
//editWindow.data("kendoWdinow").center();
}
I've hacked Kendo UI for the second time, this time I've solved its incompatibility with jQuery 1.8.3. using the following hack:
$(".k-grid-filter").each(function(index) {
$(this).click(function() {
$($(".k-filter-menu.k-popup.k-group.k-reset")[index]).offset({
left: $($(".k-grid-filter")[index]).offset().left - $($(".k-filter-menu.k-popup.k-group.k-reset")[index]).width(),
top: $($(".k-grid-filter")[index]).offset().top + $($(".k-grid-filter")[index]).height()})
})
});
I've put this hack into the document load event of the page an voila, it works. It surely looks ugly as hell with this hack, but after designing it will look good as new. I'm happy I found a work around, but I'm unhappy I had to hack Kendo UI twice. It is a very nice tool except the bugs.
jQuery 1.8.# is only compatible with Kendo UI - Q2 2012 SP1 (2012.2 913) or later..
If your kendo UI version is earlier, you should update it.

Resources