Questions on UI for ASP.NET Core Forum

1 answer

446 views

Opening Bootstrap modal from ActionLink in Grid

Hello,
We start using the Grid (UI fro ASP.NET Core).
Is it possible to open a Bootstrap modal from a hyperlink or button in a Grid row?
Greetings,
Pieter

Grid

answered on 18 Apr 2017

1 answer

137 views

DropDownList with Custom DS Server Filtering

I found that ServerFiltering is not working out of the box if you set Custo() in datasorce

Like in this example

http://demos.telerik.com/aspnet-mvc/autocomplete/grouping

This is about AutoComplete control. And text send to server via onAdditionalData Function

How I need to do same for DropDownList.

my solution to access filter text input is

    function onAdditionalData() {
        return {
            text: $("#Course").data("kendoDropDownList").filterInput[0].value
        };
    }

Looks a bit awkward for me

Can team please explain what if better way here

DropDownList

answered on 17 Apr 2017

0 answers

43 views

Problems to get control inside EditItemTemplate

I have a RadGrid with 5 columns and 3 of them have an ItemTemplate and EditItemTemplate, both having a control inside (Label and CheckBox, Label and RadDatePicker, Label and RadCombobox).

I have an issue when i click on the ckeckbox, i need to disable the RadDatePicker which is in another column but i cant find it.

I tried to use FindControl to search for the control that i need but always gets me the first founded and if the row that i have selected is not the first one, the control is not the one that i want.

var control = RadGrid1.FindControl(RadGrid1.MasterTableView.ClientID + "_Column3");

I tried also, browsing on the list of items that have my RadGrid and when i search for the control that i want, returns a null.
                foreach (GridDataItem item in RadGrid1.Items)
                {
                    var ctl = item.FindControl(RadGrid1.MasterTableView.ClientID + "_Column3");
                    if (ctl == null) continue;
                }

I dont know what am i doing wrong or if i am missing something but i hope that you could help me.

Grid

asked on 12 Apr 2017

3 answers

99 views

Open DetailTable via code

Instead of the built in arrow to open a details table view for a row (like in attachment 1)

We want to do it with a button but not in the same location we will have an extra column for the button (somewhat like attachment 2). We are trying to match an existing UI.

The Master/Details grid is bound via code and that is all working properly.

How or what event should I use?

Grid

answered on 12 Apr 2017

1 answer

202 views

AutoGenerate columns

Hello,

If I use the following grid with columns.AutoGenerated(true) then no column headers are shown (why?) if there are no records available!

As a result the "No records" info is on top and there is a gap between navigation/paging bar and the grid bottom (see attached picture)

robert

Grid

answered on 07 Apr 2017

1 answer

502 views

Radgrid display confirmation message

Hi,

I want to display a message when i click on a row in radgrid.

With the code, i have, i can display the message. Now, if the user clicks on OK, I want to perform one method and if he cancels, i want to perform another method.

How do i know what the user clicked on?

<telerik:RadGrid runat="server" ID="rg_OnlineDownloads" AutoGenerateColumns="false"

OnNeedDataSource="rg_OnlineDownloads_NeedDataSource"

onitemcommand="rg_OnlineDownloads_ItemCommand" >

<MasterTableView DataKeyNames="HouseholdID">

<Columns>

<telerik:GridBoundColumn DataField="ApplicationDate" HeaderText="ApplicationDate">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="HouseholdID" HeaderText="HouseholdID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ClientName" HeaderText="ClientName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="FamilyMembers" HeaderText="#nbrs">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ClientAddress" HeaderText="ClientAddress">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CellPhone" HeaderText="CellPhone">

</telerik:GridBoundColumn>

<telerik:GridButtonColumn UniqueName="Transfer" CommandName="Transfer" ConfirmText="" ConfirmDialogType="RadWindow"

ConfirmTitle="Transfer to Intake" ButtonType="PushButton" > </telerik:GridButtonColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

Code Behind:

protected void rg_OnlineDownloads_ItemCommand(object sender, GridCommandEventArgs e)

{

if (e.CommandName == "Transfer")// CommandName of LinkButton

{

GridDataItem dataItem = e.Item as GridDataItem;

string hHoldID = dataItem["HouseholdID"].Text;

string clntNm = dataItem["ClientName"].Text;

(rg_OnlineDownloads.MasterTableView.GetColumn("Transfer") as GridButtonColumn).ConfirmText =

"Do you want to transfer " + clntNm + " ? ";

}

Thanks in Advance

Grid

answered on 04 Apr 2017

3 answers

571 views

grid error cancelChanges not working

Hi,

I have a problem removing a newly added row or clearing updated values during update when calling Ajax Create or Update methods. I've tried e.sender.cancelChanges(); and also the code below with no luck. The error alert shows on the screen but the row sticks in the grid after hitting OK on the error window prompt. Is there a reason why the cancel changes is not updating the Json dataset after the error?

Error JS:

<script type="text/javascript">

function error_handler(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

//Display the message

alert(message);

// Cancel the changes.

var grid = $("#meterGrid").data("kendoGrid");

grid.cancelChanges();

}

</script>

My grid:

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

.Name("meterGrid")

.Columns(columns =>

{

columns.Command(command => { command.Edit(); }).Width(60).Visible(Model.IsEditable);

columns.Bound(o => o.MeterSerialId);

columns.Bound(o => o.VendorAccountId).Visible(false);

columns.Bound(o => o.MeterSerialName).Width(300);

columns.ForeignKey(o => o.CommodityId, (System.Collections.IEnumerable)ViewData["CommodityTypes"], "CommodityTypeId", "Name").EditorTemplateName("GridForeignKeyEditor").Title("Commodity").Width(250);

columns.Bound(o => o.IsActive).ClientTemplate("<input type='checkbox' disabled='disabled' #= IsActive ? checked='checked': checked='' # />");

columns.Bound(o => o.CreatedOn).Width(180).Format("{0:MM/dd/yyyy hh:mm tt}");

})

.ToolBar(toolbar =>

{

if (Model.IsEditable)

{

toolbar.Create();

}

})

.Pageable()

.Sortable()

.Editable(editable => editable.Mode(GridEditMode.InLine).Enabled(Model.IsEditable))

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.PageSize(10)

.Events(events => { events.Error("error_handler"); })

.Model(model =>

{

model.Id(o => o.MeterSerialId);

model.Field(o => o.MeterSerialId).Editable(false);

model.Field(o => o.VendorAccountId).DefaultValue(Model.VendorAccountId).Editable(false);

model.Field(o => o.IsActive).DefaultValue(true);

model.Field(o => o.CreatedBy).Editable(false);

model.Field(o => o.CreatedOn).Editable(false);

})

.Sort(s => { s.Add("CommodityTypeName").Ascending(); })

.Read(r => r.Action("GetMeterSerials", "VendorAccounts", new { vendorAccountId = Model.VendorAccountId }))

.Create(c => c.Action("CreateMeterSerial", "VendorAccounts", new { vendorAccountId = Model.VendorAccountId }))

.Update(u => u.Action("UpdateMeterSerial", "VendorAccounts")))

)

Controller to exception testing error prompt:

catch (Exception ex)

{

ModelState.AddModelError(string.Empty, ex.ToString());

return Json(new[] { model }.ToDataSourceResult(request, ModelState));

}

Grid

answered on 31 Mar 2017

1 answer

2.5K+ views

Binding to foreach variable using kendo grid

Hello,

I'm having problems creating multiple grids split by a column value, when the view is rendered I can see the the json in the script tags but nothing is rendered. Teh following works as repeating tables without using a kendo grid,

MODEL:

public class tblProducts

{

//SQL table is named tblProducts

[Key]

public int ID { get; set; }

public DateTime Date { get; set; }

public string Field1 { get; set; }

public string Field2 { get; set; }

public string Product { get; set; } //<<Want separate tables split by this field

}

