Questions on UI for ASP.NET MVC Forum

8 answers

1.0K+ views

I was able to create Excel-like column filters using Filterable(f => f.Multi(true)... But, when the filters are initialized, the checkboxes are all blank and the user has to check what they want to filter on.

The way Excel behaves is that all checkboxes are selected in a filtered list (see attachment). Users then un-select what they don't want to see.

I need my column filters to behave the way Excel filters behave.

Grid

answered on 21 Sep 2020

2 answers

421 views

kendo window pop for preview image

Hi guys,

currently have a kendo grid with a subdetail grid template. i have a column with a picture. on click of the image i want to preview the image on popup kendo window.But im getting an error below.

2(index):298 Uncaught TypeError: Cannot read property 'content' of undefined
at HTMLImageElement.showImage ((index):298)
at HTMLDivElement.dispatch (jquery.min.js:3)
at HTMLDivElement.r.handle (jquery.min.js:3)

have submitted a ticket - 1485030

also see attached image screen shot

Grid

answered on 21 Sep 2020

5 answers

1.1K+ views

Using Upload on Kendo Window

I'm trying to add an upload feature on a Kendo Window which uses forms, so a user can fill in details, attach a file, and press save - which will post to the controller and save the file and associated data and close the window.

After trying to get the upload to work using Ajax.BeginForm (as below),

@using (Ajax.BeginForm("Save", "Manage", null, new AjaxOptions {HttpMethod = "POST"}, new { enctype = "multipart/form-data", @id = "form", target = "_self"  }))

i kept getting a null value (for the file parameter) and came to the conclusion that the upload control only works for Html.BeginForm (as below)

@using (Html.BeginForm("Save", "Manage", FormMethod.Post, new { enctype = "multipart/form-data" }))

and can see the file parameter coming through when i use it.

However, using Html.BeginForm will force a reload of a page (by redirection) which I do not want to happen. Also I do not want asynchronous uploading to happen as saving the file requires some additional data on the form before it can be saved.

The controller looks like this

[HttpPost]

public ActionResult Save (Model model, IEnumerable<HttpPostedFileBase> file)

Currently for any other screen which does not use the Kendo Uploader, I am using Ajax.BeginForm which posts to the controller and use JavaScript to close the Kendo Window.

What is the correct way of adding a Kendo Upload control onto a Kendo Window and to save / upload the file and close the window?

And if not is there a way to emulate the Kendo Upload's async method when saving the form?

Otherwise is there a way to use Html.BeginForm on a window and stop it from redirecting to a different page?

Upload

answered on 21 Sep 2020

1 answer

84 views

Kenod Combo virtualization

Hi Team,

I have implemented Virtualization and its working fine . But in my case there are 2 pages with similar filter section i want to pass same to other page what i have selected in first page and it should pre load with data. Here i problem is how can i pass selected filter params of virtualized combo and i need to set the same to another combo.
We are using sessiongstorage to transfer current selected data into other page. and using the same we are setting default values to the controls.
Preaviously we filling the combo with all data and setting the slectedvalue property in javascript .
Now we need to set DataSourceRequest to fill the Combo with filter options , help me how can get and set this property in javascript or jquery.

Thanks & Regards,
Sp.

ComboBox

answered on 21 Sep 2020

1 answer

121 views

Grid Filtering / Missing Records

Hello,

I'm currently experiencing issues with a grid control not showing all the records that should be available for a search term.

The method supplying the dataset:

1.return this.Context.Orders.OrderByDescending(record => record.OrderId).Select(

2. record => new OrderDtoModel

3. {

4. Id = record.OrderId.ToString(),

5. EdiNumber = record.EDICustomerReference ?? string.Empty,

6. Due = record.DueDate,

7. Status = record.OrderStatu.StatusName

8. }).ToDataSourceResultAsync(request);

DTO Model:

01.public class OrderDtoModel

02.{

03. public string Id { get; set; }

04.

05. public string EdiNumber { get; set; }

06.

07. public DateTime? Due { get; set; }

08.

09. public string DueDate

10. {

11. get

12. {

13. return this.Due.HasValue ? this.Due.Value.ToString(CultureInfo.InvariantCulture) : string.Empty;

14. }

15. }

16.

17. public string Status { get; set; }

18.}

And finally the grid definition:

01.@(Html.Kendo().Grid<OrderDtoModel>().Name("order_grid").Columns(col =>

02.{

03. col.Bound(o => o.Id).Width(150);

04. col.Bound(o => o.EdiNumber).Width(150);

05. col.Bound(o => o.Status).Width(150);

06. col.Command(o => o.Custom("Manage").Click("manage_order"));

07.}).ToolBar(toolbar =>

08.{

09. toolbar.Search();

10.}).Sortable()

11. .Pageable()

12. .Scrollable()

13. .Groupable()

14. .ClientDetailTemplateId("detail-template")

15. .HtmlAttributes(new{ style="height:750px"})

16. .DataSource(source => source.Ajax()

17. .PageSize(45)

18. .Read(read => read.Action("GetOrderDtos", "Order")))

19. .Events(events => events.DataBound("on_bind"))

20. )

Is there a better way to filter the results provided to the grid? Like how am I supposed to limit records returned in a meaningful way? How can I determine why the records I'm not seeing aren't showing up? Running a simple SQL query gets my results and the records do not have anything different than normal records from surface inspection.

Grid

answered on 21 Sep 2020

2 answers

90 views

Kenod Combo virtualization

Hi Team,

I have implemented Virtualization and its working fine . But in my case there are 2 pages with similar filter section i want to pass same to other page what i have selected in first page and it should pre load with data. Here i problem is how can i pass selected filter params of virtualized combo and i need to set the same to another combo.

We are using sessiongstorage to transfer current selected data into other page. and using the same we are setting default values to the controls.

Preaviously we filling the combo with all data and setting the slectedvalue property in javascript .

Now we need to set DataSourceRequest to fill the Combo with filter options , help me how can get and set this property in javascript or jquery.

Thanks & Regards,

Sp.

Grid

answered on 21 Sep 2020

1 answer

87 views

Broken editors in parent-child grid configuration

Hi guys,

I have a problem with editors in child grid. It seems that they cannot be initialized when clicking on them.
I've attached a video which is showing how are the grid cells behaving. I've isolated only 3 columns, but it is behaving like this for all columns even these with simple text.
Here is my grid configuration:

@(Html.Kendo()

.Grid<DiscountViewModel>()

.Name("resources")

.HtmlAttributes(new { @class = "fullscreen-grid" })

.AutoBind(false)

.Columns(columns =>

{

columns.Bound(p => p.ResID)

.Title(R.ID)

.Width(70)

.Filterable(true);

columns.Bound(p => p.ResPrice.UnitPriceUnit)

.Width(145)

.Title(R.UnitPriceUOM);

columns.Bound(p => p.PriceEffectiveDate)

.EditorTemplateName("DatePrice")

.Format("{0:" + formatWithoutTime + "}")

.Width(150)

.Title(R.PriceEffective);

})

.Editable(editable => editable.Mode(GridEditMode.InCell).Enabled(!locked))

.NoRecords()

.Sortable()

.Scrollable(s => s.Height("auto"))

.Pageable(x =>

{

x.Enabled(true);

x.PageSizes(defaultGridPageSizes);

x.PreviousNext(true);

x.Refresh(true);

})

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

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

.Reorderable(reorder => reorder.Columns(true))

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(true)

.PageSize(defaultGridPageSize)

.Model(model =>

{

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

})

.Read(read => read.Action("Read", "RController").Data("filterPrice"))

.Update(x => x.Action("Update", "RController").Data("updateResourceFixDates"))

)

.ClientDetailTemplateId("resourceTemplate")

)

