Questions on UI for ASP.NET MVC Forum

1 answer

228 views

Examples integrating Kendo React componenets with MVC DataSourceRequest

Under the React Data Query library, there are examples of doing the filtering/sorting in memory with local data: https://www.telerik.com/kendo-react-ui/components/dataquery/

And there's a page about Integration with UI for ASP.NET Core that shows the standard backend configuration for a DataqSourceRequest/ToDataSourceResult MVC configuration: https://www.telerik.com/kendo-react-ui/components/dataquery/mvc-integration/

But there's no information about how you configure a Kendo React component, for example a grid, to use the MVC Operations. Is there an example anywhere I have missed?

General Discussions

answered on 07 Feb 2018

3 answers

145 views

Model Defaults on Grouped Columns

I have a gird with a toolbar template where I have a pair of cascading drop down lists and an add new button.

The 1st one is Category and the 2nd is Sub Category which Cascades from Category...

01..ToolBar(toolbar => { toolbar.Template(

02. @<text>

03. @(Html.Kendo().DropDownList()

04. .Name("ddlCategory")

05. .DataTextField("Text")

06. .DataValueField("Value")

07. .OptionLabel("Select a Category...")

08. .HtmlAttributes(new { style = "width: 250px;" })

09. .DataSource(source => {

10. source.Read(read => { read.Action("Categories_Read", "Categories"); });

11. })

12. )

13. @(Html.Kendo().DropDownList()

14. .Name("ddlSubCategory")

15. .DataTextField("Text")

16. .DataValueField("Value")

17. .OptionLabel("Select a Sub Category...")

18. .HtmlAttributes(new { style = "width: 250px;" })

19. .DataSource(source => {

20.

source.Read(read => { read.Action("SubCategories_Read", "Categories").Data("filterSubCategories"); }).ServerFiltering(true);

21. })

22. .AutoBind(false).Enable(false).CascadeFrom("ddlCategory")

23. )

24. <a class="k-button k-button-icontext k-grid-add" href="#"><span class="k-icon k-i-add"></span>Add New Contract Item</a>

25. </text>); })

I've set up the datasource model as follows:

1..Model(model =>

2.{

3. model.Id(p => p.ContractItemID);

4. model.Field(p => p.Category).DefaultValue("Category");

5. model.Field(p => p.SubCategory).DefaultValue("Sub Category");

6.})

I'm also grouping on Category and SubCategory and I have created a function for the edit event:

1..Group(groups => { groups.Add(p => p.Category); groups.Add(p => p.SubCategory); } )

2..PageSize(20))

3..Events(e => e.Edit("getCategoryVals"))

The two issues I'm running into is this:

First, I've followed documentation and demos from multiple locations, and I cannot grab the text from the drop down... I'm using the following code... but on line 06 the script fails with an error that .text is not defined.

01.function getCategoryVals(e) {

02.

03. var ddlCategory = $('#ddlCategory');

04. var ddlSubCategory = $('#ddlSubCategory');

05.

06. var tsCategory = ddlCategory.data('kendoComboBox').text();

07. var tsSubCategory = ddlSubCategory.data('kendoComboBox').text();

08.

09. e.model.set("Category", tsCategory);

10. e.model.set("SubCategory", tsSubCategory);

11.}

And Second... If I hard code tsCategory and tsSubCategory, it updates the model and the fields in the new row reflect the new values, BUT the grouping label still shows Category and Sub Category instead of the actual value... I want these fields to be hidden....

Do I have to manually update the grouping labels using jquery or is there a better way to do this?

Grid

answered on 07 Feb 2018

1 answer

208 views

Export To PDF With table of contents

Does the PDF exporter have built in functionality to build a TOC? One way I thought about doing this was using hash anchors. Is that supported?

Thanks!

General Discussions

answered on 06 Feb 2018

2 answers

811 views

ASP.NET MVC Kendo UI Theme Builder - Customize theme for Grid and other controls

HI

I have a question about Theme Builder.

I have a new project and customer want to customize the theme for ALL Telerik Controls (Button, Grid, etc).
I have try the Sass Theme Builder but this theme builder unable to customize Grid's appearance :

Sass Theme Builder
https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes#sass-theme-builder

And I have found and try the Kendo UI ThemeBuilder, but the error occurred (opened by Google Chrome) :

Kendo UI ThemeBuilder
https://demos.telerik.com/kendo-ui/themebuilder/

--

How could I customize the theme for ALL Telerik Controls (Grid, etc.) ?

And how could I generate following theme files
(kendo.xxxxx.min.css, kendo.dataviz.xxxxx.min.css, kendo.xxxxx.mobile.min.css) :

Blue Opal theme files :

Content/kendo/2017.2.621/kendo.blueopal.min.css
Content/kendo/2017.2.621/kendo.dataviz.blueopal.min.css
Content/kendo/2017.2.621/kendo.blueopal.mobile.min.css

*blueopal - Maybe new theme name.
*2017.2.621 - kendo ui version only.
*Google Chrome version: 63.0.x.x 32bits

Best regards

