Questions on UI for ASP.NET MVC Forum

4 answers

1.3K+ views

Run Code After Filter/Sort When DataSource In Model

I need a way to run javascript code after a sort or a filter has been done. Unusually, the datasource is in the view model - not an ajax call to the server.

Here is my grid:

@(Html.Kendo().Grid(Model.TrunkGridData)
.Name("TrunkSummaryGrid")
.Columns(columns =>
{
columns.Bound(c => c.DepotNumber).Title("Depot").Sortable(true);
columns.Bound(c => c.TrunkName).Title("Trunk").Sortable(true);
columns.Bound(c => c.TipType).Title("Tip / Load").Sortable(true);
columns.Bound(c => c.ArrivalTimeExpected).Title("Booked Arrival").Sortable(true);
columns.Bound(c => c.ArrivalTimeActual).Title("Actual Arrival").Sortable(true);
columns.Bound(c => c.DepartureTimeExpected).Title("Booked Departure").Sortable(true);
columns.Bound(c => c.DepartureTimeActual).Title("Actual Departure").Sortable(true);
})
.Filterable()
.Sortable()
.Scrollable()
.Selectable()
.HtmlAttributes(new { style = "height:700px;" })
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.FileName("TrunkSummary.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Grid"))
)
.DataSource(dataSource => dataSource
.Custom()
.ServerFiltering(false)
.ServerSorting(false)
.Schema(schema => schema
.Model(model =>
{
model.Id("TrunkRouteID");
model.Field("DepotNumber", typeof(string));
model.Field("TrunkName", typeof(string));
model.Field("TipType", typeof(string));
model.Field("ArrivalTimeExpected", typeof(string));
model.Field("ArrivalTimeActual", typeof(string));
model.Field("DepartureTimeExpected", typeof(string));
model.Field("DepartureTimeActual", typeof(string));
model.Field("IsLate", typeof(bool));
model.Field("IsThirtyMinutesLate", typeof(bool));
model.Field("ArrivalMinsLate", typeof(double));
model.Field("DepartureMinsLate", typeof(double));
model.Field("TrunkRouteID", typeof(int));
})
)
)
)

Grid

answered on 12 Jun 2017

1 answer

308 views

Pass complex object parameter to MVC Controller from Kendo Grid DataSource

Hello,

We have a Kendo MVC grid in a Partial View. The grid may have several thousand records (with 30 columns) so we went with using Ajax and server processing. The DataSource calls a js function to return parameters. It looks like this (abbreviated version):

@(Html.Kendo().Grid<GroundWater.Models.GroundWaterSearchResult>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.well_id).Title("Well ID").Width(75).Hidden(true).HtmlAttributes(new { style = "text-align: right;" });
columns.Bound(p => p.Well_Name).Title("Well Name").Width(105).Locked(true);
columns.Bound(p => p.Permit).Title("PermitNo").Width(90);
columns.Bound(p => p.Well_Depth).Title("Well Depth").Width(64).HtmlAttributes(new { style = "text-align: right;" });
columns.Bound(p => p.Measurement_By).Title("Measurement By").Width(111);
columns.Bound(p => p.POR_Start).Title("POR Start").Width(81).Format("{0:M/d/yyyy}").HtmlAttributes(new { style = "text-align: center;" });
columns.Bound(p => p.POR_End).Title("POR End").Width(77).Format("{0:M/d/yyyy}").HtmlAttributes(new { style = "text-align: center;" });
columns.Bound(p => p.POR_count).Title("POR Count").Width(66).HtmlAttributes(new { style = "text-align: right;" });
columns.Bound(p => p.publication_name).Title("Publication Name").Width(93);
columns.Bound(p => p.Receipt).Title("Receipt").Width(71);
columns.Bound(p => p.wdid).Title("WDID").Width(65);
columns.Bound(p => p.County).Title("County").Width(69);
columns.Bound(p => p.basin).Title("Designated Basin").Width(91).HtmlAttributes(new { style = "text-align: right;" });
columns.Bound(p => p.Management_District).Title("Management District").Width(91);
columns.Bound(p => p.Modified).Title("Modified").Width(79).Format("{0:M/d/yyyy}").HtmlAttributes(new { style = "text-align: center;" });
})
.Pageable(pager => pager
.PageSizes(true)
.PageSizes(new int[] { 10, 20, 50, 100 }))
.Sortable(sorting => sorting.AllowUnsort(false))
.Scrollable(scroll => scroll.Height(500))
.Filterable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorderable => reorderable.Columns(true))
.ColumnMenu()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Wells_Read", "GroundWaterSearch").Data("filterData"))
.ServerOperation(true)
.PageSize(50)
)
)
<script>
function filterData() {
return {
Publication: document.getElementById('publicationArea').value
//WellName: document.getElementById('wellname').value,
//StartDate: document.getElementById('startdate').value,
//EndDate: document.getElementById('enddate').value,
//ContrArea: document.getElementById('contributingarea').value,
//WaterDistrict: document.getElementById('waterdistrict').value
//........ up to 10 additional fields
};
}
</script>

