Questions on UI for ASP.NET Core Forum

1 answer

333 views

Row Template

I'm trying to define a grid where the first column is a checkbox and the 2nd has a large font bound to "name" with a small font below it showing the "description". I'd appreciate a working example.

This is NOT working:

<script id="rowTemplate" type="text/x-kendo-tmpl">

<tr data-uid="#: uid #">

<td class="checkbox">

<input type="checkbox" name="optCheck" />

</td>

<td class="details">

<span class="name">#: Name #</span>

<span class="desc">#: Description #</span>

</td>

</tr>

</script>

@(Html.Kendo().Grid<SessionOptionTemplate>()

.Name("template-grid")

.ClientRowTemplate("rowTemplate")

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("IndexJson", "SessionOptionTemplates")

.Data("getData"))

))

Style

<style>

.checkbox {

width: 75px;

}

.details {

width: 400px;

}

.name {

display: block;

font-size: 1.6em;

}

.desc {

display: block;

padding-top: 1.6em;

font-size: small

}

</style>

Grid

answered on 23 Oct 2020

6 answers

1.0K+ views

Error Handling

I'm failing somewhere in my load of a TreeList. I added a simple error handler like this:

<script id="icon-template" type="text/x-kendo-template">

<div class='group-photo'

style='background-image: url(@Url.Content("~/images/32/neighbourhood.png"));'></div>

<div class='group-name'>#: Name #</div>

</script>

<div class="demo-section k-content">

<h4>Customer Groups</h4>

@(Html.Kendo().TreeList<GsiPortal.Models.Group>()

.Name("treelist")

.Columns(columns =>

{

columns.Add().Field(e => e.Name).Width(220).TemplateId("icon-template");

columns.Add().Field(e => e.Description);

columns.Add().Field(e => e.AddTimestamp).Width(220).Title("Timestamp").Format("{0:MMMM d, yyyy}");

columns.Add().Command(c => { c.CreateChild().Text("Add"); }).HtmlAttributes(new {style = "text-align: center;"});

columns.Add().Command(c => { c.Edit(); }).HtmlAttributes(new { style = "text-align: center;" });

columns.Add().Command(c => { c.Destroy(); }).HtmlAttributes(new { style = "text-align: center;" });

})

.Editable(e => e.Mode(TreeListEditMode.PopUp).TemplateName("GroupEdit"))

.Selectable(selectable => selectable.Mode(TreeListSelectionMode.Single))

.DataSource(dataSource => dataSource

.ServerOperation(false)

.Create(create => create.Action("CreateJson", "Groups"))

.Read(read => read.Action("AllJson", "Groups")

.Data("groupsRead"))

.Update(update => update.Action("UpdateJson", "Groups"))

.Destroy(delete => delete.Action("DestroyJson", "Groups"))

.Model(m =>

{

m.Id(f => f.Id);

m.ParentId(f => f.ParentId);

m.Expanded(true);

m.Field(f => f.Name);

m.Field(f => f.Description);

m.Field(f => f.AddTimestamp).Editable(false);

})

.Events(x => x.Error("onError"))

))

<script>

var groupId = Number(@(ViewBag.GroupId));

function groupsRead() {

return { id: groupId };

}

function onError(e) {

alert(e.toString());

}

</script>

However, this doesn't give me any clue as to what object type is there to pull the message from. What is the recommended way of doing Error Handling with this control that will give me some actionable information?

Thanks, Joel

TreeList

answered on 23 Oct 2020

1 answer

171 views

Grid PDFExport Column Width

I've implemented PDF export functionality with a Grid. I'm trying to set the column width (auto) for one of columns of the report that gets generated because the some values in the column of the report are being truncated, or not seen in the PDF. I've tried

/* doesn't work */

.k-pdf-export colgroup > col {
width: auto !important;
}

/* doesn't work */

.k-pdf-export colgroup > col:nth-child(2) {
word-wrap: break-word;
}

/* makes the column as large as the report, completely useless */

.k-pdf-export colgroup > col:nth-child(2) {
width: 100% !important;
}

/* this works! But I don't want to hard code in a value */

.k-pdf-export colgroup > col:nth-child(2) {
width: 200px !important;

}

Grid

answered on 22 Oct 2020

11 answers

458 views

Custom Column Filters with TagHelpers

How can I implement a custom column filter with tag helpers for a numeric column? With the regular razor syntax grid, columns bound to numeric data automatically give you options like "is greater than" or "is less than". This is not happening with the tag helper syntax so how would I go about creating a custom column filter to show greater than or less than?

Grid