<script type="text/kendo" id="resourceTemplate">

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

.Name("res_#=PriceID#")

.HtmlAttributes(new { @class = "hiddenHeaderRow " })

.Columns(columns =>

{

columns.Bound(p => p.ResID)

.Title("ID")

.Width(60);

columns.Bound(p => p.ResPrice.UnitPriceUnit)

.Width(145)

.Title(R.UnitPriceUOM);

columns.Bound(p => p.PriceEffectiveDate)

.EditorTemplateName("DatePrice")

.Title(R.PriceEffective)

.Format("{0:" + formatWithoutTime + "}")

.Width(150);

})

.Editable(editable => editable.Mode(GridEditMode.InCell).Enabled(!locked))

.Sortable()

.Scrollable(scrollable => scrollable.Height(120))

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

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

.Reorderable(reorder => reorder.Columns(true))

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(true)

.Events(events => events.Error("error_handler"))

.Model(model =>

{

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

})

.Read(read => read.Action("Read", "RController", new { }))

.Update(update => update.Action("Update", "RController").Data("updateResourceFixDates"))

).ToClientTemplate()

)

</script>

Grid

answered on 21 Sep 2020

1 answer

480 views

Grid Filter options in Alphabetical order

Hi Team,

How can we set Grid filters in alphabetical order?

Thanks & Regards,

Sp.

Grid

answered on 21 Sep 2020

3 answers

420 views

Badges overlaying icons

Trying to find a simple example of a badge where it is overlaying an icon, not next to a button etc. A badge example similar to every other "badge" on the web. Even on this Telerik site, the shopping cart with the "0" items badge overlaid on top.

Badge

answered on 18 Sep 2020

5 answers

999 views

Paging for a detail grid with local data

In my case, the main grid retrieves its data via an Ajax datasource

@(Html.Kendo().Grid<ViewModels.IconViewModel>()

.Name("Icons")

.Columns(columns =>

{

...

})

.Pageable()

.Scrollable(s => s.Height("auto"))

.Navigatable()

.Selectable(s => s.Mode(GridSelectionMode.Single))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize((int)Model.RowsPerPage)

.Read(read => read.Action("GetIcons", "API")

.Type(HttpVerbs.Get)))

.Events(e => e.DetailInit("detailInit"))

.ClientDetailTemplateId("inner-grid-template")

.AutoBind(true)

)

and the detail template is defined as

<script id="inner-grid-template" type="text/kendo-tmpl">

@(Html.Kendo().Grid<ViewModels.IconReferenceViewModel>()

.Name("IconReferences_#=Id#")

.Columns(columns =>

{

columns.Bound(o => o.ClassName).Filterable(false);

columns.Bound(o => o.SubclassName).Filterable(false);

})

.ToClientTemplate()

)

</script>

In the detailInit event, the data source of the detail grid is set to a property of the model. This property holds an array of items.

function detailInit(e) {

var grid = $("#IconReferences_" + e.data.Id).data("kendoGrid");

var data = e.data.References;

grid.dataSource.data(data);

}

So far so good. The data is shown in the grid as intended. But I want the detailed grid to be pageable. I played around with:

Setting .Pageable() in the detail template
Adding a datasource in the detail template in order to set the pagesize (Ajax/Custom?)
Setting grid.dataSource.pageSize (and other properties like serverPageable) in the detailInit() event.

This usually resulted in a brief flicker of the complete detail list or the page reloading or the complete list with a paging control (showing 1-10 of 20, but showing the complete list; using the paging control refreshed the main grid).

So what is the correct way of getting this done?

Grid

answered on 18 Sep 2020