Questions on UI for ASP.NET MVC Forum

1 answer

261 views

Always show collapse icon after clicked on expand

Hi All,

I have a requirement to show collapse icon (after clicking the expand icon) whether it has a child nodes or not.

Thanks

TreeView

answered on 13 Jul 2020

9 answers

1.2K+ views

[Solved] Load Kendo scripts on bottom of page - possible?

Hi, we always load all js files at the bottom of a page because of performance. Before the </body> closing tag.
If we shift the JS files from head to the end of the file, Kendo controls are not working.
All the JS files are loaded correct if we check the network traffic with firebug tool.

Is it an known issue? and we have always to load all the scripts in head?

I made a 2nd quick test with the keno example code.
Open kendoui.trial.2012.3.1114\wrappers\aspnetmvc\Examples\Areas\razor\Views\Shared\_WebLayout.cshtml and shifted the following scripts to the bottom. Than load e.g. the datepicker example page (http://localhost/kendo/razor/web/datepicker/index)

    <script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>
    <script src="@Url.Content("~/Scripts/console.min.js")"></script>
    <script src="@Url.Content("~/Scripts/prettify.min.js")"></script>

Same problem. If I open the datepicker test page. Datepicker is not working.
Thanks for your help.
Regards fan

General Discussions

answered on 09 Jul 2020

3 answers

367 views

[Solved] Bug? Use PersistSelection with GroupPaging

Hi everyone,

not sure if I found a bug or if i'm just doing it wrong.

What I try is to create a grid that is per default grouped with GroupPaging and has a checkbox selection column with PersistSelection.

However I only get a js error "Cannot read property 'undefined' of undefined" @init._restoreSelection (kendo.all.min.js:62).

I tried adding an Id field but it still doesn't work. Only changed error to "Cannot read property 'Id' of undefined".

If I remove the PersistSelection it works fine.

Html.Kendo().Grid<MyViewModel>()

.Name("myGrid")

.Columns(c =>

{

c.Select().Width(50);

c.Bound(x => x.Id).Hidden();

c.Bound(x => x.ArticleNo);

c.Bound(x => x.ArticleGroup).ClientGroupHeaderTemplate("<input class=\"k-checkbox groupSelect\" type=\"checkbox\"> #= value #").Hidden();

})

.PersistSelection()

.ToolBar(t => t.Search().Text(Localizer.Lang_SearchInTable))

.Events(x => x.DataBound("eventMyGridDataBound"))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(50)

.GroupPaging(true)

.Group(x => x.Add(y => y.ArticleGroup))

.Read("GridRead", "Article")

.Model(m =>

{

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

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

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

}))

Best Regards

Nils

Grid

answered on 08 Jul 2020

8 answers

1.5K+ views

Grid: Insert and Delete only, no update of existing records

Hi,

I'm using the Kendo Grid in my application.

In my Grid I just need to insert rows and delete them. Update should not be possible.

If I define the Grid as follows, I dont have an update button to save the values. If I specify the Update function, I get the Update Button.

How can I achieve this?

Greets

.Columns(

col =>

{

col.Command(c => { c.Destroy(); }).Width(250);

...

})

.ToolBar(c => c.Create())

Grid

answered on 07 Jul 2020

1 answer

2.5K+ views

Kendo Grid Batch Edit with all rows and columns editable

Hello,

We have a business requirement where the rows in the grid should all be in editable mode, i.e. show textbox or dropdown etc for each of the columns for each row.

The default implementation only shows a textbox in the field that a user is editing, the others display as labels.

When we tried with custom templates, it seems it does not support 2-way model databinding.

Please advise.

Thanks.

Grid

answered on 06 Jul 2020

5 answers

185 views

Server Grouping with virtualisation

Hello All, I followed this example https://demos.telerik.com/aspnet-mvc/grid/server-grouppaging-virtualization to implement in my project, however i am getting error while doing grouping with mutiple columns, i tried searching in the forms for a solution but no luck.

This is my Code below

Html.Kendo().Grid<Project.ViewModels.ListViewModel>()

.Name("GridName")

.Columns(columns =>

{

columns.Select().Width(50).HtmlAttributes(new { @class = "checkbox-align" }).HeaderHtmlAttributes(new { @class = "checkbox-align" });

columns.Bound(p => p.Company);

columns.Bound(p => p.Country);

columns.Bound(p => p.City);

columns.Bound(p => p.CodeSociete);

})

.ToolBar(toolbar =>

{

toolbar.Create();

})

.ColumnMenu(col => col.Filterable(true))

.Height(550)

.Sortable(sortable=>sortable.Enabled(true))

.Navigatable()

.Resizable(r => r.Columns(true))

.Groupable()

.Filterable(filterable => filterable

.Enabled(true)

.Extra(true)

.Operators(operators => operators

.ForString(str => str.Clear()

.StartsWith("Starts with")

.IsEqualTo("Is equal to")

.IsNotEqualTo("Is not equal to")

))

)

.Scrollable(scrollable => scrollable.Virtual(true))

