Hi, I need to facilitate two pieces of drag and drop functionality usingTelerik UI for MVC.
I have a ListView (of users), and a Panelbar (of teams, and the users in each team are the children for a given Panelbar team item).
I want to drag/drop users from the ListView to the team header (or its child users panel) & this will trigger a call to the server that will make the change to the db. The users when "dragged" remain in the ListView of all users, they are simply added to a team.
Additionally, each user under a team in the PanelBar need to be able to be dragged to a third element in the view (an icon of a recycle bin - this will remove them from a team).
How can I enable drag and drop on the two Kendo controls to make this happen?
Thanks
Matt
I have the following test Grid and Grouping, Reordering, and Resizing all fail to work.
I see a "stop sign" whenever I try to drag and drop a column header to group or reorder. Trying to Resize, I see the handles but it doesn't actually resize.
@(Html.Kendo().Grid<MyWorkRowModel>() .Name("myworkgrid") .Columns(columns => { columns.Bound(c => c.ReqID); columns.Bound(c => c.Title); }) .Scrollable() .Groupable() .Sortable() .Filterable() .ColumnMenu() .Resizable(rsb => rsb.Columns(true)) .Reorderable(r => r.Columns(true)) .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("LoadWorkGrid", "Dashboard").Data("WorkGridUser")))
For Reference "WorkGridUser" is:
function WorkGridUser() { return { uid: "@(ViewBag.UserID)" }}
And the problem is the same even when leaving that off.
What am I doing wrong?
These are the references I am using (along with jquery 1.10.2, bootstrap, and toastr):
<link href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /><link href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" /><link href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.bootstrap.mobile.min.css" rel="stylesheet" type="text/css" /><script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script><script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.aspnetmvc.min.js"></script>
Thank you.
Has anyone ever seen similar behavior and know of a fix? This grid is built dynamically so I do not know the number of columns until after the user chooses which view to render.

Hi,
I use the KendoGrid in Incell editmode. The foreignkey column displays the status dropdownlist. So far so good.
However I want the datasource to be dependent on the modeldata of my grid. Each type of good has different statusses.
Can you provide me with some help to achieve this?
In the examples I encountered the comboboxes uses the ViewData as a datasource. I can't filter on that.
Thanks.
Hi,
I have changed the style for command buttons in Grid using CSS:
.abutton,
div.k-grid .k-grid-edit,
div.k-grid .k-grid-delete,
div.k-grid .k-grid-cancel,
div.k-grid .k-grid-update {
display: inline-block;
width: 16px;
height: 16px;
padding: 0px 0px 0px;
text-align: center;
text-indent: -444px;
border: 0;
}
div.k-grid .k-grid-edit {
background: url('/Content/Icons/edit.png');
}
div.k-grid .k-grid-delete {
background: url('/Content/Icons/cancel.png');
}
div.k-grid .k-grid-cancel {
background: url('/Content/Icons/cancel.png');
}
div.k-grid .k-grid-update {
background: url('/Content/Icons/ok.png');
}
After that all command buttons still have the width equal 64px coming from kendo-common-bootstrap.css or kendo-common.css:
.k-grid tbody .k-button, .k-ie8 .k-grid tbody button.k-button {
min-width: 64px;
}
Unfortunately I cannot find the way to UNSET or set min-width to 16px as I need.
Could you please help.
Kind regards
Genadij
Hi,
I cannot get Click event on button inside <script type="text/x-kendo-template"> .
My code:
<script type="text/x-kendo-template" id="template-sub">
<div id="details-container-sub" class="details-container">
<table id="datails-sub-table" class="datails-table">
<tr >
<th>Parameter</th>
<th>Value</th>
</tr>
<tr>
<td align="right">Connected By:</td>
<td>#= ConnectedBy #</td>
</tr>
<tr>
<td align="right">Connected On: </td>
<td>#= ConnectedOn #</td>
</tr>
</table>
<div>
<button id="btnClose" class="k-button close-button">Close</button>
</div>
</div>
</script>
@(Html.Kendo().Window().Name("Details")
.Visible(false)
.Modal(true)
.Draggable(true)
.Width(450)
)
<script>
function showDetails(e) {
e.preventDefault();
var wnd = $("#Details").data("kendoWindow");
var treeItem = $("#ddlSubs").data("kendoTreeList").dataItem($(e.currentTarget).closest("tr"));
switch (treeItem.Type) {
case "sub":
wnd.title("Subscription Details");
wnd.content(kendo.template($("#template-sub").html())(treeItem));
wnd.center().open();
break;
[.... more cases...]
}
}
$(document).ready(function () {
$('#Details').data("kendoWindow").bind('refresh', function (e) {
var wnd = $("#Details").data("kendoWindow");
$('#btnClose').click(function () {
wnd.close();
});
});
});
</script>
What is wrong?
Thank you in advance.
Anyone know of a way to get a textarea to be resizable and overlay a gird's row? Right now if I add a custom editor and let the user resize the textarea it stretches the whole row's height with it. Is there a way to have the textarea float just over top of the row instead? I don't want to use popup editing as I have already configured this for inline editing.
James


Pulling my hair out trying to get this to work. The JSON file is being generated, but the grid is empty
Here is the
public ActionResult Excel_Export() { return View(); } public ActionResult Excel_Export_Read([DataSourceRequest]DataSourceRequest request) { return Json(Read().ToDataSourceResult(request), JsonRequestBehavior.AllowGet); } [HttpPost] public ActionResult Excel_Export_Save(string contentType, string base64, string fileName) { var fileContents = Convert.FromBase64String(base64); return File(fileContents, contentType, fileName); }