Questions on UI for ASP.NET MVC Forum

5 answers

591 views

Hi,

I'm trying to use a mult-checkbox filter like the demo on https://demos.telerik.com/aspnet-mvc/grid/filter-multi-checkboxes.

columns.Bound(c => c.status).Title("Status").Filterable(ftb => ftb.Multi(true)); And it's client side[.ServerOperation(false)].

Currently I have "act" and "inact" value in this column. I want to show only the "act" records when the page is loaded. Is that possible to give a default or pre-checked value to the muti-checkbox?

Grid

answered on 19 Jan 2017

1 answer

275 views

Setting the width of each tab

I can't seem to find any information on this.

I'd like to set the width of each tab; either to a fixed value or have the tab adjust to fit the length of the text for the tab without wrapping the text. Is this possible?

Regards,

Shawn

TabStrip

answered on 19 Jan 2017

1 answer

975 views

Export to Excel of both Parent/Child grid's data

Hi
I have a scenario in which I have a grid which has a child grid in it which shows up when user clicks on one column of it. Following is my code

Parent Grid has ".ClientDetailTemplateId("template")" which refers to script id "template" which has definition of the child grid.
How I can export data of both grids together when one clicks on EXPORT TO EXCEL button?
Right now it only exports PARENT grid's data..no child grid's data is being exported.

Parent Grid:
@(Html.Kendo().Grid<INDOT.SOARS.ViewModels.Models.SearchFacilitiesListViewModel>()
.Name("gvFacilitiesReport")
.AutoBind(false)
.Columns(columns =>
{
columns.Bound(c => c.FacilityName).Title("Facility Name").HeaderHtmlAttributes(new {style = "white-space: normal;font-weight:bold"}).MinScreenWidth (100).HtmlAttributes(new {style = "color:blue;font-weight:bold"});
columns.Bound(c => c.FacilityType).Title("Type").HeaderHtmlAttributes(new {style = "white-space: normal;font-weight:bold"}).MinScreenWidth(70).HtmlAttributes(new {style = "font-weight:bold"});
columns.Bound(c => c.FacilityUse).Title("Use").HeaderHtmlAttributes(new {style = "white-space: normal;font-weight:bold"}).MinScreenWidth(70).HtmlAttributes(new {style = "font-weight:bold"});
columns.Bound(c => c.FacilityStatus).Title("Status").HeaderHtmlAttributes(new {style = "white-space: normal;font-weight:bold"}).MinScreenWidth(70).HtmlAttributes(new {style = "font-weight:bold"});
columns.Bound(c => c.FacilityOwnerShip).Title("OwnerShip").HeaderHtmlAttributes(new {style = "white-space: normal;font-weight:bold"}).MinScreenWidth(70).HtmlAttributes(new {style = "font-weight:bold"});
columns.Bound(c => c.FacilitySystemPlan).Title("System Plan").HeaderHtmlAttributes(new {style = "white-space: normal;font-weight:bold"}).MinScreenWidth(70).HtmlAttributes(new {style = "font-weight:bold"});
columns.Bound(c => c.FacilityCounty).Title("County").HeaderHtmlAttributes(new {style = "white-space: normal;font-weight:bold"}).HtmlAttributes(new {style = "font-weight:bold"});
})
.ToolBar(tools => tools.Excel().Text("<i class='sprite excel' title='Export to Excel'></i>").HtmlAttributes(new {style = "background-color:Transparent"}))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new {style = "height: 490px"})
.ClientDetailTemplateId("template")
.Excel(excel => excel.FileName("FacilitiesList-" + DateTime.Now.Date + ".xlsx").Filterable(true).ProxyURL(Url.Action("Excel_Export_Save", "AdminMain", new {area = "Admin"})).ForceProxy(true).AllPages(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Read(read => read.Action("SearchFacilities", "AdminMain", new {area = "Admin"}).Data("GetParameters"))
) )

Child Grid:

I would appreciate your help.
Thanks
Rizwan

Grid

answered on 19 Jan 2017

3 answers

327 views

Globally disable update button after click

We have a situation where our customer's network is slow and when inserting records into a grid, they'll occasionally grow inpatient and click the update button multiple times, resulting in duplicate records being saved. I know we can set an onclick event and disable the button but I would rather not have to do that on the dozens of grids we have in our application. Is there an easy way to set this behavior globally?

Grid

answered on 19 Jan 2017

1 answer

1.9K+ views

Kendo Grid Sort Not Working

