Questions on UI for ASP.NET MVC Forum

4 answers

1.5K+ views

Hi,

I want a grid that has a button that opens a window that contains a grid that allows you to select a value for the parent grid

@(Html.ISGrid<Core.Data.Models.AttributeSourceSEModel>()

.Name("grid")

.Columns(columns =>

{

columns.Command(command => command.Custom("pick").Click("pickAttribute")).Width(50);

columns.Bound(p => p.AttributeSourceID).Width(200);

columns.Bound(p => p.Description).Width(200);

columns.Bound(p => p.SourceDataColumnName).Width(200);

columns.Bound(p => p.AttributeDefinitionID).Width(200);

columns.Bound(p => p.AttributeDefinitionName).Width(200);

columns.Bound(p => p.AttributeReportingGroupName).Width(200);

columns.Bound(p => p.AttributeHeaderName).Width(200);

columns.Bound(p => p.Name).Width(200);

//columns.Bound(p => p.AttributeSourceDatabaseID).Width(200);

columns.ForeignKey(p => p.AttributeSourceDatabaseID, (System.Collections.IEnumerable)ViewBag.AttributeSourceDatabase, "ID", "Name")

.Title("Database").Width(150);

columns.Bound(p => p.TableName).Width(200);

columns.Bound(p => p.SurveyEntityIDColumnName).Width(200);

columns.Bound(p => p.FilterColumnName).Width(200);

columns.Bound(p => p.FilterColumnValue).Width(200);

columns.Bound(p => p.Filter2ColumnName).Width(200);

columns.Bound(p => p.Filter2ColumnValue).Width(200);

columns.Bound(p => p.LastUpdatedDateColumnName).Width(200);

columns.Bound(p => p.RecommendedBatchSize).Width(200);

columns.Bound(p => p.VeracitySourceID).Width(200);

columns.Bound(p => p.VerificationTypeID).Width(200);

columns.Bound(p => p.VerificationTypeUnits).Width(200);

columns.Bound(p => p.IsInUse).Width(200);

columns.Bound(p => p.AttributeDataLogCount).Width(200);

columns.Command(command => command.Destroy()).Width(172);

})

.ToolBar(toolbar =>

{

toolbar.Create();

toolbar.Save();

toolbar.Excel();

})

.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))

.Pageable()

.Groupable()

.Sortable()

.Scrollable()

.Filterable()

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Batch(true)

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

.Model(model =>

{

model.Id(p => p.AttributeSourceID);

model.Field(p => p.AttributeDefinitionName).Editable(false);

})

.Create(update => update.Action("Create", "AttributeSourceSE"))

.Update(update => update.Action("Update", "AttributeSourceSE"))

.Destroy(update => update.Action("Destroy", "AttributeSourceSE"))

.Read(read => read.Action("Read", "AttributeSourceSE", new { attributeSourceDatabaseID = @Request["AttributeSourceDatabaseID"] }))

)

@(Html.Kendo().Window()

.Name("AttDef")

.Title("Attribute Definition")

.Visible(false)

.Modal(true)

.Draggable(true)

.Content(

Html.ModalGrid<Core.Data.Models.AttributeDefinitionModel>()

.Name("attgrid")

.Events(events => events.Change("Grid_OnRowSelect"))

.Columns(columns =>

{

columns.Bound(p => p.Name);

columns.Bound(p => p.AttributeReportingGroupName);

columns.Bound(p => p.AttributeHeaderName);

columns.Bound(p => p.AttributeDefinitionID).Hidden(true);

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Batch(true)

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

.Model(model =>

{

model.Id(p => p.AttributeDefinitionID);

})

.Read(read => read.Action("ReadNameOnly", "AttrDef", new { AttributeReportingGroupID = @Request["AttributeReportingGroupID"] }))

)

.ToHtmlString()

)

.Width(500)

.Height(500)

)

<script type="text/javascript">

function pickAttribute(e) {

window.grid = $("#grid").data("kendoGrid");

window.dataItem = window.grid.dataItem($(event.srcElement).closest("tr"));

var wnd = $("#AttDef").kendoWindow({

title: "Attribute Definition",

actions: ["Minimize", "Maximize", "Close"],

visible: false,

modal: true,

close: onClose

}).data("kendoWindow");

wnd.center();

wnd.open();

resizeGrid();

}

Grid_OnRowSelect = function (e) {

alert('onChange');

}

function onClose()

{

alert('close');

}

function resizeGrid() {

var gridElement = $("#attgrid");

var dataArea = gridElement.find(".k-grid-content");

var newHeight = gridElement.parent().innerHeight() - 2;

var diff = gridElement.innerHeight() - dataArea.innerHeight();

gridElement.height(newHeight);

dataArea.height(newHeight - diff);

}

</script>

It is working up to the point where the window opens, but I cannot click on the child grid to return values to the parent grid.

The columns on the parent grid are read only. How do I update them in javascript?

Grid

answered on 16 Mar 2016

1 answer

46 views

Series Color With Shaded and lines

We use "Bar chart with Multi Axis", we have a scenario to distinguish the series with different color but we need a color like "Shaded with line" color.

How we can do this.

For your reference, I attached the screen shot.

Chart

answered on 15 Mar 2016

3 answers

1.0K+ views

Edit/Delete buttons in toolbar, not at each row

Having the edit/delete buttons at each row is very space inefficient. I would like to be able to:

Be able to select a row.
Click the Edit or Delete buttons which are at the top (or bottom) of the grid next to the Add New button.
Have check boxes at each row so I can multi-select and delete more than one row at a time.

Does anyone have sample code showing this working before I have to dig in an re-invent this wheel myself?

Thanks,

Brad

Grid

answered on 15 Mar 2016

1 answer

107 views

_Layout.cshtml modifications

Is there any documentation for the logic how the update wizard modifies the _Layout.cshtml?

After the update the file is always messed up and needs to be reverted. If I can consider some logic from your side it would take a pain away :-)

