For a couple of days now I have been playing around with the jqgrid.I have been trying to accomplish what is found on this example http://www.the-di-lab.com/demo/apples that is placing a date picker on the modal form.
So far I have tried to follow what I found on this link but I get a target.getAttribute is not a function error in my ui.datepicker.js script.
Anyone who has done it succesfully?
Don't know if you or someone else is still seeking for an answer.
I just realized this by using the editoptions in column definition, like so:
... ,editoptions:{dataInit:datepicker}
where datepicker is a function like
function datepicker (elem) {
jQuery(elem).datepicker(
// {} // options here
);
};
Related
I'm trying to implement a web app, with a Basic and an Advanced Search, and I'm using datatable 1.10 and jquery 2.2 to display the results of the searches. I'm having issues with the destroy method and I hope that some of you it is going to be able to help me find a solution, thanks in advance to all for your help
Let me explain a little bit my project, code logic, objective and issue:
I have one single table with 5 columns as you can see on my jsfiddle. I also have a global variable "table" to handle the datatable (DT) once it is created. I declared a function "loadSearchData" to load the parameters for the Ajax call on another global variable. On the click event of my two Search buttons I check if the DT already exists then I destroy it, and then I call the function "initializeDataTable". My idea was to destroy the existing DT and create a new one each time the Search buttons are clicked. However it is not working, and the behavior is "weird":
First time I enter the search criteria and click search, works perfectly fine If I modifiy the search criteria and click search again, then I get a Webpage error
"Line: 1 Error: Unable to get property 'style' of undefined or null reference"
Then, if don't debug and click the search button again, then it works perfectly fine again!
The code:
//BASIC SEARCH
$('#btnBasicSearch').on('click', function () {
$("#partialSearch").removeAttr("hidden");
loadSearchData('basicSearch');
if ($.fn.DataTable.isDataTable('#tbDocumentsList')) {
table.destroy();
}
initializeDataTable(searchParameters);
});
//ADVANCED SEARCH
$("#btnSearch").on('click', function () {
$("#partialSearch").removeAttr("hidden");
loadSearchData('advancedSearch');
jQuery.ajaxSettings.traditional = true;
if ($.fn.DataTable.isDataTable('#tbDocumentsList')) {
table.destroy();
}
initializeDataTable(searchParameters);
});
I'm sure there is a better way to do this, this is my first time using datatables and probably I'm missing something, anyone have any idea?
You can see the complete jsfiddle here
https://jsfiddle.net/dalps/gxgLdo03/
I also asked on the datatable forum:
http://datatables.net/forums/discussion/33563/datatable-destroy-function-not-working-as-expected#latest
thanks in advance
dalps
Well, I got my answer on the datatable forum: my html table have 5 columns and on the "columndefs" property I have the following:
"targets": 5,
"data": "active",
"visible": false
since the column indexing begin with zero, I was referencing a column that doesn't exist, solution, add a new column to the table
I am new in kendoUI and I'm trying to learn more and more. I am to try kendo List-view, and I want to add New Record with One Drop-down list. When is edit time I dont want to show Drop-down, just show normal label.
Any idea how can I do this?
Please check this link and give best solution.
This is list view live demo. Thanks.
You could have one template for editing and one for adding :JSFiddle solution , sorry for the css and you need to tweak the flag reset.
edit: function (e) {
if (isEdit) {
listView.editTemplate = kendo.template($("#editTemplate").html())
} else {
listView.editTemplate = kendo.template($("#addTemplate").html())
}
}
I am creating a directive that is using this timezone picker jQuery plugin, so that we have a timezone picker "widget" throughout our app. The problem I'm running into is that when you select a timezone, it just changes the value of the select elements. So, the element has the right value, but my model does not. I was thinking I just had to throw a scope.$apply() in there, but after a while, I realized that is for updating the view from a model that changed outside of angular. My problem is the opposite. How to I update my model from my view that has changed outside of angular? Here's a simple fiddle that illustrates the problem: http://jsfiddle.net/tWzwA/
I'm thinking the ngModelController could help me here, but I don't know how I would get access to it, and what exactly I would do with it. Can someone please point me in the right direction? Thanks.
You should define the update function on your controller:
$scope.updateDropDownDirectly = function(value){
$scope.myModel = value;
};
Then change the events from onclick to ng-click and let angular manage them:
<button ng-click="updateDropDownDirectly(1)">1</button>
See this jsFiddle
There is a problem when I put Kendo Dropdown List info Fancybox - Popup.
For detail:
I have page A :this page contains Kendo Dropdown list (with id = #myDropdown).
I have page B : I put my Fancybox caller here- I mean I use Fancybox to load page A (by ajax)
Everything look well , but I got a problem here:
You know, when I initialize a Dropdown List, Kendo-UI will create an "anchor" Tag for UI-effect purpose.
Ex:
DropdownList has id = #myDropdown
Kendo will create one more Tag with id = #myDropdown-list.
After closing the Fancybox-popup , The "#myDropdown" was removed from DOM, but "#myDropdown-list". It still on the DOM overtime, and it willing to be double after I call the popup again(ofcourse if dont refresh current page).
And The Kendo-DateTimePicker as the same too.
p/s: and so sorry about by english if it was too bad :D. I hope you get my question.
im going to put my "popup" in iframe.But I dont know if it is good when using iframe in this case...
Using IFrame or not is not the cause of the error. I tried with a container and without it to load the fancybox via ajax, but it didn't make a difference.
What I found is sort of a hack, however it solves the problem. Let's suppose we have a code which creates the popup and the popup's content is located in the href 'popupFrame':
$.fancybox({
'href': 'popupFrame',
'type': 'ajax',
beforeClose: removeKendoHelpers
});
The other part is the function which is called before closing the popup:
function removeKendoHelpers() {
$("#myDropdown-list").remove();
}
Of course you can create the removeKendoHelpers as an inline function and if there are more parts to remove then put that code into the removeKendoHelpers function as well.
One interesting remark: in the fancybox API onCleanup and onClosed are listed as options but they do not work, instead use beforeClose or afterClose.
UPDATE:
Actually a lot of problem is solved with calling the kendo widget's destroy() method. It solves the removing problems for the widgets except for one of the three helper divs of the DateTimePicker, so the close looks like the following:
function removeKendoHelpers() {
$("#myDropdown-list").data("kendoDropDownList").destroy();
$("#datetimepicker").data("kendoDateTimePicker").destroy();
}
And to resolve the date time picker's actual problem which is I think a bug in the kendop framework (I will report this and hopefully get some feedback) the last function only needs to be extended with:
$(".k-widget.k-calendar").remove();
OTHER solution:
This one is more crude but works like a charm for me even if the page has multiple kendo controls and even if you open another fancybox from your fancybox.
Wrap the fancybox creation in a function, like:
function openFancyBox() {
$("body").append("<div class='fancybox-marker'></div>");
$.fancybox({
'href': 'popupFrame',
'type': 'ajax',
beforeClose: removeKendoHelpers
});
}
This will create a new div at the very end of the body tag, and the function at the closing of the fancybox uses this:
function removeKendoHelpers() {
$(".fancybox-marker").last().nextAll().remove();
$(".fancybox-marker").last().remove();
}
I hope these solves all your problem!
I am using jquery colorbox and jquery date picker. My problem is date picker doesn't work in my popup window using jquery colorbox. I tried to used outside colorbox and its work fine.
Any help would greatly appreciated.
I tried the code below but still doesn't work.
onLoad: function(){
$('#date-pick').datepick();
},
I think you may write these codes $('#date-pick').datepick(); in colorbox's onComplete function. When all dom elements are ready then the code will work.
Well, for starters, to create the datepicker with jquery-ui its:
$("#datepicker").datepicker();
It may well be something else, but you really haven't shown us much. I don't even know if you're using the jquery-ui datepicker as you've provided very little information in your question.