I am trying to use tabstrip, the scenario I am trying to do is to
load the first tab which has search form. When user submits the search I
want to open a new tab and load another page into it (that page has
Kendo grid in it). Here is approximate code to do this:
<script>
function addTab(targetUrl, title) {
var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.append({ text: title, encoded: false, contentUrl: targetUrl});
tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}
function loadDoc() {
var sub_name=document.getElementById("sub_name").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("id_type_span").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "pages/getAttributeList.jsp?sub_name="+sub_name, true);
xhttp.send();
}
$(document).ready(
function() {
$("#tabstrip").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
}
});
var tabstrip = $("#tabstrip").data("kendoTabStrip");
tabstrip.tabGroup.on("click", "[data-type='remove']", function(e) {
e.preventDefault();
e.stopPropagation();
var item = $(e.target).closest(".k-item");
tabstrip.remove(item.index());
});
$("#submitButton").click(
function() {
var url = "http://myurl.com/browser/pages/response.jsp?id_type=" + id_type
+ '&id_value=' + id_value + '&sub_name=' + sub_name;
addTab(url, id_type + ': ' + id_value
+ ' <button data-type="remove" class="k-button
k-button-icon"><span class="k-icon
k-i-close"></span></button>')
}
});
});
</script>
<style type="text/css">
<body>
<div id="tabstrip" style="width: 100%;">
<ul>
<li class="k-state-active">Search</li>
</ul>
<div title="Search" >
</div>
</div>
<body>
and the page I call has this:
<body>
<div id="gridBorder">
<div id="grid"></div>
</body>
to which I load grid dynamically.
What happens is the new tab opens and shows the table as it should,
but when I switch to the first tab it still has the search form shrinked
and the same div with grid displaying that is on the second tab, here
is a picture:
http://imgur.com/Drw5nHd
Hi,
There is an issue with the Kendo Grid when interacting with the grid after removing all items from the dataSource directly. The grid behaves as expected when there are items in the grid, but when the last row is removed and a sort or filter is applied, the original records all reappear in the grid.
Here is a jsfiddle that shows the issue happening: http://jsfiddle.net/wqw34qa0/3/
In the jsfiddle, if you remove all four rows and then sort a column, all four records are added back into the grid. We use this approach to removing items versus calling the removeRow method on the grid object directly because we have many situations in which we need to remove upwards of thousands of rows at a time and it is inefficient to remove them one at a time with the removeRow method. The pushDelete method on the dataSource, in my experience, is also very inefficient at deleting thousands of records at a time (although we are using 2015 R2, so I'm not sure if improvements have been made since then).
Is there a solution where we can continue to update the dataSource.data property and keep it in sync with the grid, even when all items are deleted? Or must we use another approach?
Thank you.
Hi,
Can't figure out why the code on the following link is returning this JS error when trying to add a new un-nested task: "Uncaught TypeError: Cannot read property 'set' of undefined"
I've narrowed it down to the following code - it doesn't seem to be related to the (temporarily blank) create/update/delete parts of the datasource since exactly the same happens even when they return the correct responses, even running the same as the official demos with the exception of changing the datasource to JSON.
https://mtpubdev1.microtest.co.uk/kendo/
Any help would be most appreciated.
Hello Telerik Team,
I have a requirement to develop a Grid with collapsible rowes (image attached), I wonder If Kendo Grid supports this behavior or something similar at least,
It is possible to do using Kendo grid or to have a similar behavior at least?
I already reviewed Grid / Aggregates and looks very similar but I'd like to have columns with values in the parent row,
Notice my requirement does not needs to have pagination,
Thanks in advance!
Hello,
i am using custom template for Event add/edit with Kendo Scheduler. I am trying to presenect attendees when user clicks to create new Event. Here is my Scheduler edit event
function scheduler_edit(e) {
var usrName = "@HttpContext.Current.User.Identity.Name";
if ( e.event.CanOpen) {
e.preventDefault();
}
var eventid = e.event.id;
if (e.event.isNew()) {
var rootDir = "@Url.Content("~/")";
$.ajax({
url: rootDir + "Objekt/LoadAdress",
cache: false,
async: false,
data: {
strSelectedObjectID: objectid
},
success: function (data) {
if (data.result == "Error") {
alert(data.message);
} else {
var value = usrName.split(",");
e.event.set("ObjectDesc", desc);
e.event.set("ObjectID", objectid);
e.event.set("LetterHead", data.LetterHead);
e.event.set("Attendees", usrName);
}
}
});
}
}
}
}
The objectID and rest of fields Comes populated. Only Attendees is blank.
The customtemplate has the attendees multiselect as
<div data-container-for="Attendees" class="k-edit-field">
@(Html.Kendo().MultiSelectFor(model => model.Attendees)
.Name("attendies")
.HtmlAttributes(new { data_bind = "value:Attendees" ,style = "width: 300px"})
.DataTextField("LoginName")
.DataValueField("LoginName")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCustomers", "Scheduler");
});
})
.Events(e => { e.DataBound("data_bound"); })
.Value((List<Object>)ViewBag.SelectedUser)
.ValuePrimitive(true)
.TagTemplate("<span class='k-scheduler-mark' style='background-color:\\#= data.Color?Color:'' \\#'></span>\\#=LoginName\\#")
.ItemTemplate("<span class='k-scheduler-mark' style='background-color:\\#= data.Color?Color:'' \\#'></span>\\#=LoginName\\#")
)
<span class="k-invalid-msg" data-for="Attendees"></span>
</div>
Thanks
Anamika
When click schedule will call editable like the picture
Can I change the click event to call the other view?
And how to get the parameter like date?
Just ran into a wacky bug...
We have a data model where the ID field "ThisThatID" we configured a ListView with a datasource with "autoSync: true". We can read and delete fine, but when we added an item to the datasource, we noticed that the create call was never made, despite the data source showing the new item added, and it's dirty flag as false. We tried manually calling sync but to no avail.
We tried various things, but nothing seemed to work, so we took a gamble and renamed our model's ID field to simply "ID", and updated the ds config. Then boom - it worked. No changed except renaming our ID field from "ThisThanID" to "ID" in both the DS config and the actual model object.
Using the latest kendo 2017.2.
Sample ds config:
{
autoSync:
true
,
transport: {
create:{
type:
'POST'
,
url: App.root +
'api/blah/'
},
read: {
url: App.root +
'api/blah/'
},
destroy: {
type:
'DELETE'
,
url: App.root +
'api/blah/'
}
},
schema: {
model: {
id:
"ThisThatID"
}
}
}
Hi
Is it possible to enforce dependencies in kendo Gantt?
I.e. when a task is updated its dependent tasks will be moved and changes will propagate through summary tasks etc.
Thanks in advance.
Gary
I have a problem with the export to XLS functionality.
I'm trying to export all pages to XLS from my grid but what I'm getting is only the first page. Is doesn't matter on which page I'm currently on, export to XLS always sets the page to 1 and it doesn't export other.
I using the same mechanism for export to PDF and I don't have any issues. I see this export functionality goes from page 1 to the last page and generates the PDF.
I tried with different Kendo UI versions but the result is the same.
Please advise if you had similar issues.
Thanks,
Tomasz