answered on 21 Oct 2020

1 answer

654 views

Grid header format

Attached is the same grid header displays on Chrome and Edge browser.

Is there a way to force the header not to display C... in Chrome?

var RHCenterOverFlow = "text-align:center; font-size:10px; font-weight:bold; padding:0.5px; overflow:visible; white-space:normal";

columns
.Bound(c => c.Class)
.Title("Class")
.HeaderHtmlAttributes(new { style = RHCenterOverFlow })
.Width(40)
.MinResizableWidth(40);

Thanks.

Grid

answered on 21 Oct 2020

3 answers

213 views

Dynamic Grid - How to center selected columns

I am populating a grid with dynamic data. I would like to center all but the left column horizontally. The left column should be left-aligned. I've looked at some examples and have not been able to get it to work. My code follows the pattern below. Where/how can I center align all columns that are not the one with the name "LeftMostColumn?" I've mocked up a couple of places where I think this might happen. Please advise. Thanks!

@(Html.Kendo().Grid<dynamic>()

.Name("Grid")

.Columns(columns =>

{

foreach (System.Data.DataColumn column in Model.MyDataData.Columns)

{

var c = columns.Bound(column.ColumnName);

if (column.ColumnName != "LeftMostColumn")

{

// center the contents of the column

}

})

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

foreach (System.Data.DataColumn column in Model.MyDataData.Columns)

{

var field = model.Field(column.ColumnName, column.DataType);

if (column.ColumnName != "LeftMostColumn")

{

// center the contents of the field?

}

}).Read(read => read.Url(Url.Page("./MyData", new { handler = "GetData_Read" })).Data("forgeryToken"))

)

Grid

answered on 21 Oct 2020

1 answer

123 views

Filter for dropdown results

Hello,

I have a kendo grid that uses two foreign keys. The drop-down created has the first parameter, which is for example 1 and 2. For one and two they each have the same four choices in the second parameter drop-down. When the drop down is open you can see the four choices twice for each parameter though they are the same. Is there a way to when is selected in the first drop down to only show the options for that parameter and not the options for the other as well?

General Discussions

answered on 21 Oct 2020

5 answers

2.9K+ views

Import Excel File In to Kendo Grid

Hello Telerik Team

Is there any way to upload an excel file by using angular 2 ?

actually I looking for way that when i uploaded my excel file , the excel data display in to Kendo Grid

thanks in advance

Grid

answered on 21 Oct 2020

4 answers

144 views

RemoteDataBinding with unknown number of lines

I'm trying to write a graph where the user can configure what data she wants to see.

I implemented a first version based on the remote data binding demo that uses a model describing all data point of the given "column":

Html.KendoEscapeTemplate(Html.Kendo().Chart<Peppermint.ApplicationCore.ViewModel.FiscalYearSerieDataPointVM>() ...

With the VM being:

public class FiscalYearSerieDataPointVM

{

public int MonthNumber { get; set; }

public decimal CurrentFiscalYearDataPoint { get; set; }

public decimal? PreviousFiscalYearDataPoint { get; set; }

}

That, obviously, will not work when the char is configured by the user and could have any number of different lines. It's also not very practical to generate data in a "vertical" format because I have to run all queries first and then pivot the result into a collection of FiscalYearSerieDataPointVM

How am I supposed to work around that problem? Am I supposed to use a dynamic object instead of a ViewModel?

Chart

answered on 20 Oct 2020

1 answer

212 views

Loop through swiches in grid

I'm having trouble accessing switches in a grid column. I want to loop through them and toggle them on after clicking a toolbar button.

The click event is working. But getting 'undefined' on 'switchInstance ':

Column with switches code:

.Columns(columns =>
{

columns.Bound(p => p.Exempt).Width(100).Filterable(ftb => ftb.Multi(true)).Sortable(false).ClientTemplate(
"<input class='exemptSwitch' id='exemptSwitch' \\#if (Exempt) { \\# checked='checked' \\# } \\# type='checkbox' />");

})

Toolbar button code:

.ToolBar(toolBar =>
{
toolBar.Custom()
.Name("EnableAllFiltered")
.Text("Enable All Filtered")
.IconClass("k-icon k-i-play")
;
})

Click event code:

$(function () {
$(".k-grid-ExemptAllFiltered", "#SubscriberGrid").on("click", function (e) { <--- click of custom grid header toolbar button

$("#SubscriberGrid .exemptSwitch").each(function () {
var switchInstance = $(this).data("kendoSwitch");
switchInstance.enable(true);
});

});

Any assistance would be greatly appreciated!

Jon

Switch