I have Kendo MVC Grid on my page with multi column sorting enabled. But sorting on two specific fields is not working:

1. For a column with conditional formatting done through JavaScript

2. Column with ClientTemaplate.

Below is my code.

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

.Name("Info")

.Columns(columns =>

{

columns.Bound(c => c.ColumnA).Width("4%").Title("A #").Sortable(true);

columns.Bound(c => c.ColumnB).Width("4%").Title("B #").Sortable(true);

columns.Bound(c => c.ColumnC).ClientTemplate("#=ColumnC.Name#").Sortable(true).Width("11%").Title("C");

})

.Editable(edit => edit.Mode(GridEditMode.InLine))

.Events(events => { events.Save("gridSave"); })

.Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))

.DataSource(source => source

.Ajax()

.Sort(sort => sort.Add("ColumnA").Descending())

.ServerOperation(false)

.Model(model =>

{

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

model.Field(f => f.ColumnA).Editable(false);

model.Field(f => f.ColumnB).Editable(false);

model.Field(f => f.ColumnC).DefaultValue(new ColumnC() { Id = 0 });

})

//other configuration removed

.Events(events => { events.RequestEnd("sourceReadComplete"); })

)

Case 1: I am adding a css class based on a condition. Sorting is not working on this column. If I comment the code that is adding the class, then the sort works fine.

function sourceReadComplete(e) {

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

grid.one("dataBound", function () {

var gridData = grid.dataSource.view();

for (var i = 0; i < gridData.length; i++) {

//get the item uid

var currentUid = gridData[i].uid;

//find the row based on the uid and the custom class

var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");

//if the record fits the condition

if (gridData[i].Condition == true) {

currentRow.find("td:first").addClass("followup")

}

});

}

Case 2: Sorting on Column C is not working. If I bind the column directly to ColumnC.Name then sorting works. But I cannot do that as I want a dropdown for this field in Edit mode.

Grid

answered on 19 Jan 2017

1 answer

135 views

Authentication Error on navigate

Hi

I am using a tabstrip with the content of each tab being retrieved from a controller using LoadContentFrom, the controller for each tab returns a partial view, which all works fine. The problem I have is that some users frequently leave their computers for some time, then when they click on a new tab their session has timed out. I can see the ajax call in this situation correctly gets back a 401, however the tabstrip just displays an empty div which confuses the users.

I've tried hooking all the tab strip events and inspecting the parameters but there does not appear to be anyway of identifying a 401 has been returned, is this possible? If I can trap the 401 in JavaScript I can deal with it appropriately.

My environment is MVC 5, Kendo 2016.3, .Net 4.5.2

TIA

Pete

TabStrip

answered on 19 Jan 2017

2 answers

147 views

Grid with Ajax DataSource and custom filter operator function not refreshing

I have a Grid created with an ASP.NET partial view:

@(Html.Kendo().Grid<MyApp.ViewModels.ComponentDisplayInfo>()

.Name("component_template_grid")
.Columns(columns =>
{
columns.Bound(c => c.Name);
columns.Bound(c => c.Description);

})
.Scrollable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ComponentAdmin_Read", "Home"))
.PageSize(20)
)

)

there is also a text input users can type into to change the filter values, and I bind the change event on this to:

componentGridFilterInput(e: JQueryInputEventObject) {

let filters = [];
let name_input = $("#component_name").val();
if (name_input.length > 0)
filters.push({ field: "Name", operator: (item, value) => this.filterFunction(item, value), value: name_input });

let grid_table = $("#component_template_grid").data("kendoGrid");
grid_table.dataSource.filter({ logic: "and", filters: filters });
}

this.filterfunction() is:

filterFunction(item: string, value: string): boolean {

let test = item.indexOf(value);

return test > -1;
}

the problem is the grid is not updated with this filtering, the filter function is not even called once.

but, if I replace the functional operator for the filter with:

filters.push({ field: "Name", operator: "contains", value: name_input });

this is working as expected.

Additionally, if on page load I replace the grid's datasource with:

let grid_table = ("#component_template_grid").data("kendoGrid");

grid_table.setDataSource(new kendo.data.DataSource({
data: [
{ Name: "Test 1", Description: "Test 1" },
{ Name: "Test 2", Description: "Test 2" }
]
}));

the functional filter is working as expected.

Only the combination of the functional filter + ajax datasource isn't re-filtering the table when I programmatically change the filter after the table is displayed ...