Installer and VS Extensions

answered on 15 Mar 2016

1 answer

84 views

Cancel a Form save what about the grid ?

I have a form that consist of textboxes AND a grid
The model that I use for the form has properties for the textboxes and a List<MyGridmodel> for the grid.
What is the best way to implement the follow scenario?
I add a record to my grid but after that I click cancel on the form.

So the added record for the grid needs to be canceled,

Anyone ?

Grid

answered on 14 Mar 2016

1 answer

112 views

Grouped Local Data (multiple lines)

I'm having some issues showing multiple lines on the same grid. My objective is a date range in the X axis, a Percentage value in the Y axis and each line to represent a company.

I put breakpoints on the datasource read and I can see that the data is being populated, but after it returns the JSON to the view, no data shows.

Model:

public class CompanyMargin
{
public DateTime? ClosingDate { get; set; }
public decimal? Margin { get; set; }
public string Company { get; set; }
}

Controller: (I have tried 2 ways.. passing directly from the controller itself as a list, and also creating a datasourcerequest action)

public ActionResult MarginsAll()
{
List<CompanyMargin> lstCompanyMargin = new List<CompanyMargin>();
var items = db.spGroupedMargin().ToList();
foreach (var _item in items)
{
CompanyMargin companyMargin = new CompanyMargin();
companyMargin.ClosingDate = _item.InvoiceDate;
companyMargin.Company = _item.Client;
companyMargin.Margin = _item.Margin;
lstCompanyMargin.Add(companyMargin);
}
return View(lstCompanyMargin);
}

[HttpPost]
public ActionResult _GroupedMargin([DataSourceRequest]DataSourceRequest request)
{
List<CompanyMargin> lstCompanyMargin = new List<CompanyMargin>();
var items = db.spGroupedMargin().ToList();
foreach (var _item in items)
{
CompanyMargin companyMargin = new CompanyMargin();
companyMargin.ClosingDate = _item.InvoiceDate;
companyMargin.Company = _item.Client;
companyMargin.Margin = _item.Margin;
lstCompanyMargin.Add(companyMargin);
}
DataSourceResult result = lstCompanyMargin.ToDataSourceResult(request, c => new CompanyMargin
{
Company = c.Company,
Margin = c.Margin,
ClosingDate = c.ClosingDate
});
return Json(result);
}

View:

@(Html.Kendo().Chart<CDashboard.Models.CompanyMargin>()
.Name("MarginChart")
.Title("Company Margins")
.DataSource(datasource => datasource
.Read(read => read.Action("_GroupedMargin", "DashCharts"))
.Group(group => group.Add(model => model.Company))
.Sort(sort => sort.Add(model => model.ClosingDate).Ascending())
)
.Series(series =>
{
series.Line(model => model.Margin, categoryExpression: model => model.ClosingDate)
.Name("#- group.value #");
})
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.ValueAxis(axis => axis.Numeric()
.Labels( labels => labels
.Format("{0}%")
.Skip(2)
)
)
.CategoryAxis(axis => axis
.Date()
.BaseUnit(ChartAxisBaseUnit.Days)
)

)

When the page loads, I show a blank chart, then the breakpoint on the _GroupedMargin action triggers. I step through that and I can see that it is indeed populated with data. But as soon as it passes back to the view, nothing shows.

I would also like to question why I cannot find the kendo documentation solution on my local machine. While I had the trial I could open the Kendo.mvc.examples project to get a better understanding of the code. But it seems like once we purchased the product and installed the control panel, the local solution went away. The documentation online is very helpful, but when it offers to show the controller it just shows the generic controller and not the read actions or the models that I would need to see. Please help!

Chart

answered on 14 Mar 2016

1 answer

121 views

Deserialisation issues for MVC ComboBox Server Control

Hello,

I have been unable to solve this issue for the past 2 days and now need some help.

I am using an Ajax request, to load a partial view, containing two kendo server components bound to my model.

The JavaScript:

