Questions on UI for ASP.NET MVC Forum

2 answers

254 views

I have a FlatColorPicker nested inside of a Kendo PanelBar that is not behaving. It is typically NOT visible when the page renders because it is inside a collapsed panel of the PanelBar. At this point it is acceptable except that the slider on the bottom only fills half of the full width of the picker, but it does work. After my "Save" js function for the page runs, the slider disappears leaving on the round slider handle.

@(Html.Kendo().FlatColorPicker()

.Name("screen_background_color_select")

.HtmlAttributes(new { style = "width: 245px" })

.Value(Model.screen_background_color)

.Events(ev => ev.Change("paletteChange"))

.Preview(true)

.Opacity(true)

)

I DO have some bootstrap styling inside the Panel but I have gone so far as to remove the FlatColorPicker from the PanelBar and bootstrap to no avail. Still behaves the same. I have verified that the Value string for the color is correct.

If I make the simple change to a ColorPicker, it works as it should. I change nothing from the above code except removing the "Flat".

ColorPicker

answered on 26 Sep 2017

8 answers

2.2K+ views

Show column and customize excel before export

I want to show/hide some columns on Kendo Grid and customize export to the excel.

Export conditions:

use grid filter selection
use grid seletected items
show/hide columns programaticaly

Is it possible to combine?

Is posible to export programaticaly only 5000 rows?

For export I use:

var exportFlag = false;

$("#grid").data("kendoGrid").bind("excelExport", function (e) {

if (!exportFlag) {

e.sender.showColumn(0);

e.preventDefault();

exportFlag = true;

setTimeout(function () {

e.sender.saveAsExcel();

});

} else {

e.sender.hideColumn(0);

exportFlag = false;

}

});

Customize excel code:

var sheet = e.workbook.sheets[0];

