I have two kendo grids in a page, I am trying to transfer some items from one grid to another on button click . my code is working perfectly in Chrome but not in IE.
$('#btn_move_1_2').on('click', function(){
var grid1 = $('#grid1').data('kendoGrid');
var grid2 = $('#grid2').data('kendoGrid');
grid1.select().each(function(key , value){
var currItem = grid1.dataItem(value);
grid1.dataSource.remove(currItem);
//on second iteration gets error- Unable to get property 'uid' of undefined or null reference
grid2.dataSource.add(currItem);
});
grid1.select().each(function(){ grid1.removeRow($(this)); });
grid2.refresh();
});
single selection will work fine. on multiple selection it broke in second iteration with error "Unable to get property 'uid' of undefined or null reference"
I created a sample snippet to show the error http://dojo.telerik.com/#jomet/oVICI
Please try with the below code snippet. Instead of passing full TR declaration I am passing only the row's unique Id to get the modal/item detail.
$('#btn_move_1_2').on('click', function () {
var grid1 = $('#grid1').data('kendoGrid');
var grid2 = $('#grid2').data('kendoGrid');
var rowSelected = grid1.select();
grid1.select().each(function (key, value) {
// I have updated below code line
var currItem = grid1.dataSource.getByUid($(value).data('uid'));
grid1.dataSource.remove(currItem);
grid2.dataSource.add(currItem);
});
grid1.select().each(function () { grid1.removeRow($(this)); });
grid2.refresh();
});
Let me know if any concern.
Related
I am trying to select data from a kendo grid. I need to select one cell at a time when user clicks one key element in that row. I am successful in getting each row's data from first page but when I go to the next page the same function does not work anymore. Do I have to add code in change function ie., in grid change?
Here's the code:
$('.data').click(function () {
alert($(this).text());
var grid = $("#List").data("kendoGrid");
var selectedItem = grid.dataItem(this.parentElement.parentElement);
CData.set('activedata', selectedItem);
}
I understand data source gets all the data but this doesn't work:
$('.data').click(function () {
alert($(this).text());
var grid = $("#List").data("kendoGrid");
var selectedItem = grid.dataItem(this.parentElement.parentElement);
CData.set('activedata', selectedItem);
}
for (var i = 0; i < datasourcedata.length; i++) {
var currentitem = datasourcedata[i].CompanyID;
if (currentitem == $('.data')) {
selectedItem = grid.dataItem(this.parentElement.parentElement);
alert($(selectedItem));
Comp.set('activeCompany', selectedItem);
}
}
Where am I wrong? Any help appreciated.
This will help you for printing all pages in kendo grid
var dataSource = $("#grid").data("kendoGrid").dataSource;
dataSource.pageSize(dataSource.total());
I change datasource settings.
serverPaging: false,
serverFiltering: false,
serverSorting: false
solved in this way.
I think you don't need to use jquery events but instead use some kendo approach with change event. That way you always can change selectedDataItems collection based on users actions.
I've got two datatables and there is a dropdown created in the second one with data from the first. I've created a jsbin here
If you add a couple of instructions to the first table (add any text and then click Add Instruction) - then click on the Load Copied Data button, you will see the dropdown box is populated from the first table.
If I do:
$('#btnTest').on('click', function (e) {
var tsor = $('#tblSORSInstall').dataTable();
var ins = tsor.fnGetData();
alert(ins);
});
It basically gives me the html for the dropdown - how do I get which value they have chosen? I was thinking of having a hidden column and updating that on the onchange of the dropdown, but is there a better way?
Thanks in advance
You may use jQuery.map() to generate an array of selected text/value, like below.
$('#btnTest').on('click', function (e) {
//var tsor = $('#tblSORSInstall').dataTable();
var ins = $('#tblSORSInstall').find("tbody select").map(function() {
return $(this).find(":selected").text() // get selected text
//return $(this).val() // get selected value
}).get()
alert ( JSON.stringify(ins, null, 2) )
});
Here is your JS Bin - updated
Using tsor.fnGetNodes() you can get all table row nodes, then you can loop through those and get the select values.
Final code will look something like
$('#btnTest').on('click', function (e) {
var tsor = $('#tblSORSInstall').dataTable();
var ins = tsor.fnGetData();
var a = tsor.fnGetNodes();
$.each(tsor.fnGetNodes(), function (index, value) {
alert($(value).find('select').val());
});
});
I have a selectize.js dropdown and I have to clear the selected value .
I have tried this (as suggested in another question):
var selectize = $("#optionNetFlow")[0].selectize;
selectize.clear();
But it gives the following error:
When I change it to this:
var selectize = $("#optionNetFlow").selectize;
selectize.clear();
I gives this error:
What I am doing wrong here?
I finally found the answer here Selectize.js Demos
What works for me is:
var $select = $('#optionNetFlow').selectize();
var control = $select[0].selectize;
control.clear();
what I was missing var $select = $('#optionNetFlow').selectize(); before applying the solution provided in above question's answer.
Now I am to get all the functions in console like :
Try this,
$("#optionNetFlow")[0].selectize.clear();
Try this out:- http://jsfiddle.net/adiioo7/2gnq1ruv/204/
JS:-
jQuery(function ($) {
var $select = $('#input-tags').selectize({
persist: false,
create: true
});
$("#btnClear").on("click", function () {
var selectize = $select[0].selectize;
selectize.clear();
});
});
All other answers either clear a single selectize or need a specific reference to the selectize in the moment of it's creation.
The solution below, on the other hand, works for any number of selectize elements you have inside any form; you just need to specify the desired form:
$('form').find('.selectized').each(function(index, element) { element.selectize && element.selectize.clear() })
The rationale is that Selectize keeps the original element in the DOM (hiding it), adds a reference to the selectize on the .selectize property of the DOM element and adds a CSS class selectized to it.
So the solution finds all the elements that have the CSS class selectized, loops through them and calls element.selectize.clear().
$(document).on('click', 'div.selectize-input div.item', function(e) {
var select = $('#services').selectize();
var selectSizeControl = select[0].selectize;
// 1. Get the value
var selectedValue = $(this).attr("data-value");
// 2. Remove the option
select[0].selectize.removeItem(selectedValue);
// 3. Refresh the select
select[0].selectize.refreshItems();
select[0].selectize.refreshOptions();
});
This do not remove the item from the select, just remove it from the selected options.
Or if you have multi select, and do want to restore selected items in the drop-down list (hide selected set to true).
var selectize = $("#select-item").selectize;
//clone array
var items = selectize.items.slice(0);
for (var i in items) {
selectize.removeItem(items[i]);
}
selectize.refreshOptions();
I've checked the jqgrid documentation page, and also here, here and here but none of them answers my problem.
I have a jqgrid with the inline navigator (the buttons at the bottom left of the grid that allow adding/editing rows) displayed.
The grid has a hidden column, with the name hidden_col.
I would like to make the following - When the user selects a row and tries to delete it, the javascript makes an alert - which shows the value of hidden_col for the selected row.
For this, I have the following code
$("#myjqgrid").jqGrid('navGrid',"#myjqgrid_pager",
{}, //options
{}, // edit options
{}, // add options
{ mtype:"POST",
reloadAfterSubmit:true, //Reload data after deleting
onclickSubmit: function(rowid)
{
var rowData = $('#broadcast_table').jqGrid('getRowData', rowid);
alert(rowData);
}
}, // del options
{} // search options);
);
The alert returns "[Object object]". How can I get the value of hidden_col?
I tried adding
var col_value = rowData.hidden_col;
And
var col_value = rowData['hidden_col'];
But both return undefined.
I checked the value in rowid - it is correct. I also know that hidden_col has a value for each row.
What can I be doing wrong?
Turns out I was not using the parameter "rowid" as I should.
Here is the code, which I replaced in the first post, that does what I want:
onclickSubmit: function(){
var selected_row = $('#myjqgrid').jqGrid('getGridParam', 'selrow');
var rowdata = $('#myjqgrid').getRowData(selected_row);
alert(rowdata.hidden_col);
}
I have 2 dropdownlists on a asp page.
If user changes the selected index of the first drop down list, then set DDL2.selectedindex = DDL1.Selectedindex
and do this same logic except switch DDL1 and DDL2 respectively. I have these both getting populated from the same list of objects(just different properties set to each) and i have a order by clause on the query to ensure the data stays in sync. My question is how can i get this logic to work in javascript? My current method is as such..
Accounts.Attributes.Add("onBlur", Customers.SelectedIndex = Accounts.SelectedIndex)
Customers.Attributes.Add("onBlur", Accounts.SelectedIndex = Customers.SelectedIndex)
This code doesn't work but demonstrates what im shooting for. When the ddl getting the first selection loses focus, populate the other ddl(setting the selected index). Any help would be great!
Can someone see what i'm doing wrong here?
$("[id$=ddlStandardAcctNo]").change(function () {
var acc = $("[id$=ddlStandardAcctNo]");
var cust = $("[id$=ddlCustomerName]");
cust.selectedindex = acc.selectedindex;
});
It compiles and just doesn't work... :( These drop downs are inside of a asp gridview.
After looking at that i'm trying to do this..
$("[id$=ddlStandardAcctNo]").blur(function () {
var acc = document.getElementById('<%=ddlStandardAcctNo.ClientID %>');
var cust = document.getElementById('<%=ddlCustomerName.ClientID %>');
cust.selectedindex = acc.selectedindex
});
$("[id$=ddlCustomerName]").blur(function () {
var acc = document.getElementById('<%=ddlStandardAcctNo.ClientID %>');
var cust = document.getElementById('<%=ddlCustomerName.ClientID %>');
acc.selectedindex = cust.selectedindex
});
Problem is i never use document.ready cause the dropdownlist are in a gridview. I'm literally just learning javascript/jquery as i run across issues like this so feel free to crack the knowledge whip lol.
I figured this out finally!!!! the solution for jquery prior is the following
$("[id$=ddlStandardAcctNo]").change(function () {
$("[id$=ddlCustomerName]").attr("selectedIndex", this.selectedIndex);
});
$("[id$=ddlCustomerName]").change(function () {
$("[id$=ddlStandardAcctNo]").attr("selectedIndex", this.selectedIndex);
});