And the Controller

public ActionResult Wells_Read([DataSourceRequest]DataSourceRequest request, string Publication)
{
List<List<string>> criteria = new List<List<string>>();
GetPublicationArea(Publication, criteria);
var tempCalls = CallMgrData.GetGroundWaterLevelsResult(criteria, 20000);
List<GroundWaterSearchResult> values = tempCalls.ResultSet.Select(x => ModelMapper.Map<CdssServiceReferences.GroundWater, GroundWaterSearchResult>(x)).ToList();
DataSourceResult result = values.ToDataSourceResult(request);
return Json(result);
}

Grid

answered on 12 Jun 2017

1 answer

128 views

Need help with dynamic grid

Hi, I'm using ASP.NET Core MVC and there's the following problem at hand:
Got 3 tables in my database:
1) Customers (Id, Type, ...)
2) Processes (Id, Name, ...)
3) CustomerProcessValues

The grid that will look like this:
Customer Process 1 Process 2 Process 3 .... Process N
TestCustomer 123 2345 4567 513
TestCustomer2 4656 0 123 2

Grid needs to be editable inline and save values (int) for each process for each customer to CustomerProcessValues table.
Process list will be the "Process" database table filtered by a certain value and based on a customer type.

At this point I'm not quite sure where to start as I've never dealt with any dynamic grids before.
Would really appreciate any advice on how to begin.

Grid

answered on 12 Jun 2017

2 answers

367 views

Responsive Grid

My main concern is having the page display correctly on differently sized desktop and laptop monitors. It's not a mobile accessed application as it's intranet.

My grid columns width resize fine however I'm not able to resize the height when the browser window height is reduced.

I'm unable to reproduce the behaviour in this fiddle: http://jsfiddle.net/dimodi/4eNu4/2/ which I read about here in this thread.

