Can someone please help me figure this out. I have a Drop Down List in ASP.NET Razor code
#Html.DropDownListFor(model => model.Height, heightlist, new { style = "font-size:120%;" })
My Drop Down List is too big when you click on the list. I would like it to be like the one on the right hand side:
I tried various methods, including the code below, but the issue exists:
#Html.DropDownListFor(model => model.Height, heightlist, new { height="50", style = "font-size:120%; height:30px;" })
Related
I am trying to implement a simple ckeditor conversion to wrap my image into an tag.
editor.conversion.for('downcast').add(dispatcher => {
dispatcher.on('insert:imageBlock', (evt, data, conversionApi) => {
const viewImage = viewWriter.createAttributeElement('img');
const insertPosition = conversionApi.mapper.toViewPosition(data.range.start);
conversionApi.mapper.bindElements(data.item, viewImage);
viewWriter.insert(insertPosition, viewImage);
evt.stop();
});
});
The base "insert:imageBlock" creates a element with an inside, the code above removes the figure and only binds the imageBlock model to my newly created tag and it works fine.
But I cannot find a solution to wrap that newly created tag into an tag with my desirable href.
Does anyone know a simple solution to this?
Thanks!
I have a grid that shows a list of financial arrears grouped by the type of debt, known as Cash Type. These Cash Types can be categorised in a number of ways, or not, which is "Normal". When they are categorised I'm adding a lovely badge in the ClientGroupHeaderTemplate so it stands out to the user. All good so far.
#(Html.Kendo().Grid(Model.Arrears)
.Name("arrearsGrid-" + Model.LeaseId.ToString())
.HtmlAttributes(new { #class = "smallergrid" })
.Columns(columns =>
{
columns.Bound(p => p.InvoiceNumber)
.ClientTemplate("<a class=\"text-primary\" href=\"" + Url.Action("Invoice", "Arrear") + $"/#=InvoiceNumber#?buildingid=#=BuildingId#&leaseid={Model.LeaseId}\" target=\"_blank\">#=InvoiceNumber#</a>");
columns.Bound(p => p.InvoiceDescription);
columns.Bound(p => p.CashType)
.ClientGroupHeaderTemplate("Cash Type: #= getCashTypeName(data.value) # (#= getDebtCategoryName(data.items[0].DebtCategory) #)");
columns.Bound(p => p.InvoiceDate);
columns.Bound(p => p.TransactionDate);
columns.Bound(p => p.DaysOverdue);
columns.Bound(p => p.InvoiceGross)
.HtmlAttributes(new { #class = "text-right" });
columns.Bound(p => p.OutstandingGross)
.HtmlAttributes(new { #class = "text-right" });
})
.Sortable()
.Excel(excel => excel
.FileName("Kendo UI Grid Export.xlsx")
.Filterable(true)
.AllPages(true)
)
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Group(g => g.Add(p => p.CashType))
)
.NoRecords(x => x.Template("<div class='empty-grid'></div>"))
)
The problem is the Export to Excel function does no processing on the ClientGroupHeaderTemplate, and shows<span>Cash Type: Rent <span class="d-print-none badge debt-category-1 ml-2">In Query</span></span> in the spreadsheet.
Here's the options I see are available, and some I've discounted. Are these really the best options I have?
CSS (rejected)
As you can see, using the Bootstrap d-print-none does nothing. From all the posts on Export and hidding columns, it seems that Kendo is in no way using a print view of the page, so #media options aren't going to help.
excelExport event
Use the Kendo excelExport event to customise the generated Excel workbook, however, this example is document creation. If I'm going this route I suspect it might be easier to write one from scratch, rather than workaround Kendo limitations. Either way it's a lot of work to remove 1 line of HTML markup.
Use the ProxyURL
Under a Grids Excel object, you can set an endpoint to call when the Excel spreadsheet is created. This might give the chance to tweak a ready-to-save spreadsheet before it is saved. There's a demo of it here. The demo is wrong (the Controller name is not Grid, it's Excel_Export) and it doesn't work for me even when corrected and the standard .ToolBar(tools => tools.Excel()) back in. Maybe it's because I'm not AJAXing my data in, or maybe it's just as broken as the demo. Changing my grid to AJAX will is not beyond the realms of possibility, but it's not a small job either.
Edit: I got this to hit the event by also adding .ForceProxy(true) to the Excel definition. This isn't mentioned in the demo, and the statement that you need to add .ToolBar(tools => tools.Excel()) is also incorrect; you can fire the event from your own buttons that trigger the Excel export.
Give up and go simple
The last option I have is to give up on the badges and just have text. It's the quickest and surest option, but it's solving the problem by ignoring the problem.
So I managed this in yet another way. I'm sure there must be an MVC answer to this problem though.
I added an event to my Grid
#(Html.Kendo().Grid(Model)
...
.Events(e =>
{
e.ExcelExport("exportExcel");
}
...
)
and created a JavaScript middleware function to alter the Excel file before it is saved. Of course you can then do whatever JS allows you to do at this point.
In the code below are examples of setting a column width (4), removing HTML span markup, and converting a string to a number and adding a currency format to that number (7). The method of obtaining the currency symbol is not pretty, but it's a string inside some HTML markup, I don't think it can be pretty.
function exportExcel(e) {
var sheet = e.workbook.sheets[0];
var lastRow = sheet.rows[sheet.rows.length - 1];
var lastCell = lastRow.cells[lastRow.cells.length - 1];
var lastCellValue = lastCell.value.toString().replace(/<[^>]*>/, "").replace("</span>", "");
var currency = lastCellValue.substring(0, 1);
currency += "#,###,##0.00";
sheet.columns[4].autoWidth = false;
sheet.columns[4].width = 125;
$.each(sheet.rows, function (index, row) {
if (index > 0) {
if (row.cells[0] != undefined) {
if (row.cells[0].value != undefined) {
row.cells[0].value = row.cells[0].value.replace(/<[^>]*>/, "(").replace("</span>", ")");
}
}
if (row.cells[7] != undefined) {
if (row.cells[7].value != undefined) {
row.cells[7].value = row.cells[7].value.toString().replace(/<[^>]*>/, "").replace("</span>", "");
row.cells[7].value = Number(row.cells[7].value.toString().replace(/[^0-9\.-]+/g, ""));
row.cells[7].format = currency; // Why this prepends a backslash to the format I do not know
}
}
}
});
};
I have a collection for image uploading represented in following code:
Images = new FS.Collection('images', {
stores:[new FS.Store.FileSystem('images', {path:"~/projectUploads"})]
});
I would like to have a custom 'like' button to make images I upload likeable. So how do I do that? I tried to make it with socialize:likeable package, but it doesn't seem to work for FS.collection, or may be I'm doing it wrong, I just put LikeableModel right before FS.Collection like this:
Images = new LikeableModel.FS.Collection('images', {
stores:[new FS.Store.Filesystem('images', {path:"~/projectUploads"})]
});
I have an MVC 4 application with a Kendo UI grid that I am using for user management. I display the users information in the grid and have a custom command button that when clicked opens a new page to edit the users information. For various reasons (one being there is too much information to be edited to display in the grid) I need to edit the users on a new page and not with inline or popup or incell editing. My grid looks like this... very simple
#(Html.Kendo().Grid<WebSiteNew.Models.ManageUsersViewModel>()
.Name("grid")
.HtmlAttributes(new { style = "margin-top: 5px" })
.Columns(c =>
{
c.Bound(model => model.UserName);
c.Bound(model => model.FirstName);
c.Bound(model => model.LastName);
c.Bound(model => model.Email);
c.Bound(model => model.Phone);
c.Bound(model => model.Extension);
c.Bound(model => model.JobTitle);
c.Command(com => { com.Custom("Edit").Click("edit"); com.Destroy(); });
})
.Pageable()
.Sortable()
.Selectable()
.DataSource(d => d
.Ajax()
.PageSize(20)
.Model(m => m.Id(i => i.UserName))
.Read(r => r.Action("ManageUsers_Read", "ManageUsers"))
.Destroy(o => o.Action("ManageUsers_Destroy", "ManageUsers"))
))
The issue I have here is that I need to pass the ID of the user that the edit button has been clicked on to the edit screen so that I can bring up the information for the selected user. The only way I know of to get this information is through javascript, something like this in my command button click function...
function edit() {
var grid = $("#grid").data("kendoGrid");
var row = grid.select();
var dataItem = grid.dataItem(row);
var id = dataItem.UserId;
location = "#Url.Action("EditUser")";
}
This gives me the id that I need but I have no way (that I know of) to pass this back to my controller. So my question is... how do I get this information back to the server side? Is there another way to get the information I need or is this just something that is not possible in Kendo UI MVC?
To make this a more general question.. when I look at the Kendo UI documentation and it tells me how to get a value in javascript... how, in general, does one go about using this value in an MVC application when it is needed on the server side? I can't seem to find an alternative "MVC" way to do this in their documentation.
You should form additional parameters to url string:
location = "#Url.Action("EditUser")" + "?id="+id;
I'm trying to set up a Master/Detail grid using the Grid control from Telerik's Extensions for ASP.NET MVC. My problem is setting up the server template.
The demo I'm following is the first one on this page, except I'm using Razor View Engine.
I have the grid displaying fine. The problem is that I cannot write any sort of a server template that doesn't throw a compiler error - aside from leaving it blank!
#(Html.Telerik().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.Date).Format("{0:MM/dd/yyyy}").Width(100);
columns.Bound(o => o.Title).Template(#<text> #item.Title</text>).Sortable(false);
columns.Bound(o => o.Publication).Width(120).Sortable(false);
})
.DetailView(detailView => detailView.Template(e =>
{
//Anything other than this comment will throw a compiler error
}))
.RowAction(row =>
{
// Expand initially the detail view of the first row
if (row.Index == 0)
{
row.DetailRow.Expanded = true;
}
})
.Sortable()
.Scrollable(scrolling => scrolling.Height(494)).Footer(false)
.ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
)
See that comment "anything other than this comment..."? When I replace that with something like #<text> hello</text>, I get a compilation error:
CS1002: ; expected
That doesn't seem to make sense, but I humour myself and put a semicolon in like such #<text> hello</text>;. That gives me this error:
CS0201: Only assignment, call, increment, decrement, and new object expressions can be used as a statement
When I replace that with a portion of the template I really want, namely #<text><b>Slug</b>: #item.Slug</text>, I get the same errors; CS1002 with no semicolon, and CS0201 with a semicolon.
What am I missing here?
There are two ways you can approach this. If you just want to display some simple text and not really integrate any other components it would be the easiest to modify the code you have above to just do this:
.DetailView(detailView => detailView.Template(#<text>test</text>))
As you can see I removed the whole e => { ... } part and just put in #<text></text>.
However, if you want to look into getting more components in your detail view I think it would be better to look at the demo found here. Although the description mentions some WebForms code you don't need to worry, the rest is all in Razor :) It also explains things you have to keep in mind. One of the most important ones is that any components within the DetailTemplate will have to use { ... } as opposed to ( ... ) this is because you want to specifically call .Render(); (using the ( ... ) implicitly calls .Render but at the wrong point for these scenarios) at the end of those components' declaration to make sure they are all rendered correctly.