Questions on UI for ASP.NET MVC Forum

2 answers

205 views

[Solved] Hide group on filter change doesn't work

Hello

I have a scheduler that I'm grouping on a resource; rooms. When I filter the scheduler on rooms, I want to hide the groups of rooms that are not selected in the filter.
I have looked at this example, but I don't get it to work. The filering part works as intended, but not the hiding of the filtered rooms. I will post, what I think is all relevant parts of my code. If you need more info please ask me to provide it. (IE Alex, Bob and Charlie from the link are the corresponding entities to my rooms)

First, the grouping and resource binding part of the scheduler:

.Group(group => { group.Resources("Room"); })

.Resources(resource => resource.Add(m => m.roomId)

.Title("Room")

.Name("Room")

.DataTextField("name")

.DataValueField("id")

.DataColorField("Color")

.DataSource(ds => ds.Read("GetRooms", "Home")))

Then the function for viewing only selected rooms:

function viewRoom() {

var checked = $.map($("#factories :checked"), function (dropdown) {

return parseInt($(dropdown).val());

});

var filter = {

logic: "or",

filters: $.map(checked, function (value) {

return {

operator: "eq",

field: "roomId",

value: value

};

})

};

var scheduler = $("#scheduler").data("kendoScheduler");

scheduler.dataSource.filter(filter);

scheduler.view(scheduler.view().name);

}

From what I understand this row should update the view with only the selected rooms visibible in the scheduler, but it doesn't:

scheduler.view(scheduler.view().name);

Can anyone see what I'm doing wrong?

BR
Jonas

Scheduler

answered on 02 Feb 2017

3 answers

407 views

[Solved] Custom validator not working the way I expected

Hello,

I've a custom validator that is validating a custom popup editor template in a grid.

The problem I'm facing is that when I set a value in a NumericTextBoxFor() field and the validator fails (return false) then the value isn't written in the popup editor's model so when I write in the same field the value I had previously written the validator's message isn't hidden.

Example:

I write "24" in the field. (the validator returns true and the model contains "24")
I write "-1" in the field. (the validator returns false and the model still contains "24"). I think this is the problem, even when the validator returns false the model must be updated with "-1" but instead it ignores the new value so the model still contains "24". At this point the validator's message is shown.
I write again "24" in the field. (the validator returns true but the model already contained "24") so the validator's message isn't hidden even when "24" is a valid value
I write another value valid for the validator. (the validator returns true and the model contains the new value). At this point the validator's message is hidden.

How can I solve this problem?

Thank you.

Grid

answered on 02 Feb 2017

1 answer

115 views

Vs2015 Hilights errors, but...

I have a grid that is suddenly showing errors in VS2015, but the code compiles and runs exactly as expected. I've included a screenshot... The error isn't all that helpful really, saying the data type cannot be inferred... Could someone tell me what I can do to resolve these errors? Again, they're not really errors since the grid runs as expected when the app is deployed.

The class the grid is using:

public class UploadedDocument

{

public UploadedDocument();

public string CaseId { get; set; }

public string ClientId { get; set; }

public string DocketNumber { get; set; }

public int DocumentSource { get; set; }

public virtual DocumentSource DocumentSource1 { get; set; }

public string EmployeeId { get; set; }

public string FirstName { get; set; }

public int Id { get; set; }

public string LastName { get; set; }

public bool Matched { get; set; }

public string Name { get; set; }

public DateTime OrderDate { get; set; }

public string SSN { get; set; }

public string Type { get; set; }

public DateTime UploadDate { get; set; }

}

I'm not using any data annotations because the class in question is a generated POCO. The other odd thing is that these weren't highlighting as errors earlier in the day... Since it compiles, I guess it's not a big deal, but I'm wary of them...

Grid

answered on 01 Feb 2017

1 answer

200 views

Column Headers Visible

How do make the column headers always visible (frozen)? Thx!

Grid

answered on 01 Feb 2017

3 answers

881 views

Kendo Grid Events & External .Js file(s)

Good afternoon all,

Please see the following code:

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

.Name("nameOfMyGridHere")

.Columns(columns =>

{

columns.Bound(c => c.Title).Width(75);

columns.Bound(c => c.Category).Width(100);

})

.Selectable(selectable => selectable

.Mode(GridSelectionMode.Single))

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("read_method_here", "name_of_controller_here"))

.PageSize(20))

.Events(e => e.Change("modal"))

.HtmlAttributes(new { style = "height:550px;width:100%;" })

)