for (var rowIndex = 0; rowIndex < sheet.rows.length; rowIndex++) {

var row = sheet.rows[rowIndex];

if (rowIndex == 0) {

for (var cellIndex = 0; cellIndex < row.cells.length; cellIndex++) {

row.cells[cellIndex].background = "#0070C0";

row.cells[cellIndex].color = "#FFFFFF";

row.cells[cellIndex].bold = true;

}

if (rowIndex > 0 && rowIndex % 2 == 0) {

for (var cellIndex = 0; cellIndex < row.cells.length; cellIndex++) {

row.cells[cellIndex].background = "#DCE6F1";

}

Grid

answered on 26 Sep 2017

1 answer

497 views

General Search in hierarchical grid.

Hi Team,

Two things iam facing problem , when i have use hierarchical kendo grid.

1. How do i search grid data when i have hierarchical kendo grid. (search option in toolbox)

2. How do i place checkbox in innermost child grid ? ex : in my case it will be grid containing ReleaseID as attached in diagram.

Help in this will be highly helpful.

Attached is the screenshot.

Please suggest.

Grid

answered on 25 Sep 2017

1 answer

424 views

Data wont show (Client Detail Template)

hello everyone , im just start learning with mvc 2 weeks ago, and decide to using telerik, and now i have some problem while using client detail template , after im running the code the data wont show up. please help. ( see my attachment ) , and i've attach my model if necessary

my controller :

namespace TelerikMvcApp2.ControllersTelerik

{

public class TelerikHeaderController : Controller

{

public ActionResult Index()

{

return View();

}

public ActionResult Lines_Read([DataSourceRequest]DataSourceRequest request)

{

using (var saleorder = new SaleorderEntities1())

{

IQueryable<Line> lines = saleorder.Lines;

DataSourceResult result = lines.ToDataSourceResult(request, line => new

{

line.LineID,

line.ProductID,

line.Quantity,

line.Unit,

line.TotalPrice

});

return Json(result);

}

public ActionResult Headers_Read([DataSourceRequest]DataSourceRequest request, int lineId)

{

using (var saleorder = new SaleorderEntities1())

{

IQueryable<Header> headers = saleorder.Headers.Where(header => header.LineID == lineId);

DataSourceResult result = headers.ToDataSourceResult(request, header => new

{

header.HeaderID,

header.CustomerID,

header.TotalAmount,

header.LineID

});

return Json(result);

}

View :

@(Html.Kendo().Grid<TelerikMvcApp2.Models.Header>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(header => header.LineID);

columns.Bound(header => header.HeaderID);

columns.Bound(header => header.CustomerID);

columns.Bound(header => header.TotalAmount);

})

.DataSource(dataSource =>

dataSource.Ajax().Read(read => read.Action("Headers_Read", "TelerikHeader"))

)

.ClientDetailTemplateId("client-template")

)

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

@(Html.Kendo().Grid<TelerikMvcApp2.Models.Line>()

.Name("grid_#=LineID#")

.Columns(columns =>

{

columns.Bound(line => line.ProductID);

columns.Bound(line => line.Quantity);

columns.Bound(line => line.Unit);

columns.Bound(line => line.TotalPrice);

})

.DataSource(dataSource =>

dataSource.Ajax().Read(read => read.Action("Lines_Read","TelerikHeader", new {linesId ="#=LinesID#"}))

)

.Pageable()

.ToClientTemplate()

)

</script>

Grid

answered on 25 Sep 2017

3 answers

511 views

Searching by multiple DataTextField variables

When using .DataTextField() you are only able to search by one variable. Is there a way to search by multiple?

For instance, using .DataTextField("CorpName") returns a list of items that start with the Corp name and .DataTextField("AccountNumber") returns a list of items that start with Account Number... I would like to return the search by both CorpName and AccountNumber.

I am able to achieve this with autoComplete because each time it does a search, it is querying the database through a webservice and is therefore searching by both fields... but since this is a combobox, it only queries the database once and therefore I need to use .DataTextField() to search the returned list.

ComboBox

answered on 25 Sep 2017

3 answers

219 views

No data display on inline editing grid

I want to use inline server editing grid. But the grid does not load any data. Can't figure out what is missing.

Here is the code:

Index.cshtml page

@using Kendo.Mvc.UI

@using (Html.BeginForm("AddUser", "Contact"))
{
      @Html.AntiForgeryToken()
     <fieldset>
           <legend>Add User</legend>
           Please enter minimum 3 letters to search.
              <div>
@(Html.Kendo().ComboBox()
.Name("NewUser")
.DataTextField("DisplayName")
.DataValueField("Snumber")
.Filter(FilterType.StartsWith)
.MinLength(3)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Search", "Contact");
}).ServerFiltering(true);
})
)
<input type="submit" name="AddUser" value="AddUser" />
<div class="AddUserError">@TempData["AddUserError"]</div>
</div>
</fieldset>
}

@{
Html.Kendo().Grid<CCC.ITSChangeControl.Models.ViewModels.GridContactViewModel>().Name("grid").Columns(columns =>
{
columns.Bound(contact => contact.FullName);
columns.Bound(contact => contact.Admin);
columns.Bound(contact => contact.Approver);
columns.Bound(contact => contact.Active);
columns.Bound(contact => contact.Id).Visible(false);
columns.Bound(contact => contact.Snumber).Visible(false);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(250);
})
}

Grid

answered on 25 Sep 2017

2 answers

1.4K+ views

AutoComplete Additional Data function parameters

Hello,

Hello, I have to pass a string parameter (in particular the field name) to the function of the additional parameters. One such thing, see autocompleteAdditionalData:

@(Html.Kendo().AutoComplete()
.Name("L1CFOR")
.HtmlAttributes(new { @class = "form-control mb-2 mr-sm-2 mb-sm-0", placeholder = "L1CFOR", style = "max-width: 120px;" })
.MinLength(3)
.DataTextField("WKCELE")
.Filter("contains")
.Template("<span>${data.WKXTAB} ${data.WKCELE} ${data.WKDESE}</span>")
.AutoWidth(true)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("AutoComplete", "Zoom")
.Data("autocompleteAdditionalData('L1CFOR')");
})
.ServerFiltering(true);
})
.Events(e =>
{
e.Select("autocompleteSelect");
})
)

How can I do. thank you.

Best regards.

M

AutoComplete

answered on 25 Sep 2017

4 answers

632 views

MVC Grid hierarchy - add link to javascript function on child grid column

I'm trying to add a onClick JS function to a certain column in the child grid, but so far with no luck.

This is my column:

columns.Bound(o => o.oper_numero).Width(110).ClientTemplate("<a onclick=\"showDetails('#=oper_numero#')\" href='\\#'>#=oper_numero#</a>");

I achieved the desired functionality with both a non hiearchy grid and the parent grid.

I've read that I have to escape the the # symbol in the child grid, but I've tried every combination and still doesn't work. This for example doesn't work:

columns.Bound(o => o.oper_numero).Width(110).ClientTemplate("<a onclick=\"showDetails('#=oper_numero#')\" href='\\#'>\\#'=oper_numero\\#'</a>");
columns.Bound(o => o.oper_numero).Width(110).ClientTemplate("<a onclick=\"showDetails('\\#'=oper_numero\\#'')\" href='\\#'>#=oper_numero#</a>");
columns.Bound(o => o.oper_numero).Width(110).ClientTemplate("<a onclick=\"showDetails('\\#'=oper_numero\\#'')\" href='\\#'>\\#=oper_numero\\#</a>");

I'd like to know what I'm doing wrong.

Thanks a lot

Grid