or
3 answers
685 views
I am trying to have the cell filter render a DateTimePicker with the parsed format as 24 hr - when i select 20.30 from the time picker portion it gets set in the rendered input as 03/06/2017 08:30 - I have tried numerous configurations for the template format arguments - could someone please point me in the right direction?
dcolumns[ci]["type"] = 'date';dcolumns[ci]["filterable"] = { cell: { showOperators: false, template: function (args) { args.element.kendoDateTimePicker({ timeFormat: "HH:mm", format: "MM/dd/yyyy HH:mm", parseFormats: ["MM/dd/yyyy hh:mm tt"] }); } }}
lorraine
Top achievements
Rank 1
Rank 1
answered
on
07 Jun 2017
1 answer
209 views
I have a Kendo UI grid (MVC) on a page. I have the height set so that about 20 rows can be displayed. When I have 20 rows displayed and click the Add New Record button or programmatically add a new row, the grid does not scroll up so that the new row can be seen at the bottom of the page (where I have new rows set to display). If I start typing into the first column, the grid will usually scroll up so I can see the new row (but not always).
Milena
Telerik team
answered
on
07 Jun 2017
7 answers
1.4K+ views
How does one set the grid's grouping UI elements to display a custom description. Meaning the grouping buttons at the top of the grid and the group designations that are displayed on the left hand side of the grid. By default these show the group field: the grid fields:
Orlin
Telerik team
answered
on
07 Jun 2017
2 answers
260 views
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
Dimitar
Telerik team
answered
on
07 Jun 2017
1 answer
594 views
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
Dimitar
Telerik team
answered
on
07 Jun 2017
1 answer
408 views
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.
Stefan
Telerik team
answered
on
07 Jun 2017
1 answer
1.4K+ views
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.
Nencho
Telerik team
answered
on
07 Jun 2017
2 answers
1.1K+ views
Is it possible to restore
tree to the same opened state after page update with remote binding.
Viktor Tachev
Telerik team
answered
on
07 Jun 2017
5 answers
613 views
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!
Alex Hajigeorgieva
Telerik team
answered
on
07 Jun 2017
3 answers
394 views
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
Ianko
Telerik team
answered
on
07 Jun 2017
