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.
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
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.
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
>
</
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
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.
)
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?
Hello,
I am using a date picker and have some code in the change event that I would like to fire when a date is entered into the input box. I have found that the change event is not fired when a date is typed into the input box with a 2 digit year (17 vs 2017). Your DatePicker/Events demo (http://demos.telerik.com/aspnet-mvc/datepicker/events) shows this behavior also. Type in "1/1/2017" and the change event fires, clear out the box and the change event fires, type in "1/1/17" and the change event does not fire.
Is there something I can do to make the change event fire when a date with a 2 digit year is entered?
Thanks,
Bryan Smouse
Hi,
In one scenario, I used a javascript Ajax call to get data and then I constructed my sheet like this:
var sheet = spreadsheet.insertSheet({ rows: total });
sheet.setDataSource(data);
This way, the columns and rows are constructed by following the format defined in the JSON in data.
Now ... see the attached screenshot. Is it even remotely possible to get a following excel layout using the approach above? I can re-construct the layout without loading data, but in an ideal world, the user would get a spreadsheet without data (but containing the columns layout), and then using some filters outside the spreadsheet, x-number of columns (with the salmon background) would be added. Customers, etc (with green background) would be added.
Is there an alternative to setDataSource to bind data to a starting cell/row, etc.
Thanks,
Nicolas
I am not sure if this is a KendoWindow problem or a KendoDropDownList
problem, so I will post in both forums.
My Problem:
I have 2 DropDownLists; 'Code' and 'Rule'. 'Rule' cascades
from 'Code'. These are both located in a modal KendoWindow.
If I have my controller return a PartialView, the second
DropDownList does not even appear as a DropDownList, but as a textbox
(Image1.jpg).
If I return a regular view, then both of the DropDownLists
appear as they should (Image2.jpg), but then I get all of the stuff on the top
of the popup that I do not want or need.
Code for my first DropDownList:
@(Html.Kendo().DropDownListFor(model => model.IncidentCategoryCode) //DropDownList for CODE
.HtmlAttributes(new { id = "incidentCategoryCode", style = "width: 99%;", @class = "large-links" })
.DataTextField("IncidentCategoryCode")
.DataValueField("IncidentCategoryCode")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetIncidentCategories", "IncidentCategory");
});
})
)
Code for my second DropDownList:
@(Html.Kendo().DropDownListFor(model => model.ViolationCategoryNumber) //DropDownList for RULE
.HtmlAttributes(new { id = "violationCategoryNumber", style = "width: 99%;", @class = "large-links" })
.DataTextField("ViolationCategoryNumber")
.DataValueField("ViolationCategoryNumber")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetIncidentViolations", "IncidentViolation").Data("filterCreateIncidentViolation");
})
.ServerFiltering(true);
})
.CascadeFrom("incidentCategoryCode")
.CascadeFromField("IncidentCategoryCode")
)
Code for my filter:
function
filterCreateIncidentViolation() {
return
{
code: $(
"#incidentCategoryCode"
).val(),
incidentViolationCodeFilter: $(
"#violationCategoryNumber"
).data(
"kendoDropDownList"
).value()
};
}
Any ideas on this would be greatly appreciated,
Bob Mathis