public class IndexViewModel

{

public List<tblProducts> Products { get; set; }

public List<string> Titles { get; set; }

Public IndexViewModel()

{

Products = new List<tblProducts>();

Titles = new List<string>();

}

CONTROLLER:

public class tblProductsController : Controller

{

public async Task<IActionResult> Index()

{

var allProducts = await _context.tblProducts.ToListAsync();

var titles = allProducts.Select(x => x.Product).Distinct();

var model = new Models.IndexViewModel()

{

Products = allProducts,

titles = titles

};

return View(model);

}

VIEW:

@model ProjectMVC.Models.IndexViewModel

@{

ViewData["Title"] = "Index";

}

<h2>Index</h2>

<p>

<a asp-action="Create">Create New</a>

</p>

@{

foreach (var title in Model.Titles)

var products = Model.Products.Where(x => x.Product == title);

tblProducts product = Model.Products.First(x => x.Prodcut == title);

<text>

<table class="table">

<thead>

<tr>

<th>

@Html.DisplayNameFor(model => product.Date)

</th>

<th>

@Html.DisplayNameFor(model => product.Field1)

</th>

<th>

@Html.DisplayNameFor(model => product.Field2)

</th>

<th>

@Html.DisplayNameFor(model => product.Product)

</th>

<th></th>

</tr>

</thead>

<tbody>

@foreach (var item in products)

{

<tr>

<td>

@Html.DisplayFor(modelItem => item.Date)

</td>

<td>

@Html.DisplayFor(modelItem => item.Field1)

</td>

<td>

@Html.DisplayFor(modelItem => item.Field2)

</td>

<td>

@Html.DisplayFor(modelItem => item.Product)

</td>

<td>

<a asp-action="Edit" asp-route-id="@item.ID">Edit</a> |

<a asp-action="Details" asp-route-id="@item.ID">Details</a> |

<a asp-action="Delete" asp-route-id="@item.ID">Delete</a>

</td>

</tr>

}

</tbody>

</table>

</text>

}

How do I set this up to work with the kendo grid instead of tables? I've tried the view below but it shows the correct data in the <srcipt></script> tags but no grid is rendered.

Kendo VIEW:

@using Kendo.Mvc.UI

@model ProjectMVC.Models.IndexViewModel

@{

ViewData["Title"] = "Index";

}

<h2>Index</h2>

<p>

<a asp-action="Create">Create New</a>

</p>

@{

int i = 0;

foreach (var title in Model.Titles)

{

i++;

var products = Model.Products.Where(x => x.Product == title);

tblProducts product = Model.Products.Where(x => x.Product == title).First();

@(Html.Kendo().Grid(products)

.Name($"grid{i}")

.Columns(columns =>

{

columns.Bound(c => c.Date).Width(140);

columns.Bound(c => c.Field1).Width(190);

columns.Bound(c => c.Field2);

columns.Bound(c => c.Product).Width(110);

})

.ToolBar(toolbar =>

{

toolbar.Excel();

toolbar.Pdf();

})

.Pageable()

.Sortable(sortable =>

{

sortable.SortMode(GridSortMode.SingleColumn);

})

.Filterable()

.Scrollable()

)

}

Grid

answered on 21 Mar 2017

1 answer

396 views

Kendo control in ClientEditTemplate

When I use EditorTemplate in a grid inside ClientDetailTemplateId I get "Invalid template" error due to

1. In EditorTemplate you cannot use # or you should double it ## this is clear

2. I need to user kendo control in EditorTemplate and I try to use ToClientTemplate() so kendo convert html for valid for EditorTemplate like

@Html.Kendo().DropDownListFor(m => m.Person).ToClientTemplate()

But I still get error because kendo clause above converts into

I believe problem in jQuery("#Person") having hash. But it is a kinda result of ToClientTemplate() where I expect proper template for ClientTemplat

I can workaround it using onEdit event of I grid and using kendo UI manually to make kendo control

(like <input id="Person" name="Person" style="width:100%;" type="text" value="" /> in EditorTemplate and JQuery in onEdit) but it is a inconvenience. Whole thing of kendo for mvc in ability to use mvc control in view

Grid

answered on 19 Mar 2017

1 answer

516 views

ToDataSourceResult Crash! - on Grid filter

Hi,

I'm in a trial version to test your Grid component. When it's filter enabled and there are a lot of quick queries it crash (Open connection exception). It happens in async version too:

public IActionResult GetData([DataSourceRequest] DataSourceRequest request)
{
return Json(this._seasonRepository.Query().ToDataSourceResult(request));
}

Se produjo la excepción System.InvalidOperationException.

HResult=0x80131509
Mensaje = ExecuteReader requires an open and available Connection. The connection's current state is open.
Origen = System.Data.SqlClient
Seguimiento de la pila:
at System.Data.SqlClient.SqlConnection.GetOpenTdsConnection(String method)
at System.Data.SqlClient.SqlConnection.ValidateConnectionForExecute(String method, SqlCommand command)
at System.Data.SqlClient.SqlCommand.ValidateCommand(Boolean async, String method)
at System.Data.SqlClient.SqlCommand.RunExecuteReader(CommandBehavior cmdBehavior, RunBehavior runBehavior, Boolean returnStream, TaskCompletionSource`1 completion, Int32 timeout, Task& task, Boolean asyncWrite, String method)
at System.Data.SqlClient.SqlCommand.ExecuteReader(CommandBehavior behavior)
at Microsoft.EntityFrameworkCore.Storage.Internal.RelationalCommand.Execute(IRelationalConnection connection, String executeMethod, IReadOnlyDictionary`2 parameterValues, Boolean closeConnection)
at Microsoft.EntityFrameworkCore.Storage.Internal.RelationalCommand.ExecuteReader(IRelationalConnection connection, IReadOnlyDictionary`2 parameterValues)
at Microsoft.EntityFrameworkCore.Query.Internal.QueryingEnumerable.Enumerator.BufferlessMoveNext(Boolean buffer)
at Microsoft.EntityFrameworkCore.Storage.Internal.SqlServerExecutionStrategy.Execute[TState,TResult](Func`2 operation, Func`2 verifySucceeded, TState state)
at Microsoft.EntityFrameworkCore.Query.QueryMethodProvider.<_ShapedQuery>d__3`1.MoveNext()
at Microsoft.EntityFrameworkCore.Query.Internal.LinqOperatorProvider.<_TrackEntities>d__15`2.MoveNext()
at Microsoft.EntityFrameworkCore.Query.Internal.LinqOperatorProvider.ExceptionInterceptor`1.EnumeratorExceptionInterceptor.MoveNext()
at Kendo.Mvc.Extensions.QueryableExtensions.Execute[TModel,TResult](IQueryable source, Func`2 selector)
at Kendo.Mvc.Extensions.QueryableExtensions.CreateDataSourceResult[TModel,TResult](IQueryable queryable, DataSourceRequest request, ModelStateDictionary modelState, Func`2 selector)
at Kendo.Mvc.Extensions.QueryableExtensions.ToDataSourceResult(IQueryable queryable, DataSourceRequest request)
at Oleoshop.Areas.Admin.Controllers.Commerce.Catalog.SeasonsController.GetData(DataSourceRequest request) in

This is my Grid razor configuration (very simple to test)

@(Html.Kendo().Grid<Oleo.Commerce.Catalog.Season>()
.Name("grid")
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(true)
.Read(read => read.Action("GetData", "Seasons"))
)
.Columns(columns =>
{
columns.Bound(c => c.Id).Width(140).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));
columns.Bound(c => c.Name).Width(500).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
columns.Bound(c => c.Reference).Width(500).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
})
.Scrollable(x => x.Height(700))
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Resizable(resize => resize.Columns(true))
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
)

Please let me know

Regards

Grid

answered on 13 Mar 2017