I am planning to use Jquery datatable.
I want to select many columns and enable user to select which column to display.
I have found this,
https://datatables.net/examples/api/show_hide.html
But what i want is that toggle line to be a dropdown. How can i do this?
Or is there any other plugin which supports this.???
Take a look at this example here. It's creating the dropdown select element which will toggle the visibility of the column selected.
The code is:
$(document).ready( function () {
var table = $('#example').DataTable();
table.columns().every(function(index, tableCounter, counter) {
$('<option/>').val(counter).text($('#example thead th:eq(' + counter + ')').text()).appendTo('#select');
});
$('#select').on('change', function() {
var visible = table.column($(this).val()).visible();
table.column($(this).val()).visible(!visible);
});
} );
Related
how to append with dynamic id.
$(table).append(");
please suggest me how to generate different id of text box and on click function on #button(that button is also append {want to create dynamic id of button also } )
here is what require, dynamic id can be generated and can be refer with 'on' event
Here is complete solution
$( document ).ready(function() {
$('#add').off('click').on('click',function() {
var uniqid = Date.now();
$("#form").append("<input class='txtBox' id="+uniqid+" />");
});
$('#form').on('change keyup paste', '.txtBox', function() {
alert($(this).attr('id'));
});
});
When I'm using Javascript options for collapse, the toggle doesn't work. It only opens first time the panel.
This one works well - $('#login').collapse('toggle')
But I want to add more options like parent.
http://www.bootply.com/DFfPmKnDTd#
this code can be help...
$('#login').collapse({
toggle : true,
parent : '#accordion'
});
$('#c1').on('click', function(){
$('#login').collapse('toggle');
}
);
First you need to initiate collapse function and then make call to toggle it.
Then you need to initialize each collapse link.
Try using by using this code may be it can work for target link.
$.each($('#accordion .accordion-toggle'), function(index, collapse_link)
{
var $collapse = $('#collapse_element_id'+element_no); // you need to right here '#c'+element_id ( it will take #c1, #c2 , #c3 )
$collapse.collapse({
toggle : true,
parent : '#accordion'
});
$(collapse_link).on('click', function(){
$collapse.collapse('toggle');
});
});
I have a problem in preserving the values in the textbox after dropdownlist selected index changed in asp.net mvc. Below is the code for initiating the dropdown onchange event.
#Html.DropDownList("BranchId",null,"Select Branch", new { onchange = "location.href='/User/GetRoles?BranchId='+this.options[this.selectedIndex].value" })
Аnd the roles dropdown binded with the values, but what i typed in the textboxes just above the branch dropdown get lost.
Please help me.
Regards,
Azeem
This is because you are changing your URL location by using location.href. What exactly do you want to achieve? If you need to load certain logic, you might as well bind change event to jQuery function that could load data from the server, and then you do something with that data.
$(document).ready(function() {
$("#BranchId").change(function() {
$.getJSON(YourUrlThatReturnsValues, {data: yourparameter}, function() {
// do some processing here.
});
});
});
The other option is to use Ajax Helpers instead of Html Helpers. Instead of Html.DropDownList you would use Ajax.DropDownList.
You may try something like that:
$(function () {
$('#BranchId').change(function () {
var id = $("#BranchId option:selected").val();
var data = {BranchId: id };
$.get("#Url.Action("User", "GetRoles")", data).done(function(d){
$('.somediv').val(d.rolename)
});
});
I've got a nested grid within my grid, and it works perfectly, but the client doesn't like to use the arrow on the left and asked for a button to be added in order to show the child grid.
The example on the Kendo website shows how to automatically open the first row, I just want a way to expand the grid from a custom control in the same way that the left selector does it.
I've got the custom command working, and it executes the sample code, but I just need some help with the javascript required to make it work for the current row.
columns.Command(command =>
{
command.Edit().Text("Edit").UpdateText("Save");
command.Destroy().Text("Del");
command.Custom("Manage Brands").Click("showBrandsForAgency");
And the js with the standard example of opening the first row:
function showBrandsForAgency(e) {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
Please help by giving me the js required to expand the row clicked and not the first row?
* EDIT *
Modified the solution provided by Atanas Korchev in order to get it to work on only the button and not the whole row.
I'd prefer a solution that uses the function showBrandsForAgency instead of a custom funciton but this does the job:
$(document).ready(function () {
$("#grid").on("click", "a", function (e) {
var grid = $("#grid").data("kendoGrid");
var row = $(this).parent().parent();
if (row.find(".k-icon").hasClass("k-minus")) {
grid.collapseRow(row);
} else {
grid.expandRow(row);
}
});
});
You can try something like this:
$("#grid").on("click", "tr", function(e) {
var grid = $("#grid").data("kendoGrid");
if ($(this).find(".k-icon").hasClass("k-minus")) {
grid.collapseRow(this);
} else {
grid.expandRow(this);
}
});
When using jQuery on the function context (available via the this keyword) is the DOM element which fired the event. In this case this is the clicked table row.
Here is a live demo: http://jsbin.com/emufax/1/edit
Same results just Simpler, faster, and more efficient:
$("#grid").on("click", "tr", function () {
$(this).find("td.k-hierarchy-cell .k-icon").click();
});
I am trying to set a hidden form field with the value of a selected radio button. I have the following code:
$(function () {
// set hidden form field with selected timeslot
$('input[name=["timeslot"]').live("click", (function () {
var valu = $(this).val();
alert(valu);
$("#selectedSlot").val(valu);
}));
});
All radio buttons have the name "timeslot", and I would like to run this function whenever one is clicked. However, the alert box shows blank when I click one of the radio buttons.
UPDATE: Oops! Didn't see the double square brackets. However I fixed it:
$('input[name="timeslot"]').live("click", (function () {
var valu = $(this).val();
alert(valu);
$("#selectedSlot").val(valu);
}));
and I am STILL having the same problem. In fact, the alert box does not even come up any more for some reason.
UPDATE 2: Actually, in my real code I have other events registered in my initiation block besides this one -- if I take out all of them except for the radio button one, it works!
For example, if I have this:
$(function () {
// set hidden form field with selected interviewee
$('#interviewees').live("change", (function () {
var selected = $("#interviewees").val();
$("#selectedInterviewee").val(selected);
}));
// set hidden form field with selected timeslot
$('input[name="timeslot"]').live("click", (function () {
var valu = $(this).val();
alert(valu);
$("#selectedSlot").val(valu);
}));
});
then the radio button click event does NOT fire, though the first one (a dropdown list) does. But if I have the radio button one all by itself, it does. Any ideas????
The input tags look like this:
<input id="slot_7:30-AM" name="timeslot" type="radio" value="slot_7:30-AM" />
I am using IE 8 mostly, but I tried this on Firefox and the same thing happened. What am I doing wrong?
Without seeing your html, I can't be totally sure, but I'm thinking the problem is the selector you're using:
$('input[name=["timeslot"]')
There are at least two problems that might cause issues:
the unclosed square-bracket, and
the use of square brackets inside the attribute selector. Try using: $('input[name="timeslot"]') instead.
Edited in response to comments to the answer, below.
The following seems to work:
$('input[name="timeslot"]').live('click', function() {
var valu = $(this).val();
alert(valu);
$("#selectedSlot").val(valu);
});
JS Fiddle demo.
I am, of course, using a text input, rather than a hidden, but since the selector works on the id it should work regardless of the input type.
OK I got it to work by REVERSING the order of the event registrations:
$(function () {
// set hidden form field with selected timeslot
$('input[name="timeslot"]').live("click", (function () {
var valu = $(this).val();
alert(valu);
$("#selectedSlot").val(valu);
}));
// set hidden form field with selected interviewee
$('#interviewees').live("change", (function () {
var selected = $("#interviewees").val();
$("#selectedInterviewee").val(selected);
}));
});
Ugh. I'm returning to my view that javascript is a flakey mess. But for whatever reason, it does work now. (Both of them work now ... very peculiar.)