I have a problem with the Kendo UI TreeView and I'm looking for a solution for a while now. I found something similar here, but it didn't help me.
In my view I fill my TreeView like this:
Html.Kendo().TreeView()
.Name("treeview")
.BindTo((IEnumerable<TreeViewItemModel>) ViewBag.inlineDefault)
.Events(events => events
.Select("onSelect")
)
private IEnumerable<TreeViewItemModel> GetDefaultInlineData(ArrayList tables)
{
List<TreeViewItemModel> names = tables.Cast<TreeViewItemModel>().ToList();
List<TreeViewItemModel> inlineDefault = new List<TreeViewItemModel>
{
new TreeViewItemModel
{
Text = "Tables",
Items = names
}
};
return inlineDefault;
}
My onSelect funtion is the following:
<script>
function onSelect(e) {
$.ajax({
type: 'POST',
url: '/Editor/GetTableContent' ,
data: { tableName: ?????? },
success: function (data) {
$('#table').html(data);
}
}).done(function () {
alert('Done');
});
}
</script>
It calls a mehtod in my controller that needs the name of the selected node as parameter (string) to display the content of a table in a grid.
Is there a possibility to get what I need?
Thx for your help!
To get the text of the selected node in onSelect():
var nodeText = this.text(e.node);
this == the TreeView(can also use e.sender instead of this)
e.node == the selected node.
http://docs.telerik.com/kendo-ui/api/javascript/ui/treeview#events-select
http://docs.telerik.com/kendo-ui/api/javascript/ui/treeview#methods-text
Related
I created a Kendo UI Grid view and it displays data correctly , now what I am trying to achieve is that ; When i Click on a row I want to get the primary key of that row and use it elsewhere I tried many solution in net but I did not work. does anyone knows how to achieve this.
here is my code :
function FondsGrid() {
var sharedDataSource = new kendo.data.DataSource({
transport: {
read: {
url:
"http://localhost:...........",
dataType: "json"
}
},
pageSize: 20
});
var accountGrid = $("#grid-fonds").kendoGrid({
dataSource: sharedDataSource,
sortable: true,
pageable: false,
columns: [
{
field: "CodIsin",
title: " ",
template: '<span class="categ #= CodIsin #"></span>',
attributes: {
class: "text-center"
},
headerattributes: {
style: "text-align:center"
},
width: 35
},
{
field: "LIBELLEPDT",
title: "Nom du fonds",
template: '<div id="#: IdProduitSP #" class="title-fonds #:
IdProduitSP #" data-toggle="popover" ><span class="desc-
fonds">#: LibClassificationNiv2 #</span>#: LIBELLEPDT #
.
.
.
dataBound: function () {
var widthGrid = $('.k-grid-content').width();
$(".k-grid-header").width(widthGrid);
$(".title-fonds").popover({
trigger: 'hover',
html: true,
template: '<div class="popover HalfBaked" role="tooltip">
<div class="arrow"></div><h3 class="popover-header"></h3><div
class="popover-body"></div></div>',
content: function () {
return $('#popover-content').html();
}
});
}
}).getKendoGrid();
/* Initialisation */
$(document).ready(function ($) {
FondsGrid();
});
Your own answer is perfectly valid and is a good example of how you can use jquery to directly target the dom elements that kendo generates. This approach is always valuable when kendo does not offer the functionality you need.
However in this case, the grid widget offers the change event. You can set the grid to be 'selectable' and subscribe to the 'change' event which fires when one or more rows are selected:
selectable: "multiple, row",
change: function(e) {
var selectedRows = this.select();
var selectedDataItems = [];
for (var i = 0; i < selectedRows.length; i++) {
var dataItem = this.dataItem(selectedRows[i]);
selectedDataItems.push(dataItem);
}
// selectedDataItems contains all selected data items
}
Within the handler function, 'this' refers to the grid widget instance and calling the select() function on it returns the selected rows. From those rows, you can then retrieve the datasource items that are bound to them giving you access to the id and any other properties.
See here for more details: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/change
This how I fixed It.
$("#grid-fonds").on("click", "td", function (e) {
var row = $(this).closest("tr");
var value = row.find("td:first").text();
console.log(value);
});
Hi; i have a problem. i want to open a popup(Jqueryui popup) on webpage. But i can not. How to make it correctly?
View:
grid.Column("", format: (item) => Html.ActionLink("Click", "", "", new { #customerId = ConvertUtil.ToInt(item.Id) }, new { #class = "popupLink" })),
OR
grid.Column("", format: (item) => Html.ActionLink("Click", "Edit", "Customer", new { #customerId = ConvertUtil.ToInt(item.Id) }, new { #class = "popupLink" })),
Jquery Code:
$(".popupLink").click(function () {
jQuery('#dialog').dialog('open');
});
Controller
public ActionResult Edit()
{
return View();
}
i need also id value. Not only popup. i wan to open Edit Pop up. How to open edit popup any row?
First of all, you need to stop default action of the click event
$(".popupLink").click(function (e) {
$('#dialog').dialog('open');
e.preventDefault();
});
That will show empty dialog (of course if you have #dialog container in your view).
Before showing the dialog you must load proper view. I would do this like that:
var url = $(this).attr('href');
$('#dialog').load(url);
Finally, the whole solution:
$(".popupLink").click(function (e) {
$('#dialog').load($(this).attr('href'));
$('#dialog').dialog('open');
e.preventDefault();
});
The following solution can be reused on an ActionLink without modifying the source document. It also won't show the dialog until the loading is complete:
$("a.popuplink").live("click", function (evt) {
evt.preventDefault();
$("<div></div>").insertAfter(this);
$.ajax({
url: this.href,
context: this
}).done(function (data) {
$(this).next('div').html(data);
$(this).next('div').dialog();
});
});
I have the following code that works great for row click, but I want the first and last column to be clickable and I want to be able to tell which column was clicked. I have the following code
$(document).ready(function() {
oTable = $('#mytable').dataTable();
var fa = 0;
$('#submit tbody td ').click(function() {
var gCard = $('#mytable tbody').delegate("tr", "click", rowClick);
});
function rowClick() {
fa = this;
var id = $("td:eq(1)", this).text();
cardNumber = $.trim(id);
$.ajax({
url : 'myurltopostto',
type : 'POST',
data : {
id : id
},
success : function(data) {
oTable.fnDraw(); //wanted to update here
},
error : function() {
console.log('error');
}
});
}
});
the code here is the row click
var gCard = $('#mytable tbody').delegate("tr", "click", rowClick);
what can I do for a cell click and get info.
using jquery plugin dataTables
thanks
When you do it $('#submit tbody td ').click(function() ... you bind click event to the td.
So, to get the first and last column click use the following:
$('td:first, td:last', '#submit tbody tr').on('click', function() {
// do what you want
});
demo1
updated 1:
Get last two columns:
jQuery('#mytable tr').each(function() {
jQuery('td', this).slice(-2).on('click', function() {
// do what you want
});
});
demo2
update 2: Get each column data on click last two columns
jQuery('#mytable tr').each(function() {
jQuery('td', this).slice(-2).on('click', function() {
// do what you want
var $columns = jQuery(this).siblings('td').andSelf();
jQuery.each($columns, function(i, item) {
alert(jQuery(item).html());
});
});
});
demo3
Just specify a column number instead of first, last, etc. The example below shows column 12. zero is first. It's easier that way.
td:eq(11)
$(document).ready(function() {
var table = $('#tableID').DataTable();
$('#tableID').on('click', 'tr', function () {
var data = table.row( this ).data();
alert( 'You clicked on '+data[0]+'\'s row' );
} );
} );
for more refer this link
Situation:
My tooltips show up on my page. Opening my fancybox works. Doing the ajax post from that fancybox works.
But my tooltips don't work in that fancybox. And they don't work after my ajax post.
I tried to reinitialize TipTip with the callbacks of fancybox.
EDIT
Title changes
So I found a way to let it run on the second hover after post but not on first hover.
I also found some explanations here but it still didn't fix my problem. Probably doing it wrong.
EDIT 2
Tootip in fancybox working use afterShow only.
Changes
added this in $(function () { so that it calls this function instead of initTipTip.
$(".tooltip").live('mouseover', function () {
$(this).tipTip();
});
Code of my function that does the post thing and closes my fancybox.
var reservation = MakeReservation();
var oldDateSplit = $("#resDate").val().split('/');
var newDateSplit = $("#dateEditReservation").val().split('/');
var oldDate = new Date(oldDateSplit[2], oldDateSplit[1] - 1, oldDateSplit[0]);
var newDate = new Date(newDateSplit[2], newDateSplit[1] - 1, newDateSplit[0]);
var time = $("#txtTime");
$.ajax({
url: ResolveUrl('~/Reservation/CheckSettings'),
data: "JSONString=" + reservation + "&hasJavaScriptMethod=" + true
}).done(function (data) {
if (data.length == 0 || oldDate.getTime() == newDate.getTime()) {
$.fancybox.close();
var id = $("#reservationId").val();
$("#reservationList").load(ResolveUrl('~/Reservation/reservationList',
function () { initTipTip(); }));
$("#reservationDetail").load(ResolveUrl('~/Reservation/DetailInfo',
function () { initTipTip(); }), { reservationId: id });
$("#reservationList").on("hover", " .tooltip", function () { $(this).tipTip(); });
}
else {
$(".errorDiv").removeClass("hidden");
$(".errorDiv").html(data);
$(".btnReservations").removeAttr('disabled');
}
});
NEW
$(".tooltip").live('mouseover', function () {
$(this).tipTip();
});
}
Still the same as before the edit.
Code initialization for TipTip
function initTipTip () {
$(".tooltip").tipTip();
}
Code of fancybox
function openFancy() {
$("a.inline").fancybox({
'type': 'ajax',
'afterShow': function () {
return initTipTip();
}
});
$("a.inlineBlockedDate").fancybox({
'type': 'ajax',
'ajax': { cache: false },
'afterShow': function () {
return initTipTip();
}
});
}
I found the solution for this.
So I used my .live in $(function(){ like in my question but I did not use ".tooltip" here but the table itself. I also use initTipTip here instead of $(this).tipTip();
So this solves the Tooltip from TipTip.
Explanation: This is because the tooltip.live only gets triggered on first hover and not when the table 'refreshes'. So now you add that event on that refresh of the table
Correct me if I'm wrong here.
So no need for any other .tiptip stuff or InitTipTip then in $(function(){
$("#reservationList").live('mouseover', function () {
initTipTip();
});
I hope your problem gets solved with this question.
I have the following code and am curious as how to force the input to match the contents of the autocomplete:
$("#foo").autocomplete({
source: function( request, response ) {
$.ajax({
url: "index.pl",
dataType: "json",
data: {
type: 'foo',
term: request.term
},
success: function( data ) {
response( $.map( data.items, function( item ) {
return {
value: item.id
}
}));
}
});
},
minLength: 1
});
Answering this question for the benefit of anyone who stumbles upon this problem in 2013(yeah right!)
$("#my_input").autocomplete({
source: '/get_data/',
change: function(event, ui) {
var source = $(this).val();
var temp = $(".ui-autocomplete li").map(function () { return $(this).text()}).get();
var found = $.inArray(source, temp);
if(found < 0) {
$(this).val(''); //this clears out the field if non-existing value in <select><options> is typed.
}
}
});
Explanation:
The map() method creates a jQuery object populated with whatever is returned from the function (in this case, the text content of each <li> element).
The get() method (when passed no argument) converts that jQuery object into an actual Array.
Here is the original link of where I saw the solution.
I hope this helps. Thanks!