I'm using ng-grid in which checkboxes are enabled.
showSelectionCheckbox: true
Below is plunker created for the same
http://plnkr.co/edit/rtkDYvDygRn38VU9Cmsk?p=preview
In this plunker, click on select all checkbox present in header.
Then click on the button below which will refresh the table content.
After clicking on the button, you can see that data got refreshed, but select all checkbox present in header is still selected.
How to uncheck that checkbox?
You should try this. It worked for me.
var allChecked = $("input.ngSelectionHeader:checkbox").prop('checked');
if (allChecked) {
$("input.ngSelectionHeader:checkbox").click();
}
else {
$scope.gridOptions.selectAll(false);
}
Related
Setup
I've got a Telerik Kendo UI TabStrip with multiple tabs inside of an UpdatePanel...
<asp:UpdatePanel ID="DataDetails_Panel" UpdateMode="Conditional" runat="server">
<div id="ABIOptions_TabContainer">
<ul>
<li>Attendance</li>
<li>Grades</li>
<li>Gradebook</li>
<li>PFT</li>
<li>Scheduling</li>
<li>Miscellaneous</li>
<li>Parent Data Changing</li>
</ul>
</div>
</asp:UpdatePanel>
...which I then wire up in javascript later...
var optionTabContainer = $("#ABIOptions_TabContainer").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
},
select: onMainTabSelect
}).data("kendoTabStrip");
Scenario
The users will click on the various tabs and inside of each tab are settings for our portal. When they are in a tab and they make a change to a setting, the expectation is that they'll click on the 'Save' button, which will perform a postback to the server via ajax, because it is in the update panel.
Current Behavior
After the post back happens and the ul content comes back, I reapply the kendoTabStrip setup function call, which makes none of the tabs selected. This appears to the user like the page is now empty, when it just had content.
Desired Result
What I want to do, is after the partial postback happens and the UpdatePanel sends back the ul, I want to reselect the tab that the user previously selected.
What Already Works
I already have a way to preserve the tab that the user clicked on:
var onMainTabSelect = function (e) {
tabToSelect = e.item;
console.log("onTabSelect --> ", e.item.textContent);
}
and a function to reset the selected tab whenever it is called:
function setMainTab() {
if (!jQuery.isEmptyObject(tabToSelect)) {
var tabStrip = $('#ABIOptions_TabContainer').data("kendoTabStrip");
console.log("Attempt to set tab to ", tabToSelect.textContent);
tabStrip.select(tabToSelect);
} else {
console.log("tabToSelect was empty");
}
}
What Doesn't Work
My hypothesis is that the Kendo TabStrip says, "Hey, that tab is already selected" when I call the setMainTab after my postback:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
BindControlEvents();
setMainTab();
});
...and therefore, doesn't set my tab back. If I click on the tab, then Poof, all my content is there just like I expect.
Any ideas what I may be doing wrong?
I ended up changing the onMainTabSelect method to:
var onMainTabSelect = function (e) {
tabToSelect = $(e.item).data("tabindex");
}
which gets me the data-tabindex value for each li in my ul. I couldn't get the tab index from kendo, so I had to role my own. Once I got that value, then I was able to set the selected tab via an index rather than the tab object reference itself.
I'm using a YUI2 DataTable.
Some of the rows of the tables have an icon button that when clicked on will popup additional details for the row.
I'm doing the following to define the panel which gets displayed with the additional information:
MyContainer.panel2 = new YAHOO.widget.Panel("popupPanel2",
{ width:"650px", visible:false, constraintoviewport:true, overflow:"auto" } );
MyContainer.panel2.render();
YAHOO.util.Event.addListener("showButton2", "click",
MyContainer.panel2.show, MyContainer.panel2, true);
So, everything works well with that. Then I added a button that when clicked on filters out some of the rows.
MyContainer.oPushButton1.onclick = function onButtonClickp(p_oEvent)
{
var filter_val = "xxx";
myDataTable.getDataSource().sendRequest(filter_val,
{success: myDataTable.onDataReturnInitializeTable},myDataTable);
}
This filters and redraws the table. But after doing that, the buttons on the remaining rows that should popup a panel no longer work.
Nothing happens when I click on the buttons.
I'm sure I've done something wrong, but I don't know what. The buttons and panels with the correct id's still seem to be available on the page.
Do I somehow have to re-enable the listener for the click event after the datatable redraw? I'm not sure where to look for trying to debug the failed listener.
I got this working by making a call to addListener again after resetting the data for the Datasource.
MyContainer.oPushButton1.onclick = function onButtonClickp(p_oEvent)
{
var filter_val = "xxx";
myDataTable.getDataSource().sendRequest(filter_val,
{success: myDataTable.onDataReturnInitializeTable},myDataTable);
YAHOO.util.Event.addListener("showButton2", "click",
MyContainer.panel2.show, MyContainer.panel2, true);
}
I am trying to bring up a fancybox widget using a custom button in jqgrid. To do this, I would need to grab the Id of the selected row. I am currently trying this to do it. And it is not working. The custom button shows, it responds to the click event, but I cannot get the selected id. Can anyone help me out? Thanks!!!
jQuery("#list").jqGrid('navGrid','#pagernav',
{edit:true,add:false,del:false,search:false},
{
height:280,
reloadAfterSubmit:true,
closeAfterEdit:true,
editCaption: "Edit Sample",
bSubmit: "Submit",
bCancel: "Cancel",
bClose: "Close",
checkOnSubmit:true,
saveData: "Data has been changed! Save changes?",
bYes : "Yes",
bNo : "No",
bExit : "Cancel"
}
).jqGrid('navButtonAdd','#pagernav',{
caption:"Add",
buttonicon:"ui-icon-add",
onClickButton: function(lastsel){
alert("Adding Row to id" + lastsel);
},
position:"last"
});
Look the answer. It shows how to get 'selrow' parameter of jqGrid which you need. In case of multiselect scenario (multiselect: true) you should use 'selarrrow' parameter instead.
The only parameter of navButtonAdd is the event object from the click event (see jqGrid code). Because the click is on your custom button it bring you very little information. You can use the event only for example to implement different actions if the button was clicked in combination with Ctrl or Shift or some other keys pressed. In all standard scenarios you have to use 'selrow' or 'selarrrow' parameters.
You should be careful, because the custom button can be clicked even if no rows are selected. In the case the value of 'selrow' parameter is null (the value of 'selarrrow' is empty array []).
You can consider to implement hide/show or enable/disable some navigator buttons based on whether or which row is selected. See this and this demos from this and this old answers.
for a treegrid i want to enable the add button only if a record is selected. if that is not possible on clicking the add button i would like to see if the rowid selected is not null.
Any ideas i tried the beforeshowform i could not figure out how to skip adding the form.
beforeShowForm: function(formid) {
var rowid = jQuery("#treegrid").getGridParam('selrow');
if(rowid == null ) {
return[false,"Please select a row."];
} else {
return[true,""];
}
}
Please help!
In the old answer I created the demo. In the demo I made the first row 'not-editable-row' so the "Add" and "Edit" buttons from the navigation bar will be disabled on the row selection. If one selects the second row the "Add" and "Edit" buttons will be enabled. If one unselect the row, so no rows are selected the "Add" and "Edit" buttons will be disabled one more time.
You can use the same idea in case of the treegrid.
I am using HP webOS 3.0 and the Enyo framework.
I have simple question that how can I show and hide images on click of a button. I have 2 images and I want to show images on click of one button and hide on click of another button.
I have two panes called left pane and right pane on a single view.
I have around 10 items on left pane.
On each of the item click appropriate view is called on right pane.
I am doing it with following code.
showTaskView: function(){
this.$.rightPane.selectViewByName("taskView");
},
Now I want to know how can access the control's property in the main view containing both left pane and right pane.
For example,
I want to show / hide image in the taskView displayed on the right pane on click of the button that is neither in the left pane or right pane but on the header part of the view that contains both left and right pane.
It is not allowing me to access the control's image.setSrc method from the main view.
I have tried it with the following code.
editTask: function() {
this.$.task.image.setSrc("images/image2.jpg");
}
and
editTask: function() {
this.$.image.setSrc("images/image2.jpg");
}
It gives me the following error:
Cannot read property 'setSrc' of undefined
With VirtualList, your hash will only reference the currently "selected" row. "selected" being either the row receiving an event or one explicitly selected using prepareRow(). If you want to change every row, you should set a property and call refresh() on the list to cause it to rerender.
The below should work (I think ...)
setupRow: function(inSender, inIndex) {
var row = this.data[inIndex];
if (row) {
this.$.caption1.setContent("Greet a " + row.task + ":");
this.$.star.setSrc("images/grey-star.png");
if(this.hideStart) this.$.star.hide();
this.$.caption2.setContent(row.assignto);
return true;
}
},
buttonClick: function(){
this.hideStar = true;
this.$.myVirtualList.refresh();
}