or
1 answer
1.1K+ views
Hello,
I'm currently working on adding content to a ClientGroupHeaderTemplate and I run into some issues regarding aggregate functions and what type of logical expressions I can use within the template itself.
https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/templates/group-templates
I cannot seem to use if{}else{} statements as I normally do in Telerik component templates. And I was wondering if I could utilize a version of the aggregate functions but on other columns in the same group instead of the actual column, the group by is being done on.
For Example:
trip.Add().Text("New").Selected(true).Content(@<text>
<div class="row">
@(Html.Kendo().DataSource<OrderSearchBindingModel>().Name("newDataSource").Ajax(t =>
{
t.Read(read => read.Action("GetOrderSearch", "Fulfillment", new { status = "New"}));
t.PageSize(300);
t.ServerOperation(true);
t.Group(p => p.Add("KitControl", typeof(string)));
t.Aggregates(agg =>
{
agg.Add(field => field.InternalOrderId).Count();
});
t.Events(events => events.Error("error_ajax"));
}))
<div class="col-2">
@(Html.Kendo().Filter<OrderSearchBindingModel>()
.Name("newFilter")
.ApplyButton()
.ExpressionPreview()
.MainLogic(FilterCompositionLogicalOperator.Or).Fields(f =>
{
f.Add(p => p.InternalOrderId).Label("Internal Order ID");
f.Add(p => p.ExternalOrderId).Label("External Order ID");
f.Add(p => p.KitControl).Label("Kit Control");
f.Add(p => p.Department).Label("Department");
f.Add(p => p.WorkCenter).Label("Work Center");
}).FilterExpression(fe =>
{
fe.Add(p => p.InternalOrderId);
}).DataSource("newDataSource"))
</div>
<div class="col-9">
@(Html.Kendo().Grid<OrderSearchBindingModel>().Name("newOrderGrid").Columns(columns =>
{
columns.Bound(p => p.InternalOrderId).Width(95).ClientGroupHeaderColumnTemplate("Total Orders: #= sum #");
columns.Bound(oi => oi.ExternalOrderId).Width(110);
columns.Bound(p => p.CreatedDate).Format("{0:MM/dd/yyyy HH:mm tt}").Width(120);
columns.Bound(oi => oi.DueDate).Width(120);
columns.Bound(oi => oi.KitControl)
.ClientGroupHeaderTemplate("#= value != null ? value : 'Non-Kitted' || value != ' ' ? value : 'Non-Kitted' || value != undefined ? value : 'Non-Kitted' # <button type='button' class='manifest-btn btn btn-sm btn-info d-inline'>Manifest</button>").Width(190);
columns.Bound(oi => oi.Department).Width(95);
columns.Bound(oi => oi.WorkCenter).Width(95);
columns.Command(command =>
{
command.Custom("View").Click("order_view").HtmlAttributes(new{@class="btn btn-sm btn-info d-block text-white"});
command.Custom("Packing Slip").Click("order_packing_slip").HtmlAttributes(new { @class = "btn btn-sm btn-info d-block text-white" });
command.Custom("Pick Ticket").Click("order_pick_ticket").HtmlAttributes(new { @class = "btn btn-sm btn-info d-block text-white" });
command.Custom("Reprint").Click("order_reprint").HtmlAttributes(new { @class = "btn btn-sm btn-info d-block text-white" });
}).Width(125);
}).ClientDetailTemplateId("order-detail")
.HtmlAttributes(new {style = "height: 750px"})
.Scrollable()
.Groupable()
.Filterable()
.Resizable(r => r.Columns(true))
.Sortable()
.Pageable()
.Events(events => events.DataBound("on_bound"))
.DataSource("newDataSource"))
</div>
</div>I cannot even get the evaluation correct with the current group header template to replace empty text with a "No Kit Control" placeholder it just shows up empty still. As well as the Aggregate of the internal order id not showing up in the header as well, that is something I made an attempt at but I couldn't seem to get a reference to work properly in the ClientGroupHeaderTemplate.
I had attempted to apply some if{}else{} conditional logic to not display the KitControl Manifest button however that would just give me script/tag errors on page render.
Is there a more comprehensive description of the template capabilities I am missing? Or am I just trying to push this template too far?
Eyup
Telerik team
answered
on
24 Aug 2021
1 answer
350 views
I have two password fields on a form. I have used your demo way to change there editor to password boxes. If I validate in the controller and pass back an error message indicating they need to match the error message is not displayed. How do I correct this. I am open to preventing the submit with a little javascript validation so it never goes to the server. Please Advise.
i.Add()
.Field(f => f.Password)
.EditorTemplateHandler("setPasswordEditor")
.Label(l => l.Text("Password:"));
i.Add()
.Field(f => f.ConfirmPassword)
.EditorTemplateHandler("setConfirmPasswordEditor")
.Label(l => l.Text("Confirm Password:"));
function setPasswordEditor(container, options) {
container.append($("<input type='password' class='k-textbox k-valid' id='Password' name='Password' title='Password' required='required' autocomplete='off' aria-labelledby='Password-form-label' data-bind='value:Password' aria-describedby='Password-form-hint'>"));
}
function setConfirmPasswordEditor(container, options) {
container.append($("<input type='password' class='k-textbox k-valid' id='ConfirmPassword' name='ConfirmPassword' title='Confirm Password' required='required' autocomplete='off' aria-labelledby='Password-form-label' data-bind='value:ConfirmPassword' aria-describedby='Password-form-hint'>"));
}
if (model.Password!=model.ConfirmPassword)
{
ModelState.AddModelError("Password", "Passwords Must Match");
ModelState.AddModelError("ConfirmPassword", "Passwords Must Match");
return View("UserEditView",model);
}
Eyup
Telerik team
answered
on
24 Aug 2021
1 answer
425 views
Is there a way I can affect the text color for the checked state of the switch without hacking the theme. through htmlattributes or something like that. I want in in one place not globally.
Petar
Telerik team
answered
on
24 Aug 2021
1 answer
617 views
Hello,
I have a Kendo grid with multiple columns, and only one of the columns has .Filterable(true). When the filter icon above this column is clicked, a custom filter menu pops up. This menu has fields to set the filter data for multiple columns all at once, and then a "Filter" button which sets the datasource filter data to these specifications.
This filtering is working correctly, however the issue is, when going to another page in the results, the column with .Filterable(true) has its filter data removed from the request that is sent to the Controller. All other columns have their filter data persisted across the pages, just not the one with .Filterable(true). This is the case for whichever column is given this attribute.
For example, if I have Column2 set to .Filterable(true), then filter Column2's data and click "Filter", the correct filtered results are populated in the grid. But after clicking to another page of the results, the results reset and no longer filter Column2's data. It also stays like this when clicking back to page 1.
When looking at the DataSourceRequest object passed to the Controller method that gets the grid results, I can see the filter data for this column is there after clicking the "Filter" button. But after clicking to another page in the results, the request object sent to the Controller method no longer has this column included in its filter data.
Any idea why this is happening or how to resolve?
I've included some code for the grid, the custom filter menu function, and the controller method. Please let me know if anything else is needed, thank you.
.cshtml Grid Code
@(Html.Kendo().Grid<Model>()
.Name("MyGrid")
.HtmlAttributes(new { style = "height: 400px;font-size:12px;" })
.Columns(columns =>
{
columns.Bound(m => m.Column1).Title("Column1").Width(90).Filterable(false);
columns.Bound(m => m.Column2).Title("Column2").Width(90).Filterable(true);
columns.Bound(m => m.Column3).Title("Column3").Width(90).Filterable(false);
. . .
})
.Sortable()
.AutoBind(false)
.Pageable(p => p
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Scrollable()
.Filterable(f => f
.Mode(GridFilterMode.Menu)
)
.Events(e => e
.FilterMenuInit("OnFilterMenuInit")
)
.Resizable(rs => rs.Columns(true))
.Navigatable()
.Selectable(s => s
.Mode(GridSelectionMode.Single)
.Type(GridSelectionType.Row))
.NoRecords("No Records!")
.DataSource(ds => ds
.Ajax()
.Model(m=> m.Id(p => p.id))
.PageSize(10)
.Read(read => read.Action("GetData", "Test").Data("{arg1: " + 1 + ", arg2:'testarg'}"))
.Update(upd => upd.Action("EditData", "Test"))
.Events(e => e.RequestEnd("onRequestEnd").Error("error_handler"))
.ServerOperation(true))
.js OnFilterMenuInit function:
function OnFilterMenuInit(e) {
e.container
.empty()
.append($('<div class="row"><div class="col-md-2"><span>Column1: </span></div><div class="col-md-1"><input id="col1-operators" /></div><div class="col-md-4"><input id="col1-tb" class="k-textbox" /></div><div class="col-md-1"><input id="col1-logic" /> </div> </div>\
<div class="row"><div class="col-md-2"><span>Column2: </span></div><div class="col-md-1"><input id="col2-operators" /></div><div class="col-md-4"><input id="col2-tb" class="k-textbox" /></div><div class="col-md-1"><input id="col2-logic" /> </div> </div>\
<div class="row"><div class="col-md-2"><span>Column3: </span></div><div class="col-md-1"><input id="col3-operators" /></div><div class="col-md-4"><input id="col3-tb" class="k-textbox" /></div><div class="col-md-1"><input id="col3-logic" /> </div> </div>\
<div class="row"><div class="col-md-4"> <button type="submit" class="k-button k-primary" id="filter">Filter</button> </div><div class="col-md-4"><button type="reset" class="k-button" id="clear">Clear</button></div></div>'));
$('#filter').kendoButton({
click: function () {
var col1 = $('#col1-tb').val();
var col2 = $('#col2-tb').val();
var col3 = $('#col3-tb').val();
var col1Ops = $('#col1-operators').value();
var col2Ops = $('#col2-operators').value();
var col3Ops = $('#col3-operators').value();
var col1Logic = $('#col1-logic').value();
var col2Logic = $('#col2-logic').value();
var col3Logic = $('#col3-logic').value();
var orfilter = { logic: "or", filters: [] };
var andfilter = { logic: "and", filters: [] };
if (col1 != "") {
if (col1Logic == 'and') {
andfilter.filters.push({ field: "Column1", operator: col1Ops, value: col1 })
}
else {
orfilter.filters.push({ field: "Column1", operator: col1Ops, value: col1 })
}
}
if (col2 != "") {
if (col2Logic == 'and') {
andfilter.filters.push({ field: "Column2", operator: col2Ops, value: col2 })
}
else {
orfilter.filters.push({ field: "Column2", operator: col2Ops, value: col2 })
}
}
if (col3 != "") {
if (col3Logic == 'and') {
andfilter.filters.push({ field: "Column3", operator: col3Ops, value: col3 })
}
else {
orfilter.filters.push({ field: "Column3", operator: col3Ops, value: col3 })
}
}
. . .
andfilter.filters.push(orfilter);
orfilter = { logic: "or", filters: [] };
e.sender.dataSource.filter(andfilter);
localStorage["kendo-grid-filter"] = kendo.stringify(e.sender.dataSource.filter().filters);
}
});
$('#clear').kendoButton({
click: function () {
e.sender.dataSource.filter({});
localStorage["kendo-grid-filter"] = kendo.stringify({});
}
})
}
.cs TestController GetData Method
public ActionResult GetData([DataSourceRequest]DataSourceRequest request, int? arg1, string arg2, bool arg3 = false, bool arg4 = false){
DAL dal = new DAL();
var result = dal.GetDataDAL(request, arg1, arg2, arg3);
return Json(result, JsonRequestBehavior.AllowGet);
}
1 answer
215 views
Hello, is it possible to open a selected document into the editor ? I'm looking to open a document into the editor when the editor loads up. I have gone through the demos and saw its possible to import a file to the editor, however I'm looking for the editor to open up a document selected in the controller.
Thank you
Anisha
Eyup
Telerik team
answered
on
20 Aug 2021
1 answer
2.1K+ views
im using trying to use a multiselect dropdownlist in my grid.. I'm getting error as Typeerror: cannot read property Text of null.
Grid:
@(Html.Kendo().Grid().Name("EmployeesGrid").Columns(columns => {
columns.Bound(e => e.FirstName).Title("First Name");
columns.Bound(e => e.LastName).Title("Last Name");
columns.Bound(e => e.CompanyId).EditorTemplateName("CompaniesList").Title("Company").ClientTemplate("#:CompanyName#");
columns.Command(command =>{
command.Edit();
}
);
}
).ToolBar(toolbar => toolbar.Create()).
Editable(editable => editable.Mode(GridEditMode.InLine)).
DataSource(dataSource => dataSource.Ajax().Events(events => events.Error("error_handler")).
Model(model => model.Id(e => e.Id)).
Create(update => update.Action("CreateEmployee","Home")).
Read(read => read.Action("ReadEmployees","Home")).
Update(update => update.Action("UpdateEmployees","Home"))))
After i select the values in the drop-down. im not able to see the values in the field... Need help with this
Petar
Telerik team
answered
on
18 Aug 2021
1 answer
126 views
Is it possible to right align text in this editor
Petar
Telerik team
answered
on
17 Aug 2021
1 answer
217 views
Hi there,
Is the recommended way of dealing with encoded HTML in grid cells being sent back to the controller still using [ValidateInput(false)] on the controller as per this forum post html encode in UI for ASP.NET MVC | Telerik Forums ?
Thank you,
Mike Kingscott
Eyup
Telerik team
answered
on
16 Aug 2021
1 answer
136 views
Hello,
We plan to use kendo UI bar chart for our MVC project to present our business logic. My question is how to handle long text on CategoryField? Is there any way to make label on different direction like brown colored lines on the bottom in below image? Thanks.
0 answers
107 views
I am using Telerik UI for ASP.NET MVC R2 2021 SP1 (2021.2.616) in VB.net, Visual Studio 2019
I have added a FileManager to an MVC view following the code in the Basic Usage demo (https://demos.telerik.com/aspnet-mvc/filemanager) and everything is working correctly, except when I try to implement the code for the New Folder button (Which fires the Create command on the DataSource).
@Html.Kendo().FileManager().Name(Model.ControllerName & "_FileManager").DataSource(Sub(ds)
ds.Read(Sub(r)
r.Type(HttpVerbs.Post).Action("Read", Model.ControllerName)
End Sub)
ds.Create(Sub(c)
c.Type(HttpVerbs.Post).Action("Create", Model.ControllerName)
End Sub)
ds.Update(Sub(u)
u.Type(HttpVerbs.Post).Action("Update", Model.ControllerName)
End Sub)
End Sub).Upload(Sub(u)
u.Validation(Sub(v)
v.AllowedExtensions(Model.AllowedFileExtensions)
End Sub)
End Sub).UploadUrl("Upload", Model.ControllerName).Toolbar(Sub(t)
t.Items(Sub(i)
i.Add("createFolder")
i.Add("upload")
i.Add("sortDirection")
i.Add("sortField")
i.Add("spacer")
i.Add("search")
End Sub)
End Sub).InitialView("grid").ContextMenu(Sub(c)
c.Items(Sub(i)
i.Add("download").Command(Model.ControllerName & "DownloadCommand").Text("Download").SpriteCssClass("k-icon k-i-download")
End Sub)
End Sub)On the demo page, if you have the developer tab open to the Network, when clicking the New Folder button you can see the request that is sent to the url defined in the Create endpoint and it contains the target path as well as the data for a FileManagerEntry object for the New Folder in the Form Data:
When I click the button in my FileManager view I can see the Form Data only includes the target property but none of the others:
Here is the code for the Create function in my Controller (it's almost identical to the demo code):
Public Function Create(ByVal target As String, ByVal entry As FileManagerEntry) As ActionResult
Dim newEntry As FileManagerEntry
If String.IsNullOrEmpty(entry.Path) Then
newEntry = CreateNewFolder(target, entry)
End If
Return Json(VirtualizePath(newEntry))
End FunctionI have not been able to figure out why the FileManager in my view is not returning the same data to the controller that the demo one does.
Any help would be greatly appreciated.
Cary
Top achievements
Rank 1
Rank 1
asked
on
13 Aug 2021