.Events(events => events.DataBound("onDataBound"))

.DataSource(dataSource => dataSource

.Ajax()

.Events(events =>

events.Error("error_handler")

)

.Model(model =>

{

model.Id(p => p.ID);

})

.GroupPaging(true)

.PageSize(50)

.Read("DetailProducts_Read", "List")

)

My Controller class ListController.cs

[HttpPost]

public ActionResult DetailProducts_Read([DataSourceRequest]DataSourceRequest request)

{

IEnumerable<List_Entity> list = myService.getAll(out totalRecords, this.UserId.ToString());

listDB = list

.Select(f => new ListViewModel()

{

ID = f.ID,

Company= f.Company,

Country= f.Country,

City= f.City,

CodeSociete= f.CodeSociete



,

}).ToList();

DataSourceResult result = listDB.ToDataSourceResult(request);

result.Total = (int)totalRecords;

return new JsonResult() { Data = result, JsonRequestBehavior = JsonRequestBehavior.AllowGet, MaxJsonLength = Int32.MaxValue };

}

When i run the application virtualisation,sorting,filtering,paging works perfectly without grouping, when i try to group with first colum drag and drop all the events work perfectly, but when i try to drag second column to grouping i get the following error (errorDebug.png) and in the browser console window i have this error

Uncaught TypeError: Cannot read property 'length' of undefined
at Function.map (jquery-1.10.2.js:789)
at init.groups (kendo.aspnetmvc.js:212)
at proxy (jquery-1.10.2.js:841)
at init.groups (kendo.all.js:6508)
at init._readData (kendo.all.js:7371)
at init.success (kendo.all.js:7575)
at success (kendo.all.js:7527)
at Object.n.success (kendo.all.js:6404)
at fire (jquery-1.10.2.js:3062)
at Object.fireWith [as resolveWith] (jquery-1.10.2.js:3174)

Could you please help me to resolve this issue?

Grid

answered on 06 Jul 2020

3 answers

1.2K+ views

Force Kendo grid to display horizontal scrolling bar even if there is no data to display

Hello All,

I have a Kendo grid where all of its columns do not fit into the grid width.

If there is a least one row of data to display the grid shows a horizontal scrolling bar.

However if there is no data, there is no horizontal scrolling bar. Even though it is a cosmetic issue and it happens when there is nothing to display, some of my users complain and want to have horizontal scrolling bar displayed.

Is there any way to get this done?

Thank you!

Grid

answered on 03 Jul 2020

1 answer

475 views

FileManager Breadcrumb folder links just go to "#"

The FileManager breadcrumb links for previous folders don't seem to work like I would expect. Instead of opening the folder that was clicked on, it appears that the breadcrumb link leads to "#". Clicking on the root folder icon seems to work correctly (opens the root folder) but folder links don't seem to work out of the box.

Is there some kind of configuration that I'm missing?

FileManager

answered on 03 Jul 2020

1 answer

354 views

Tables: Can I have something other than non-blank white space ( ) character as default content of table cells?

As per subject. When a new table is created, all cells contain a non-blank white space HTML character ( ). Is there any way to initialize the control so that it contains nothing, zip, nada?

Editor

answered on 02 Jul 2020

2 answers

7.6K+ views

Enable/Disable grid editing dynamically (on demand)

Hello there.

So what I'm trying to do is to disable/enable grid editing from Javascript. Here's the code done with MVC:

@(Html.Kendo().Grid<DocumentGoodsReceiptFuel>()
.Name("fuelGrid")
.Columns(columns =>
{
columns.Bound(c => c.MaterialString).Title("Material").Width(150);
columns.Bound(c => c.QuantityOrdered).Title("Quantity dispatched").Width(150);
columns.Bound(c => c.QuantityUnloaded).Title("Quantity unloaded").Width(150);

})
.Scrollable(a => a.Height("auto"))
.Filterable(filterable => filterable.Enabled(true))
.Pageable(pager => pager.Refresh(false))
.Sortable(sortable => sortable.Enabled(true)).AutoBind(false)
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.AllowCopy(true)
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource.Ajax().ServerOperation(false).Batch(false).PageSize(100)
.Model(model =>
{
model.Id(gridMainAlias => gridMainAlias.ID);
model.Field(gridMainAlias => gridMainAlias.MaterialString).Editable(false);
model.Field(gridMainAlias => gridMainAlias.QuantityOrdered).Editable(true);
model.Field(gridMainAlias => gridMainAlias.QuantityUnloaded).Editable(true);
}))
.Resizable(resize => resize.Columns(true))
.Mobile(MobileMode.Auto)
)

I'd like to disable and enable the last two columns (or entire grid, both goes) from Javascript dynamically/on demand.
I've tried this: $('#fuelGrid').data('kendoGrid').dataSource.options.schema.model.fields["QuantityUnloaded"].editable =false
but it doesn't work, it just sets the editable false for that column but it doesn't refresh the settings or something, so the change is not applied on the grid. What do you recommend in this scenario? Thanks in advance!

Grid

answered on 02 Jul 2020