Chris

General Discussions

answered on 05 Feb 2018

1 answer

1.6K+ views

Add class to edit line

Hi,

I want to add a specific class to the inputs in Inline editing .

How can I do it?

thanks

Grid

answered on 02 Feb 2018

3 answers

935 views

[Solved] Dynamic Tables

Hi,

at the moment I am converting the old Telerik MVC tool to Kendo MVC for one of our portals.

now I have an issue with a dynamic table, not always all fields are the same and I can't get it to work correctly.

my grid looks like this

@(Html.Kendo().Grid(Model.DefaultView)

.Name("Grid")

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("LoadData", "AutorisatieMatrix"))

.Update(read => read.Action("_SaveBatchEditing", "AutorisatieMatrix"))

.Model(model => model.Id("ProgramFunction"))

)

.Sortable()

.Editable(editing => editing.Mode(GridEditMode.InCell))

.ToolBar(commands =>

{

commands.Save();

})

.Columns(columns =>

{

columns.Bound("Id").Visible(false);

foreach (System.Data.DataColumn dcol in Model.Columns)

{

if (dcol.ColumnName != "Id")

{

if (dcol.ColumnName == "ProgramFunction")

columns.Bound("ProgramFunction")

.EditorTemplateName("_ReadOnlyValue")

.ClientTemplate("#=ProgramFunction#")

.Title("Programmafunctie");

else

{

columns.Bound(dcol.ColumnName)

.EditorTemplateName("_PermissionEditor")

.ClientTemplate(boo(this, "#=" + dcol.ColumnName + "#").ToHtmlString())

.Title(dcol.Caption)

;

}

})

where I go through all colums specified in the model.
and the header gets created as it should.

In the controller in the Index I create an empby DataTable so the Model knows which colums to use.

public ActionResult Index()

{

var tbl = CreateNewDataTable();

var model = tbl;

return View(tbl);

}

which seems to work fine.

Then In the loadData DataRequest I generate this same DataTable fill it, add a dynamic wrapper to include "Data" in the json
Convert is to Json and return the Content.

Grid

answered on 02 Feb 2018

9 answers

295 views

Navigation With Arrow Buttons

Is it possible to alter the behaviour of the spreadsheet with some javascript that would allow a user to type a value into a cell and then press the down arrow to set the value and move to the next cell? Simply registering the event and changing which cell is selected doesn't work because the value in the cell doesn't actually get set and I've tried simulating an enter key press but that didn't work because of compatibility issues.

Spreadsheet

answered on 02 Feb 2018

1 answer

1.4K+ views

Passing Multiple Parameters with a Detail Action Button (AJAX)

Hello,

I would like to use the ASP.NET MVC Kendo UI Grid to render a list of records that have a "Detail" button for each record (similar to this look: https://demos.telerik.com/aspnet-mvc/grid/custom-command).

I am currently using an AJAX-bound grid. I need to pass two values to the "Details" controller. Here is what I have so far:

.Columns( c=>

{

c.Bound(c => personId);

c.Bound(c => positionId);

// Want to use a "Details" button to pass personId and positionId to HomeController/Details/{personId}/{positionId}

c.Command( c => cmd.Custom("Details"))

})

.DataSource(d => d

.Ajax()

.Read(r => r.Action("GetPersons", "Home"))

)

However, the business logic in our application requires two values passed to the "Details" controller (see below).

1.

[HttpGet]

public ActionResult Details(int personId, int positionId)

2.{

3. Person person = Person.GetPerson(personId, positionId, myConnection);

4. return View(person);

5.}

Grid

answered on 01 Feb 2018

1 answer

381 views

[Solved] Grid setOptions sortable = false clear header template UNEXPECTEDLY

HI

I met a problem about Grid Sortable :

Grid setOptions sortable = false clear header template UNEXPECTEDLY.

What's going on ?? Why header template lost ?
How to avoid this situation or
how to disable sortable temporary and header template will not be cleared.

Sample Code :

View
columns.Bound(c => c.Column1)
.HeaderTemplate
(
@<text>

<input type='number' class='k-textbox' onfocus="class1.focusAllDays({ element: this })" style='width: 50px; font-size: small;' />

</text>
)
.Width(280);

Javascript

class1 :

focusAllDays: function(e)
{
var grid = get your grid;
//
grid.setOptions({ sortable: false });
},

Best regards

Chris

Grid

answered on 01 Feb 2018

1 answer

111 views

Multi day routes are not getting displayed on day and week view in bussiness hour

I have reproduced the issue on the demo you have provided in following link:
https://demos.telerik.com/kendo-ui/scheduler/index

1. goto https://demos.telerik.com/kendo-ui/scheduler/index
2. there is a resource "Call Charlie about the project"
3. set its start date as 6/11/2013 1:30 AM and set its end date as 6/12/2013 4:00 PM
4. Then this Resource will not be displayed on the scheduler. So in such cases how we can show resource for the multiple days without using "alldayevent" tab/option.
how can i view such resources which have part of view in business hours?

Scheduler

answered on 01 Feb 2018