01.$.ajax({

02. type: 'POST',

03. url: '/JobEnquiry/GetData',

04. data: {

05. periodNo: selectedPNo

06. },

07. beforeSend: function () { /*alert("before send");*/ },

08. success: function (data) {

09. $("#JobEnquiryContentArea").html(data);

10. $("#JobEnquiryContentArea").show();

11. },

12. error: function (jqXHR, textStatus, errorThrown) {

13. //$('#mnuNav').html(jqXHR.responseText);

14. LSViewer.ShowErrorDialog(jqXHR.status, jqXHR.statusText, jqXHR.responseText, errorThrown);

15. },

16. complete: function () { /*alert("complete");*/ }

17.});

The Model:


01.public class JobEnquiryDetailsModel
02.{
03.    public IEnumerable<JobListModel> JobList { get; set; }
04.    public string Message { get; set; }
05.    public string Branch { get; set; }
06.    public IEnumerable<SelectListItem> jobSelection { get; set; }
07.    [DisplayName("Period")]
08.    public string selectedPeriod { get; set; }
09.    [DisplayName("Job No")]
10.    public string selectedJob { get; set; }
11. 
12.}

and for completion The JobListModel:


01.public class JobListModel
02.{
03.    public string JobNumber { get; set; }
04.    public string ClientReference { get; set; }
05.    public string JobName { get; set; }
06.    public DateTime Opened { get; set; }
07.    public string ProjectManager { get; set; }
08.    public string JobType { get; set; }
09.    public decimal OriginalValue { get; set; }
10.    public decimal BudgetCosts { get; set; }
11.    public decimal BudgetProfit { get; set; }
12.    public decimal ContractValue { get; set; }
13.    public decimal ForecastValue { get; set; }
14.    public decimal CostToComplete { get; set; }
15.    public string WorkOrder { get; set; }
16.    public string Branch { get; set; }
17.    public string ClosedFlag { get; set; }
18.    public string CreatedUser { get; set; }
19.    public string SiteCode { get; set; }
20.    public string ClientName { get; set; }
21.    public string ClientCode { get; set; }
22.}

The Controller method:


01.[HttpPost]
02.public ActionResult GetData(string periodNo)
03.{
04.    JobEnquiryDetailsModel myModel = new JobEnquiryDetailsModel();
05.    DownloadJobData(periodNo);
06.    List<JobListModel> jobsList = MapJobJistData();
07. 
08.    myModel.Branch = "";
09.    myModel.JobList = jobsList;
10.    myModel.Message = "I Fetched some data....";
11.    myModel.selectedJob = "";
12.    myModel.selectedPeriod = periodNo;
13.    PartialViewResult mr;
14.    return PartialView("_JobEnquiryDetails",myModel);
15.}

And lastly my partial View:


01.@model Models.JobEnquiryDetailsModel
02. 
03.<div id="displayParameters" class="row clearfix">
04.    <div class="col-lg-3">
05.        @(Html.LabelFor(model => model.Branch))
06.        @(Html.Kendo().TextBoxFor(model => model.Branch)
07.            .HtmlAttributes(new { style = "width: 80px;" })
08.        )
09.    </div>
10.    <div class="col-lg-3">
11.    @(Html.LabelFor(model => model.selectedJob))
12.    @(Html.Kendo().ComboBoxFor(model => model.selectedJob)
13.                .DataTextField("JobNumber")
14.                .DataValueField("JobNumber")
15.                .BindTo(Model.JobList)
16.                .HtmlAttributes(new { style = "width: 120px;" })
17.    )
18.    </div>
19.    <div class="col-lg-6">
20.    </div>
21.</div>
22.<div id="enquiryContent" class="row clearfix">
23.    <div class="col-lg-5 pull-left">
24.        LEFT HAND SIDE
25.    </div>
26.    <div class="col-lg-7 pull-right">
27.        RIGHT HAND SIDE
28.    </div>
29.</div>

K. Now all that is in, the error is:


1.System.InvalidOperationException: Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property.

I have read numerous pieces of help on JsonSerialisers, however after trying, none are helping in my particular case.

I suspect it is because I am returning a partial view which is not json, then the kendo server object is doing something under the hood to the model data and boom.

The List I am Binding to is only 17000 odd items, which while large isn't obscene.

Really running out of ideas.

Any assistance appreciated.

General Discussions

answered on 14 Mar 2016

1 answer

209 views

Grid with bound Slider bars

Hello,

I'm trying to develop an application with 3 columns in one Kendo grid, all in ASP.Net MVC. I want 1 column that's just a string, one column that's a slider bar bound to a property in my model, and then a textbox that's uneditable that displays the current value of the slider bar. Since the slider bar would be bound to a property in the model, I think I can just bind this textbox to the same property and make it uneditable.

I'm able to do all of this outside of a grid, however I can't figure out how to get the slider bar to function correctly in a grid. Any help or advice on how to do this would be much appreciated.

Thanks in advance!

Grid

answered on 14 Mar 2016

1 answer

50 views

How to show indicator if Scheduler Event is off screen / out of view frame?

Is there any way to display a visual indicator to inform the user that there are event(s) currently on the scheduler table, but out of the visible frame?

Example, your Scheduler table is only high enough to display a few hours range and is scrolled to the top. You may have events at the bottom of the scrollable table that hidden because the user did not scroll down.

I was hoping there is an out of the box method before I go and write something custom.

Regards,

Rob

Scheduler