I'm trying to fire a click event when a cell in ui-grid is clicked but the ng-click isn't working. Also ng-class isn't working and I can't get width: '*' to work. Does anyone know of any accurate documentation for angular-ui-grid? I'm using angular v 1.5.11 and angular-ui-grid v 4.2.3. It seems like half the features of ui-grid don't work and the docs don't seem to explain why.
{ name: 'Number of Vendor Parts', field: 'xrefCount', enableFiltering: false,
cellTemplate: '<div ng-class="{inactive: row.entity.active === \'N\'}" ' +
'ng-click="grid.appScope.showCrossReference()">' +
'<a>{{ row.entity.xrefCount }}</a>' +
'</div>'
}
Take a look at this plunker. I think your problem is that you have not added you controller after grid.appScope. If you declare you controller like this:
ng-controller="MainCtrl as main"
The expression for ng-click should look like this:
grid.appScope.main.showCrossReference(grid, row)
Note that you can pass to the function the grid and the row of the clicked button.
As you can see in the plunker for ng-class I use a function which returns the name of the css class using the row parameter.
Related
I am trying to implement typeahead in editable cell of ui-grid.problem is, when i selected one of the option of typeahead,the value does not reflected in the cell.
see plunker
This is my partial code:
$scope.template2='<div class=""><input style="border: none;" type="text" ' +
'class="typeaheadcontrol"' +
'ng-class="\'colt\' + col.index"'+
'ng-model="COL_FIELD"' +
'data-typeahead="state.name as state.name for state in grid.appScope.states | filter:$viewValue | limitTo:8" ' +
'data-typeahead-editable ="false"' +
'ui-grid-editor'+
'/></div> '
$scope.gridOptions = {
enableFiltering: true,
rowTemplate: rowTemplate(),
data: 'data',
columnDefs: [
{ name: 'name' },
{ name: 'cumulativeWidgets',editDropdownValueLabel:'name', field: 'widgets', cellFilter: 'formatStatus',
editableCellTemplate: $scope.template2,
cellTemplate: '<div class="ui-grid-cell-contents" ng-dblclick="grid.appScope.openAttributes(rowRenderIndex)" title="TOOLTIP">{{COL_FIELD }}</div>',
}
]
};
i don't know why selected value is not reflected in view(cell).Is there any issue with my code ?
Thanks
Add editableCellTemplate as below
editableCellTemplate :'<div><form name="inputForm"><input type="INPUT_TYPE" ng-model="row.entity.name" typeahead="state for state in grid.appScope.states | filter:$viewValue | limitTo:8" class="form-control" ></form></div>'
You can use uiGridEditor (ui-grid-editor) or other directive so as to provide BEGIN_CELL_EDIT, CANCEL_CELL_EDIT and END_CELL_EDIT events. This will hide the textbox as well after edit.
Click here for plnkr example
This is an older question but I have been fighting ui-grid and typeahead all morning so... I'm going to post what worked out for me.
I was having major issues with typeahead only working a few times. I solved it, hopefully, by adding a unique ID to anything with a dropdown. My cell template turned into this:
'<div><input id="{{row.entity.$$hashKey}}" type="text" ng-model="MODEL_COL_FIELD" ' +
' typeahead-on-select="grid.appScope.typeaheadSelected(grid, row, $item)" ng-class="{edited: grid.isEdited(row, col)}" ' +
'ng-change="grid.appScope.typeaheadSelected(grid)" ' +
'typeahead="state for state in grid.appScope.primaryKeyValues.{{col.colDef.name}} | filter:$viewValue | limitTo:8" class="form-control"></div>'
I assume this hasn't been answered, so here is what I did to solve it. First I did the whole editableCellTemplate with the typeahead as suggested above. Which worked but I noticed that the ui-grid-editor directive takes over the key handling events, so when the typeahead shows, you can't arrow down the list or select an item from the list. If you remove the ui-grid-editor directive from the editableCellTemplate string then the input element remains after you lose focus, so I looked in the UI-grid source and found the directive called uiGridEditor and noticed that commenting out the key event handlers allows the typeahead to use the key events as well as using the ui-grid after edit focus api. We use a minified version of ui-grid, and didn't want to alter the source, so I then copied the uiGridEditor directive from the source and created my own directive called uiGridEditorExtended, I then removed the key event handler, and changed the directive name in the editbleCellTemplate to ui-grid-editor-extended so that it uses mine instead of the one in the ui-grid. Now it shows the typeahead, allows the keys to be used by typeahead and allows the ui-grid to recognize an off focus.
I have a custom select menu (multiple) defined as follows:
<select name="DanceStyles" id="DanceStyles" multiple="multiple" data-native-menu="false">
Everything works fine except that I want to move the header's button icon over to the right AND display the Close text. (I have found some mobile users have a problem either realising what the X icon is for or they have trouble clicking it, so I want it on the right with the word 'Close' making too big to miss.) There don't seem to be any options for doing that on the select since its options apply to the select bar itself.
I have tried intercepting the create event and in there, finding the button anchor and adding a create handler for that, doing something like this (I have tried several variations, as you can see by the commenting out):
$('#search').live('pagecreate', function (event) {
$("#DanceStyles").selectmenu({
create: function (event, ui) {
$('ul#DanceStyles-menu').prev().find('a.ui-btn').button({
create: function (event, ui) {
var $btn = $(this);
$btn.attr('class', $btn.attr('class').replace('ui-btn-left', 'ui-btn-right'));
$btn.attr('class', $btn.attr('class').replace('ui-btn-icon-notext', 'ui-btn-icon-left'));
// $(this).button({ iconpos: 'right' });
// $btn.attr('class', $btn.attr('class').replace('ui-btn-icon-notext', 'ui-btn-icon-left'));
// // $btn.attr('data-iconpos', 'left');
$(this).button('refresh');
}
});
}
});
});
So I have tried resetting the button options and calling refresh (didn't work), and changing the CSS. Neither worked and I got weird formatting issues with the close icon having a line break.
Anyone know the right way to do this?
I got this to work cleanly after looking at the source code for the selectmenu plugin. It is not in fact using a button; the anchor tag is the source for the buttonMarkup plugin, which has already been created (natch) before the Create event fires.
This means that the markup has already been created. My first attempt (see my question) where I try to mangle the existing markup is too messy. It is cleaner and more reliable to remove the buttonMarkup and recreate it with my desired options. Note that the '#search' selector is the id of the JQ page-div, and '#DanceStyles' is the id of my native select element. I could see the latter being used for the id of the menu, which is why I select it first and navigate back up and down to the anchor; I couldn't see any other reliable way to get to the anchor.
$('#search').live('pagecreate', function (event) {
$("#DanceStyles").selectmenu({
create: function (event, ui) {
$('ul#DanceStyles-menu').prev().find('a.ui-btn')
.empty()
.text('Done')
.attr('class', 'ui-btn-right')
.attr("data-" + $.mobile.ns + "iconpos", '')
.attr("data-" + $.mobile.ns + "icon", '')
.attr("title", 'Done')
.buttonMarkup({ iconpos: 'left', icon: 'arrow-l' });
}
});
});
The buttonMarkup plugin uses the A element's text and class values when creating itself but the other data- attributes result from the previous buttonMarkup and have to be removed, as does the inner html that the buttonMarkup creates (child span, etc). The title attribute was not recreated, for some reason, so I set it myself.
PS If anyone knows of a better way to achieve this (buttonMarkup('remove')? for example), please let us know.
the way i achieved it was changing a bit of the jquery mobile code so that the close button always came to the right, without an icon and with the text, "Close"
not the best way i agree. but works..
I got a similar case, and I did some dirty hack about this :P
$("#DanceStyles-button").click(function() {
setTimeout(function(){
$("#DanceStyles-dialog a[role=button]").removeClass("ui-icon-delete").addClass("ui-icon-check");
$("#DanceStyles-dialog .ui-title").html("<span style='float:left;margin-left:25px' id='done'>Done</span>Dance Styles");
$("#DanceStyles-dialog .ui-title #done").click(function() {
$("#DanceStyles").selectmenu("close")
});
},1);
} );
I have the listview refresh functioning appropriately with a dynamically built list after load except for one issue. The last <li> tag in the list does not get any styling applied to it.
The refresh actually adds the the ui-btn ui-btn-icon-right ui-li ui-corner-bottom ui-btn-up-c class to the second to last <li> tag.
Any ideas why this would be happening?
Attached is the function that is dynamically generating the list:
function createSidebarEntry(marker, name, phone, address, distance) {
var saddr = document.getElementById('addressInput').value;
var li = document.createElement('li');
var html = '' + name + ' (' + distance.toFixed(1) + ' miles)' + address + phone +'<a href="http://maps.google.com/maps?saddr='+ saddr +'&daddr=' + address +'" /></a>';
li.innerHTML = html;
$('#locationList').listview('refresh');
return li;
}
From your code, it looks like you are adding the li to your listview outside of that function, BUT you are calling .listview('refresh'); inside the function.
So It just happens to work for all your LIs because except for the last one, because its always the following LI that causes the list to be refereshed with the correct look&feel.
Solution: just call .listview('refresh'); AFTER you have added the last LI outside of this function. It will also have the effect of improving performance becuse you will only be refreshing the listview once you have finished dynamically adding all your new LI elements.
Calling .listview("refresh") did not work for me. It created a basic list, without styling.
This is what worked for me:
function updateData()
{
$.ajax({
url: '#Html.Raw(ajaxUrl)',
async: false,
beforeSend: function () { $.mobile.showPageLoadingMsg(); },
complete: function ()
{
$.mobile.hidePageLoadingMsg();
$("ul:jqmData(role='listview')").listview();
},
success: function (data, textStatus, jqXHR)
{
$('#myDiv').html(data);
$('#myDiv').trigger("create"); // *** THIS IS THE KEY ***
}
});
}
Sometimes you need to instantiate listview view before calling the refresh.
Chrome should be giving you an error saying that you cant apply a refresh to a listview that isnt instantiated.
You can try this out, it might solve your problem (it solved this exact same issue for me).
$('#locationList').listview().listview('refresh');
I also had some problem with listview refresh function( jqm 1.0 beta1 ).
On IE8, it's even worse.
So my solution is simply inspect what jqm has done to <li> tag.
And directly insert the after-refresh-html-code.
Not an elegant solution, but it works.
So I have some jQuery UI tabs. The source code is as follows:
HTML:
<div class="tabs">
<ul>
<li>Ranges</li>
<li>Collections</li>
<li>Designs</li>
</ul>
<div id="ranges"></div>
<div id="collections"></div>
<div id="designs"></div>
</div>
jQuery:
$(document).ready(function() {
$(".tabs").tabs();
});
My problem is that I am trying to make each tab load a page into the content panel on click of the relevant link. To start with I am just trying to set the html of all the panels on clicking a link. From the code below, if I use method 1, it works for all links. However if I use method 2 it doesn't - but only for the links in the tabs (i.e. the labels you click to select a tab).
Method 1 (works for all links all the time, but would not be applied to links which are added after this is called):
$("a").click(function () {
$("#ranges, #collections, #designs").html("clicked");
});
Method 2 (works for all links which are not "tabified"):
$("a").live("click", function () {
$("#ranges, #collections, #designs").html("clicked");
});
Does anyone know why it is behaving like this? I would really like to get method 2 working properly as there may well be links which I need to add click events to which are added after the page is originally loaded.
Thanks in advance,
Richard
PS yes the function calls for .live and .click are both in the $(document).ready() function, before anyone says that that may be the problem - otherwise it wouldn't work at all..
Edit:
The solution I came up with involves an extra attribute in the anchors (data-url) and the following code (which outputs a 404 not found error if the page cannot be loaded). I aim to expand this over the next few weeks / months to be a lot more powerful.
$(".tabs").tabs({
select: function (event, ui) {
$(ui.panel).load($(ui.tab).attr("data-url"), function (responseText, textStatus, XMLHttpRequest) {
switch (XMLHttpRequest.status) {
case 200: break;
case 404:
$(ui.panel).html("<p>The requested page (" + $(ui.tab).attr("data-url") + ") could not be found.</p>");
break;
default:
$(ui.panel).html("<p title='Status: " + XMLHttpRequest.status + "; " + XMLHttpRequest.statusText + "'>An unknown error has occurred.</p>");
break;
};
});
}
});
I don't know if I understand what you are going for but basically you want to do something once a tab is clicked?
Here's the docs for setting up a callback function for selecting a tab.
EDIT: Don't know if that link is working correctly, you want to look at select under Events. But basically it is:
$("#tabs").tabs({
select: function(event, ui) { ... }
});
Where ui has information on the tab that was clicked.
jQuery UI tabs has an outstanding issue where return false; is used instead of event.preventDefault();. This effectively prevents event bubbling which live depends on. This is scheduled to be fixed with jQuery UI 1.9 but in the meantime the best approach is use the built in select event as suggested by #rolfwaffle.
Maybe the tabs() plugin that you are using is calling event.preventDefault(); (Reference) once it has created it's tabs.
Then it captures the click event and the bubbling stops, so it doesn't invoke your click-function. In jQuery this is done with
$(element).click(function(){
// Do stuff, then
return false; // Cancels the event
});
You'd have to alter the tabs() plugin code and remove this return false; statement, OR if you are lucky, the plugin might have an option to disable that behavior.
EDIT: Now I see you're using jQuery UI. Then you should check the documentation there, since it is an awesome plugin, it will do anything you want if you do the html right and pass it the right options.
I'm working with the 'Connect list trough tabs' demo. I modified the code a little bit. I added the 'foo' class to the tabs-1 and tabs-2 elements.
I also added the following script:
$(".foo ul").sortable({
stop: function (event, ui) {
var tabId = $(this).attr('id');
var elementIndex = ui.item.index();
alert('tab id: ' + tabId + ' | element index: ' + elementIndex);
}});
It works super fine when I change the sort order of elements inside same tab, but I have the problem when I drop the element from the first tab to the second tab (or vice versa), because the element is firstly placed on the first position in tab1 (tab id = sortable1, element index = 0), and after that it is dropped to the second tab on the last position. The problem is because the sortable event is not fired for the second time.
I'm missing something but don't know what :)
Any help would be greatly appreciated.
Thank you!
EDIT:
Demo can be found on the following link: http://jqueryui.com/demos/sortable/#connect-lists-through-tabs
Did you ever find an answer to this? Because I'm currently having the same problem - trying a range of ways around it, but so far to no success.
EDIT
Scratch that, just found what I think is the most efficient way to resolve. Bind the event "DOMNodeInserted" to the <ul> list class you're using, and you can test the list item by searching its current DOM position:
$(".connectedSortable").bind("DOMNodeInserted", function() {
$('#tabs').find('li#staff-'+currentStaffId).each(function() {
listDeptID = $(this).parent().parent().attr('id');
listDeptID = listDeptID.split('-');
listDeptID = listDeptID[1];
....
In this example of mine, I have my list items with the id of staff-x with the id of that staff member, so the find returns one array element, and runs quite efficiently.
HTH
Jester.