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);
}
I have gotten several user complaints that it is hard to differentiate the weekday checkboxes.
Is there a way to space them out a bit?
I have tried (without success) to handle the edit event of the scheduler and bind to the change event of the recurrenceeditor dropdown to set the margin style.
function
onEdit(e) {
var
recurDropdown = e.container.find(
"[data-role=recurrenceeditor]"
);
// handle recurrence editor's change event
recurDropdown.unbind(
"change"
, spaceWeekDayChks);
recurDropdown.bind(
"change"
, spaceWeekDayChks);
}
function
spaceWeekDayChks() {
// space out recurrence editor week days
// - called from change event of recurrence editor dropdown
$(
'.k-recur-weekday-checkbox'
).css(
"margin-right"
,
"20px"
);
}
I am trying to do a simple Export to Excel but when I add the Export snippet to the grid I get the "Excel export is not supported in server binding mode." message.
I am actually pulling a list of Active Directory users from a custom Object. The Grid works perfect. All I want to do is because to export the list to an Excel Spreadsheet.
My Controller code, that returns my list
public ActionResult GisUsersTL()
{
var ADList = this.GetGisUsers("GISUsers");
ViewData["ADList"] = ADList; //Testing Telerik option to bind data
return View("GISUsersTL", ADList);
}
RAZOR page that bombs
@model IEnumerable<GISPortal.Models.ADGisUsers>
@using GISPortal.Controllers
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
@(Html.Kendo().Grid((IEnumerable<GISPortal.Models.ADGisUsers>)ViewData["ADList"])
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Username);
columns.Bound(p => p.DisplayName);
columns.Bound(p => p.Department);
columns.Bound(p => p.Office);
columns.Bound(p => p.JobTitle);
columns.Bound(p => p.MobilePhoneNumber);
columns.Bound(p => p.EmailAddress);
})
.Pageable() //Enable paging.
.ToolBar(tools => tools.Excel()) //This is the line that bombs so I can't even add any more custom export lines.
)
In my kendo grid i loading data
.Grid<Portals.Areas.Reports.Models.TransactionReportItem>() like this. But again i provided in DataSource
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Read(read => read.Action"GetTransactions","Transactions")))
My problem is when i provided some external filter, because of datasource its displaying all data instead of filter data.
my question is how we can apply external filter condition in data source or is it possible to stop calling datasource?
Below i giving entire code of grid
@(Html.Kendo()
.Grid<Portals.Areas.Reports.Models.TransactionReportItem>()
.Name("transactionGrid")
.HtmlAttributes(new { @class = "grid-primary" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Read(read => read.Action("GetTransactions", "Transactions")))
.Pageable(pageable => pageable
.Enabled(true)
.PageSizes(new[] { 100, 500 })
.Refresh(false)
.ButtonCount(5))
.Columns(columns =>
{
//Txn Status Column
columns.Bound(row => row.TransactionStatus)
.ClientTemplate(@"
#if(TransactionStatus == 'Void'){#
<span class='icon-status-box'>
<span class='icon icon-status-void'></span>
<span class='status-void'>#: TransactionStatus #</span>
</span>
#}else if(TransactionStatus == 'Declined'){#
<span class='icon-status-box'>
<span class='icon icon-status-declined'></span>
<span class='status-declined'>#: TransactionStatus #</span>
</span>
#}else if(TransactionStatus == 'Chargeback'){#
<span class='icon-status-box'>
<span class='icon icon-status-chargeback'></span>
<span class='status-chargeback'>#: TransactionStatus #</span>
</span>
#}else if(TransactionStatus == 'Authorized'){#
<span class='icon-status-box'>
<span class='icon icon-status-authorised'></span>
<span class='status-authorised'>#: TransactionStatus #</span>
</span>
#}else{#
<span class='icon-status-box'>
<span class='icon icon-status-default'></span>
<span class='status-default'>Pending</span>
</span>
#}#
");
//Txn ID Column
columns.Bound(row => row.TransactionID);
//Order ID Column
columns.Bound(row => row.OrderID);
//TxnAmount Column
columns.Bound(row => row.TransactionAmount).Format("{0:n2}").HeaderHtmlAttributes(new { @class = "text-align-reverse" }).HtmlAttributes(new { @class = "text-align-reverse" });
//Txn date column
columns.Bound(row => row.TransactionDate).Format("{0:" + userPreference.PreferredDateDisplayFormat + "}").HeaderHtmlAttributes(new { @class = "text-align-reverse" }).HtmlAttributes(new { @class = "text-align-reverse" });
//ViewDetail column
columns.Bound(row => row.TransactionID).Title("").Filterable(f => f.Enabled(false))
.ClientTemplate(@"
<button id='#= TransactionID #' data-btn-viewDetail='#= TransactionID #' class='btn btn-neutral btn-sm'>
View Detail
</button>
");
})
.Sortable()
.Filterable(ftb => ftb.Enabled(true))
.ToolBar(tools => tools.Pdf())
.ToolBar(tools => tools.Excel())
.Pdf(pdf => pdf
.AllPages()
.PaperSize("A4")
.Scale(0.8)
.RepeatHeaders()
.AvoidLinks()
.Landscape()
.Title("ABC Merchaant Transaction Report")
.TemplateId("page-template")
.Margin("2cm", "1cm", "1cm", "1cm")
.FileName(string.Format("ABC_Merchant_Transaction_Report_{0}.pdf", DateTime.UtcNow.ToString("yyyymmdd_hhmmss")))
.ForceProxy(true)
.ProxyURL(Url.Action("Pdf_Export_Save", "Transactions"))
)
.Excel(excel => excel
.AllPages(true)
.FileName(string.Format("ABC_Merchant_Transaction_Report_{0}.xlsx", DateTime.UtcNow.ToString("yyyymmdd_hhmmss")))
.ForceProxy(true)
.ProxyURL(Url.Action("Pdf_Export_Save", "Transactions"))
)
)