I've watched the responsive video and tried a variety of techniques without luck. I understand that I need to subscribe to the window resize event, which I believe that I'm doing below. I'm not sure what I need to specify on the grid that I'm not currently (I've tried a variety of heights, 100% and fixed px without luck). I'm using ajax and the fiddle shows a server control - but I don't think that matters.

My scripts in the _layout.cshtml are as follows: (duplicates got inserted at some point ? )

The code I'm using is below:

        $(window).on('resize', function () {
            var grid = $("#PartsHistory").data("kendoGrid");
            grid.resize();
            //or, kendo.resize($('.chart-wrapper'));
        });

    </script>

    @(Html.Kendo().Grid<KendoUI.Sasco.Dashboard.Models.PartsHistoryViewModel>()
      .Name("PartsHistory")
      .HtmlAttributes(new { style = "width: 100%; height: 100%; border: 0;" })
      .AutoBind(true)
      .NoRecords()
      .Columns(columns =>
      {
          columns.Bound(c => c.Month);
          columns.Bound(c => c.SalesVolume).Title("Sales Volume");
          columns.Bound(c => c.SalesAmount).Title("Sales Amount").Format("{0:c0}");
          columns.Bound(c => c.Unit).Hidden();
          columns.Bound(c => c.PPH).Title("Price per 100").Format("{0:c2}");
      })
     .ToolBar(toolbar =>
     {
         toolbar.Excel();
         toolbar.Pdf();
     })

      .Excel(excel => excel
           .AllPages(true)
           .FileName("Part History.xlsx")
       )
      .Pdf(pdf => pdf
          .AllPages()
          .Margin("1cm", "1cm", "1cm", "1cm")
          .FileName("Part History.pdf")
        )
      .Selectable()
      .Scrollable()
      .Pageable()
      .Events(e => e
        .DataBound("onDataBound")
     )
      .Navigatable()
    //.Filterable(filterable => filterable.Mode(GridFilterMode.Row))

    .DataSource(dataSource => dataSource
      .Ajax()
      .PageSize(23)
      .ServerOperation(false)
      .Model(m =>
      {
          m.Field(f => f.Month);
          m.Field(f => f.SalesVolume);
          m.Field(f => f.SalesAmount);
          m.Field(f => f.Unit);
          m.Field(f => f.PPH);
      }) // pass data using onRead event
        .Read(read => read.Action("PartsHistory", "PartsHistory").Data("onRead"))
      )
    )

Thanks much,

Larry

Grid

answered on 12 Jun 2017

1 answer

118 views

After installing VS 2017

After I install a separate instance of VS 2017 what's the best way to see the telerik menu option and wizards?

They aren't showing when I open a new or pre-existing project.

I don't want to mess up anything by uninstalling and reinstalling MVC and other stuff.

Please advise on best approach.

Thanks,

Larry

Installer and VS Extensions

answered on 10 Jun 2017

3 answers

4.1K+ views

Another maxJsonLength Issue

Hello,

I have been researching solutions to this issue for some time now.

I am unable to rid myself of the error:

2016-04-06 14:27:24.0369, : Exception

(ControllerActionInvoker.InvokeExceptionFilters => HandlePageError.OnException => LSVLogger.LogException) System.InvalidOperationException: Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property.

at System.Web.Script.Serialization.JavaScriptSerializer.Serialize(Object obj, StringBuilder output, SerializationFormat serializationFormat)

at System.Web.Script.Serialization.JavaScriptSerializer.Serialize(Object obj, SerializationFormat serializationFormat)

at System.Web.Script.Serialization.JavaScriptSerializer.Serialize(Object obj)

at System.Web.Mvc.JsonResult.ExecuteResult(ControllerContext context)

at System.Web.Mvc.ControllerActionInvoker.InvokeActionResult(ControllerContext controllerContext, ActionResult actionResult)

at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilterRecursive(IList`1 filters, Int32 filterIndex, ResultExecutingContext preContext, ControllerContext controllerContext, ActionResult actionResult)

at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilterRecursive(IList`1 filters, Int32 filterIndex, ResultExecutingContext preContext, ControllerContext controllerContext, ActionResult actionResult)

at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultWithFilters(ControllerContext controllerContext, IList`1 filters, ActionResult actionResult)

at System.Web.Mvc.Async.AsyncControllerActionInvoker.<>c__DisplayClass21.<>c__DisplayClass2b.<BeginInvokeAction>b__1c()

at System.Web.Mvc.Async.AsyncControllerActionInvoker.<>c__DisplayClass21.<BeginInvokeAction>b__1e(IAsyncResult asyncResult)

I have tried many methods of trying to resolve this issue.

These include:

The solution outlined here: http://stackoverflow.com/questions/9943727/jsonmaxlength-exception-on-deserializing-large-json-objects whereby I add my own JsonValueProvider. This has not helped in my case.

I have tried the Web Config setting:

<system.web.extensions>

<scripting>

<webServices>

<jsonSerialization maxJsonLength="2147483644" />

</webServices>

</scripting>

</system.web.extensions>

This also does not work.

I have tried simply overriding my ajax read methods default values:

public ActionResult ExecuteQuery([DataSourceRequest] DataSourceRequest request, QueryRequestModel qParams)

{

DataTable queryResult = GetQueryData(qParams);

JsonResult jr = new JsonResult();

jr.MaxJsonLength = int.MaxValue;

jr.Data = queryResult.ToDataSourceResult(request);

using (FileStream fs = System.IO.File.Open(@"c:\LogFiles\ExecuteQuery1.json", FileMode.CreateNew))

using (StreamWriter sw = new StreamWriter(fs))

using (JsonWriter jw = new JsonTextWriter(sw))

{

jw.Formatting = Formatting.Indented;

JsonSerializer serializer = new JsonSerializer();

serializer.Serialize(jw, queryResult);

}

return Json(jr);

//return Json(queryResult.ToDataSourceResult(request));

}

This also does not work.

Due to what our users are wanting to see, We are not paging the data. While the volume of data we are attempting to display is large (~27000 rows) it should be able to support what we are delivering.

A sample single row of the json (I wont provide a whole file, too big for forum upload) is:

{

"Type": "Credit",

"InvoiceNo": 1.0,

"Reference": "5",

"JobNo": " 99999",

"Branch": "010 ",

"Code": "SUN ",

"Dated": "2002-06-30",

"MonthNo": -156,

"Period": "2002-06",

"WeekNo": 27,

"NetValue": -708.00,

"GST": -70.80,

"GrossValue": -778.80,

"Account": " ",

"Client": "SUNDRY DEBTOR                                                         ",

"Created": null,

"CreatedBy": " "

},

If I narrow the query result considerably (By a factor of 100), This does in fact work. (I can view 270 rows, 27000 kicks it)

Any help would be appreciated, as I feel like we have now exhausted all options in trying to solve this issue.

The ideal solution would be to allow for this accommodate any data volume. We are building an intranet based application and issues that may be limiting factors on Internet websites, don't really bother us for our little financial queries intranet site.

For completion sake, My grid partial view looks like:

@model System.Data.DataTable

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

.Name("queryResultGrid")

.Sortable()

.Groupable()

.Selectable()

.Scrollable()

.Filterable()

.Reorderable(reorder => reorder.Columns(true))

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

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

foreach (System.Data.DataColumn column in Model.Columns)

{

var field = model.Field(column.ColumnName, column.DataType);

}

})

.Read(read => read.Action("ExecuteQuery", "Query") // Set the action method which will return the data in JSON format

.Data("prepareQueryParams") // Specify the JavaScript function which will return the data

)

Again any help appreciated. Telerik or community alike.

Thanks,

Andrew

Grid

answered on 09 Jun 2017

3 answers

205 views

Loading Shapes and Connections is separated

Hi there,

I have two questions concerning the MVC Diagram. First, why is there a different loading approach for shapes and connections? It seems as sometimes, my datasource is too slow to read both quick enough, so I have only shapes, but no connections... Is there any possibility to show errors / loading progress?

See my code listed below. The datasource controller methods are normal Json(List<T>.ToDataSourceResult()) calls...

@(Html.Kendo().Diagram<DiagramEditNodeVm, DiagramEditEdgeVm>()
.Name("DAA")
.HtmlAttributes(new { style = "height: 700px; width:1400px" })
.Layout(l => l
      .Type(DiagramLayoutType.Tree)
      .Subtype(DiagramLayoutSubtype.Down)
      .HorizontalSeparation(50)
      .VerticalSeparation(50)
)
.ShapeDefaults(sd => sd
   .Visual("visualTemplate")
   .Content(c => c
       .FontSize(12)
      )
)
.ConnectionDefaults(cd => cd
   .Stroke(s => s
          .Color("#586477")
          .Width(2)
      )
)
.Events(events => events
   .Edit("onEdit")
)
.DataSource(d => d
      .ShapeDataSource()
      .Model(m =>
      {
          m.Id(n => n.Id);
          m.Field(n => n.Id).Editable(false);
          m.Field(n => n.Title);
          m.Field(n => n.StatusBit).Editable(false);
          //m.Field(s => s.ChildList).Editable(false);
          //m.Field(s => s.ParentList).Editable(false);
          //m.Field(s => s.MdeConnectionList).Editable(false);
          //m.Field(s => s.AttributeList).Editable(false);
      })
      .Read("ReadNodes", "Diagram", new
      {
          id= ViewContext.RouteData.Values["id"] != null ?
           Int32.Parse(ViewContext.RouteData.Values["id"].ToString())
           : 0
      })
      .Create("CreateNode", "Diagram")
      .Destroy("DeleteNode", "Diagram")
      .Update("UpdateNode", "Diagram")
)
.ConnectionsDataSource(d => d
      .Model(m =>
      {
          m.Id(e => e.Id);
          m.Field(e => e.Id).Editable(false);
          m.From(e => e.ParentNodeId);
          m.To(e => e.ChildNodeId);
          //m.FromX(c => c.FromPointX);
          //m.FromY(c => c.FromPointY);
          //m.ToX(c => c.ToPointX);
          //m.ToY(c => c.ToPointY);
      })
      .Read("ReadEdges", "Diagram", new
      {
          id = ViewContext.RouteData.Values["id"] != null ?
           Int32.Parse(ViewContext.RouteData.Values["id"].ToString())
           : 0
      })
      .Create("CreateEdge", "Diagram")
      .Destroy("DeleteEdge", "Diagram")
      .Update("UpdateEdge", "Diagram")
)
)

Diagram

answered on 09 Jun 2017

1 answer

151 views

Reordered ListBox showing original order

I've started using the ListBox. I noticed today that when I reordered a list using the up/down buttons, that the order doesn't update to the dataSource. Which makes sense, but is there a way to loop through the contents of the ListBox, so can update back to the database the new order?

var selectedFields = $("#selectedFields").data("kendoListBox");
var dataSource = selectedFields.dataSource;

As you can see from the screenshots, CADWorx Id is listed 1st on the screen, but in the dataSource, it still shows Lg. Description 1st.

Thanks,

Neil

ListBox