Questions on UI for ASP.NET MVC Forum

1 answer

83 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

136 views

Column Headers Visible

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

Grid

answered on 01 Feb 2017

3 answers

772 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

123 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

982 views

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.7K+ 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

390 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

1.9K+ 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

4 answers

861 views

Need help creating two kendo validators in the same view

Hello,

I've a view with one Form and one Kendo Grid like this

01.<div>

02. <form id="form1">

03. </form>

04.</div>

05.

06.<div>

07. @(Html.Kendo().Grid<ProductsModel>()

08. .Name("grid")

09. .....

10. )

11.</div>

The grid is using a custom popup editor's template like this

1.<form id="gridEditorTemplate">

2. ....

3.</form>

I've defined a kendo validator for the form1 in this way

01.var validator1 = $("#form1").kendoValidator({

02. rules: {

03. customRule1: function (input) {

04. // all of the input must have a value

05. return $.trim(input.val()) !== "";

06. },

07. },

08. messages: {

09. customRule1: "All fields are required",

10. }

11.}).data("kendoValidator");

This validator work in the way I expected but when I define a new validator like this one for the gridEditorTemplate the custom rule isn't called by the grid when the user click the Update button.

However if I declare the custom rule for the popup editor like this

01.(function ($, kendo) {

02. $.extend(true, kendo.ui.validator, {

03. rules: {

04. positive: function (input) {

05. if (input.attr("id") === "xx") {

06. var val = input.val();

07. if (val !== "") {

08. return val > 0;

09. }

10. }

11. return true;

12. }

13. },

14. messages: {

15. positive: function (input) {

16. return "positive";

17. }

18. }

19. });

20.})(jQuery, kendo);

it works as expected.

The problem with this approach is that when I call validate() for the form1 like this validator1.validate() the rules defined in the popup editor's validator are analyzed too.

What I need is to define a validator for the popup editor's template in such a way that when I call validator1.validate() it doesn't analyze the rules defined in the popup editor's template.

Thank you.

Grid

answered on 31 Jan 2017

7 answers

111 views

Using a ViewModel, RESTful API, and Grid Inline Editing

I have a form which a user fills in and submits to perform a search. This request is then set to a RESTful WebAPI service, and receives a list of UploadedDocuments. The user is then re-directed to a new view showing those results in a grid using a ViewModel:

public ActionResult DocumentSearch(string docketNumber, string ssnNumber, string lastName, string firstName, string caseID, string garnishType, string clientId)

{

GarnishmentDocumentSearch docSearch = new GarnishmentDocumentSearch()

{

DocketNumber = docketNumber,

SSNNumber = ssnNumber,

LastName = lastName,

FirstName = firstName,

CaseID = caseID,

GarnishType = garnishType,

ClientId = clientId

};

// send the new document link to the service layer, for saving to the DB

List<UploadedDocument> response = WebApiHelper.CallPostAPI<List<UploadedDocument>, GarnishmentDocumentSearch>($"{_baseURL}/api/Garnishments/DocumentSearch", docSearch);

return View("DocumentResults", response);

}

The results are populated in the grid ok, but now I want to also support inline editing. However, my Edit button doesn;t seem to do anything. I have tried both GridEditMode.Inline and GridEditMode.PopUp. I have added an appropriate Update() to the grid.

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

.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.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"))

.DataSource(ds => ds

.Ajax()

.PageSize(20)

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

// .ServerOperation(false)

.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 ))

)

When I click the Edit button when using PopUp, a popup screen does display very quickly, but then it just disappears. So how can I enable editing in the grid (I'd prefer to use the PopUp method) while using a ViewModel that's been pushed to the View versus having the grid pull the data? Is it even possible?

Grid

answered on 31 Jan 2017