Currently I have a script tags in my razor view. I need them to be gone, as the functions contained therein can be used by more than just one page. If I move the .Js function "modal" to another file, the function no longer fires. I have to keep the .Js code in the same file as the grid. How do I move the function(s) out to an external file so that I can make use of bundling, and name-spacing.

Additionally, I am attempting to style a telerik modal, but I have seen 0 documentation on how this is done. Can someone point me to the location of the doc(s), or example(s)?

Thanks.

Grid

answered on 01 Feb 2017

1 answer

162 views

MVC Grid Scaffolding shows empty Models list

I have attached my project. I am trying to use MVC grid scaffolding to build grids quickly because of shorter project deadlines. I am trying a very simple scenario yet the scaffolding can't recognize my models.

Version : 2016.3.1118.545

I had to remove kendo files and dlls from TelerikMvcApp1.zip\TelerikMvcApp1\lib\KENDOUIMVC\2016.3.1118.545 because of size contraint.

Let me know if any questions

Grid

answered on 01 Feb 2017

7 answers

1.0K+ views

[Solved] Grid with a custom datasource executing code after e.success()

Hello,

I've a grid with a custom datasource

01..DataSource(dataSource => dataSource

02. .Custom()

03. .Batch(true)

04. .Schema(s =>

05. s.Model(model =>

06. {

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

08. })

09. )

10. .Transport(new

11. {

12. read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "customRead" },

13. create = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "customCreate" },

14. update = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "customUpdate" },

15. destroy = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "customDestroy" },

16. })

17.)

It works as expected but I'm trying to build a grid which will send in ONLY ONE request all the created, updated and destroyed items to the server.

Out of the box the grid will send one request with all created items, another request with all updated items and another request with all destroyed items but searching here and there I got it working the way I need.

Now I'm facing only one problem and it's in the customUpdate and customDestroy handlers. Here's the customUpdate handler

1.function customUpdate(e) {

2. e.success();

3.}

Basically what I'm saying is: when the user update or destroy a row DOES NOTHING. I'll do all the updates when the user click a custom save button I've implemented.

The problem is that after the e.success() method is called the datasource remove the state of the row (updated, destroyed) so this is what I need:

Is it possible to execute some code right away after the whole code inside e.success() finished?

PD: I've realized that when e.success() call is finished the status of the rows isn't changed yet (updated, destroyed) so I need to be able to execute some code after the whole code inside e.success() is executed.

Thank you.

Grid

answered on 01 Feb 2017

1 answer

4.9K+ views

Scrollable height auto with min-height

Hi,

When I set the grid scrollable auto, the grid content div height style is not auto and overwrite the min-height value specified in css. Why?

<style>

.k-grid-content {

min-height: 200px;

max-height: 400px;

height:auto !important;

}

</style>

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

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

)

Grid

answered on 01 Feb 2017

1 answer

448 views

Non-Editable field still editable in popup

I have a grid where I have several fields set as non-editable, but when the popup editor displays, those fields are included in the popup editor, and are in fact editable. How can I disable the editing of certain fields wfor the popup editor? I'm already setting it to false in the Model definition.

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

.Name("docResults")

.TableHtmlAttributes(new { @class = "table-condensed" })

.Columns(cols =>

{

cols.Bound(c => c.Id).Width(35).ClientTemplate("<input type=\"checkbox\" />");

cols.Bound(c => c.DocketNumber);

cols.Bound(c => c.CaseId);

cols.Bound(c => c.Type);

cols.Bound(c => c.ClientId);

cols.Bound(c => c.EmployeeId);

cols.Bound(c => c.SSN);

cols.Bound(c => c.LastName);

cols.Bound(c => c.FirstName);

cols.Bound(c => c.Name).Title("Document");

cols.Command(c => c.Edit());

})

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

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

.Sortable()

.Pageable(p => p

.Refresh(true)

.PageSizes(new List<object> { 10, 20, 30, 40, 50, "all" })

.ButtonCount(10))

.Filterable(f => f.Enabled(true))

.Events(ev => ev.DataBound("gridBound"))

.AutoBind(true)