Thanks for any help.

Grid

answered on 18 Jan 2017

2 answers

797 views

Grid Filter Firing button click event

The Grid has column filter implemented referring to this link > grid-filter-row

When cursor is placed in filter text box and press Enter, the last button click event is firing.

<div id="divGrid">

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

.Name("Grid")

.Columns(columns =>

{

columns.Bound(e => e.Name)

.Title("Document Name")

.Width(220)

.HtmlAttributes(new { title = "#= Documentpath #" })

.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));

columns.Bound(e => e.Format)

.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")))

.Width(140);

columns.Bound(e => e.Type)

.Title("Type")

.ClientTemplate("<div align=center>#=Type#</div>")

.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));

columns.Bound(e => e.LastModifiedDate)

.Title("Modified Date")

.Filterable(ftb => ftb.Cell(cell => cell.Operator("Is after")))

.ClientTemplate("#= kendo.toString(LastModifiedDate, \"dd MMM yyyy HH:mm \") #");

})

.NoRecords("No documents to display")

.Sortable()

.Scrollable()

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

.Pageable(pager => pager.Refresh(true).PageSizes(new int[] { 10, 50, 100 }))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

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

.Read(read => read.Action("DocReadData", "Doc",

new

{ objectID = ViewBag.ObjectID,

jurisdiction = @ViewBag.Jurisdiction

}))

)

.Events(events => events

.DataBound("dataBound"))

)

</div>

<div class="main-wrap" style="padding-top:1em">

<div class="floatLeft">

@(Html.Kendo().Button()

.Name("btnBack")

.Content("Back")

.HtmlAttributes(new { type = "button" })

.Events(ev => ev.Click("onbtnBackClick")) ///ajax call

)

</div>

<div class="floatRight">

@(Html.Kendo().Button()

.Name("btnDownload")

.Content("Download Doc")

.HtmlAttributes(new { type = "button" })

.Events(ev => ev.Click("onbtnDownloadClick")) ///ajax call

)

@(Html.Kendo().Button()

.Name("btnTest")

.Content("TestButton")

.HtmlAttributes(new { type = "button" })

.Events(ev => ev.Click("onbtnTestClick"))

.HtmlAttributes(new { title = @ViewBag.ErrorMessage })///ajax call

)

</div>

<script type="text/javascript">

function onbtnTestClick(e) {

alert("onbtnTestClick");

}

</script>

On pressing Enter key in Filter textbox shows the alert message "onbtnTestClick".

Is there any default form submit event exists in kendo? What is causing this and how to prevent. Please suggest

Grid

answered on 18 Jan 2017

1 answer

168 views

[Solved] Grid MVC in a PartialView

Hi,

I am using a Grid MVC in a PartialView and when I try add a new record, the PartialView is rendered and obviously the page lost styles and scripts.
How can I use all functionalities of a Grid MVC in a PartialView.

This is my code.

01.@(Html.Kendo().Grid(Model.RelatedCompanies)

02. .Name("Relatedcompanies")

03. .ToolBar(tools => tools.Create().Text("Agregar nuevo"))

04. .Columns(columns =>

05. {

06. columns.Bound(p => p.ThirdParties.NumIdentificationThirdParty);

07. columns.Bound(p => p.ThirdParties.BusinessName).ClientTemplate("#= ThirdParties.BusinessName #" +

08.

"<input type='hidden' name='RelatedCompanies[#= index(data)#].ThirdParties.BusinessName' value='#= ThirdParties.BusinessName #' />"

09. );

10. columns.Bound(p => p.DescriptionRelatedCompany).ClientTemplate("#= DescriptionRelatedCompany #" +

11.

"<input type='hidden' name='RelatedCompanies[#= index(data)#].DescriptionRelatedCompany' value='#= DescriptionRelatedCompany #' />"

12. );

13. })

14. .Events(events => events

15. .Change("relatedCompaniesOnChange")

16. )

17. .DataSource(dataSource => dataSource

18. .Server()

19. .Model(model =>

20. {

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

22. })

23. .Create(update => update.Action("CreateCompany", "ThirdPartiesDef"))

24. )

25.)

Grid

answered on 18 Jan 2017

1 answer

285 views

Footer refresh on edit / update

My ClientFooterTemplate / Aggregate data is not updating when I press the Edit / Update buttons. The row is successfully updated though.

How do I trigger this update OR what setting do I enable to get this automatically?

Grid

answered on 18 Jan 2017