.DataSource(ds => ds

.Ajax()

.PageSize(20)

.ServerOperation(false)

.Model(m =>

{

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

m.Field(d => d.DocketNumber);

m.Field(d => d.CaseId);

m.Field(d => d.Type);

m.Field(d => d.ClientId);

m.Field(d => d.EmployeeId);

m.Field(d => d.SSN);

m.Field(d => d.LastName);

m.Field(d => d.FirstName);

m.Field(d => d.Name).Editable(false);

})

.Read(r => r.Action("GetSearchResults", "Document",

new { docketNumber = @Model.DocketNumber,

ssnNumber = @Model.SSNNumber,

lastName = @Model.LastName,

firstName = @Model.FirstName,

caseID = @Model.CaseId,

garnishType = @Model.GarnishType,

clientID = @Model.ClientId }).Type(HttpVerbs.Get))

.Update(u => u.Action("EditInline", "Document"))

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

)

.ToolBar(tb => tb.Custom().Text("Clear Filter").HtmlAttributes(new { id = "gridFilterReset", style = "float:right;" }))

.Editable(e => e.Mode(GridEditMode.PopUp))

)

I have the Name field set as not being editable, but in the popup I can still edit it... I'd actually prefer the non-editable fields to not even show up in the popup edit screen. Is there a way to do this?

Grid

answered on 31 Jan 2017

2 answers

2.0K+ views

Update read.Action() from jQuery

Hello,

I have a grid showing information for an agency and everything works fine! Now, the user would like to change the grid from a drop down list. Essentially, I would like to call my stored proc, using jQuery, and pass the parameter selected from the drop down to update the grid. I may be going at this all wrong. Please help!

View:

@model IEnumerable<CentralBilling.Models.CentralBillingEntities>
@{
ViewBag.Title = "View";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="center">
<h3><u>Agent View</u></h3>
</div><br />

<div>
@(Html.Kendo().DropDownList()
.Name("ddlAgency")
.Events(e => e.Change(""))
.BindTo(new List<SelectListItem>()
{
new SelectListItem() { Text = "" },
new SelectListItem() { Text = "250-Louisville", Value = "U00250" },
new SelectListItem() { Text = "590-OKC", Value = "U00590"},
}

))
</div>
<div>

@(Html.Kendo().Grid<CentralBilling.Models.GetAgentViewInfo_Result>()
.Name("gridAgent")
.DataSource(datasource => datasource
.Ajax()
.Read(read => read.Action("AgentIndex", "Agent"))) //, new { controller = "Agent", id = }
.Columns(columns =>
{

//columns.Bound(o => o.Order_Number).Width("150px").Template(@<text></text>).ClientTemplate("<a href='" + Url.Action("GetOrderDetail", "Detail") + "/#= Full_Order_Number #'" + ">#= Full_Order_Number #</a>");

columns.Bound(o => o.Req).Width("130px").Title("Request Submission").Template(
@<text>
@Html.ActionLink("GetAgentDetail", "Agent", new { controller = "Agent", id = item.Full_Order_Number })
</text>
).ClientTemplate(@"<a href=/Agent/GetAgentDetail?id=#= Full_Order_Number #>#= Req #</a>");

columns.Bound(o => o.Master_OrderNum).Width("150px");
columns.Bound(o => o.Shipper).Width("175px");
columns.Bound(o => o.aom_shipment_type).Title("MoveType").Width("100px");
columns.Bound(o => o.AccountHeader).Width("150px");
columns.Bound(o => o.EarlyLoadDate).Format("{0:MM/dd/yyyy}").Width("135px");
columns.Bound(o => o.Date_Delv_Act).Format("{0:MM/dd/yyyy}").Width("135px");
columns.Bound(o => o.Book_Agent).Width("135px");
columns.Bound(o => o.Haul_Agent).Width("135px");
columns.Bound(o => o.Org_Agent).Width("135px");
columns.Bound(o => o.Dest_Agent).Width("135px");
})

.HtmlAttributes(new { style = "height: 550px" })
.Resizable(resize => resize.Columns(true))
.Sortable()
.Scrollable()
.Filterable()
)

</div>

<script type="text/javascript">
$(document).ready(function () {
$("#AgentIndex").click(function () {
var ddlAgency = $("#ddlAgency").val();
$.post('/Proposals/AddFundingSource', { id: ddlAgency }, function (data) {
onDataUpdated();
});
});
});
function onDataUpdated() {
var grid = $("#gridAgent").data("kendoGrid");
grid.dataSource.read();
}
</script>

This is where the proc is called:

public ActionResult AgentIndex([DataSourceRequest] DataSourceRequest request) //Add a string var and remove hardcoded agency number
{

using (var CB = new CentralBillingEntities())
{
var result = CB.GetAgentViewInfo("U00250").ToList();
return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

}

General Discussions

answered on 31 Jan 2017