Telerik Forums
UI for ASP.NET MVC Forum
1 answer
88 views

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 ?

Maria Ilieva
Telerik team
 answered on 14 Mar 2016
1 answer
116 views

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! 

Yogendra
Top achievements
Rank 1
 answered on 14 Mar 2016
1 answer
128 views

 

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.

Nencho
Telerik team
 answered on 14 Mar 2016
1 answer
229 views

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!

Vasil
Telerik team
 answered on 14 Mar 2016
1 answer
56 views

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

Nencho
Telerik team
 answered on 14 Mar 2016
3 answers
135 views

I have tryed to get two (or more) grids to work with SignalR but failed.

When I change a post it always add to one of the grids. (with no data, different values)

I have different methods for update. eg update1 and updatex. I have also tryed different hubs.

Is this a limitation or is there a way to get this to work.

With one grid it works very nice.

Thanks in advance.

 

 

Jan Olsmar
Top achievements
Rank 1
 answered on 12 Mar 2016
1 answer
157 views

I want to change chart data based on selection from TreeView or other controls. I have tried to search all solutions on internet, including here...the following seems the right approach but not working for me...

First, I get selected ID from TreeView, then try to use it as parameter to call an Action by URL..

Anything wrong here? Thanks

<script>
    function onSelect(e) {
        var data = $('#MarketDrivers').data('kendoTreeView').dataItem(e.node);
        //$('#driverlist').html(data.id);
        var ds = new kendo.data.dataSource({
            transport: {
                read: {
                    type: "GET",
                    url: "/Blotter/getUserViewHist",
                    data: { factorID_: data.id },
                    dataType: "json"
                }
            }
        });
        var chart = $("#PersonalSummary").data("kendoChart");
        chart.setDataSource(ds);
        chart.dataSource.read();
    }

</script>

I have an Action from Blotter controller as below

 public ActionResult getUserViewHist(int factorID_)

Tong
Top achievements
Rank 1
 answered on 11 Mar 2016
4 answers
97 views

Hello,

I apologize for the hash of a question this is. I am looking for a way to save the development team some time in a site heavy with kendo grid use. For example we have a grid defined like this:

01.@(Html.Kendo().Grid(Model)
02.       .Name("grid")
03.       .Columns(columns =>
04.       {
05.           columns.Bound(e => e.StyleName).Filterable(ftb => ftb.Multi(true));
06.           columns.Bound(e => e.Collection).Filterable(ftb => ftb.Multi(true));
07.           columns.Bound(e => e.CommodityDesign).Filterable(ftb => ftb.Multi(true));
08.           columns.Bound(e => e.Decoration).Filterable(ftb => ftb.Multi(true));
09.           columns.Bound(e => e.StyleId).Filterable(ftb => ftb.Multi(true));
10.       })
11.       .HtmlAttributes(new { style = "width: 80%;" })
12.       .DataSource(data => data.Ajax().Model(mdl => mdl.Id(p => p.StyleId) ))
13.       .Scrollable()
14.       .Groupable()
15.       .Sortable()
16.       .Editable()
17.       .Filterable()
18.       .Selectable()
19.       .Pageable(pageable => pageable
20.           .Refresh(true)
21.           .PageSizes(true)
22.           .ButtonCount(5))
23.       )

The client has accepted this layout and now states they want every grid this way. We certainly could go through and manually crud every grid to match this pattern. I was just trying to think of a way we could use the above as a "template" leaving us just the relevant deltas to configure. For example this pseudo code below:

1.@(Html.CustomKendoGrid(Model)
2.    .DataSource(data => data.Ajax().Model(mdl => mdl.Id(p => p.NewProdId))))

TIA

JB

 

 

Dimiter Madjarov
Telerik team
 answered on 11 Mar 2016
1 answer
393 views

Having a hard time getting a grid with a ClientTemplate that uses a Dropdown control. 

Two problems, 

1. The text in the grid does not display a proper value, instead it displays the text used to specify the template. So when you add a row, this is what shows up in the column with the ClientTemplate, "#=StateEditor.Name\\#" instead of an actual state name. (I've attached an image to this post)

2. The dropdown works, I can open it and select an item, but once I leave the column, it reverts back to the text, "#=StateEditor.Name\\#". 

As far as I can tell, this is a display issue only because the values selected are valid when I submit the grid data to save. 

Here is my setup. 

Client Template

@model GCSConnections.Model.SelectListItemDto
 
@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("Id")
        .DataTextField("Name")
        .BindTo((System.Collections.IEnumerable)ViewData["StateListDto"])
)

 This is the SelectListItemDto

public class SelectListItemDto
{
    public int Id { get; set; }
    public string Name { get; set; }
}

The Controller Method that invokes the screen is:

public ActionResult ProjectManagement()
{
    var states = LookupService.Instance.GetStates();
    ViewData["StateListDto"] = states;
    ViewData["DefaultState"] = states.First();
 
    SupplierDto model = new SupplierDto();
    return View(model);
}

 The Grid is defined as: 

 

<div class="form-group">
    @(Html.Kendo().Grid(Model.LocationEngagements)
        .Name("LocationEngagementsGrid")
        .Columns(columns =>
        {
            columns.Bound(l => l.City);
            columns.Bound(l => l.State).ClientTemplate("\\#=StateEditor.Name\\#");
        })
        .ToolBar(toolBar =>
        {
            toolBar.Create();
            toolBar.Save();
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Sortable()
        .Scrollable()
        .Events(events => events.Edit("LocationGridEdit"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .Events(events => events.Error("error_handler"))
            .Create("GridLocationsEngagement_Create", "Supplier")
            .Update("GridLocationsEngagement_Update", "Supplier")
             .Model(model =>
             {
                 model.Id(l => l.Id);
                 model.Field(l => l.Id).Editable(false);
                 model.Field(l => l.State).DefaultValue(
                    ViewData["DefaultState"] as GCSConnections.Model.SelectListItemDto);
             })
         ))
</div>

Something to note is that the grid is contained within a parent model so I have to use the excape characters "\\" so specify the in the ClientTemplate definition. If I don't use those, nothing works. 

Any ideas? 

 

 

 

Danail Vasilev
Telerik team
 answered on 11 Mar 2016
1 answer
5.2K+ views
@(Html.Kendo().TreeView()
.Name("treeview")
.TemplateId("treeview-template")
.HtmlAttributes(new { @class = "demo-section" })
.DataTextField("name")
.DataUrlField("Link")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("GetTreeMenu", "Menu")
)
)
)
How can i refresh the datasource?
When i  changed the menu'name or del it ,the db has changed ,but not changed the monitor?
i don't know how to refresh th datasource?
 
Dimiter Madjarov
Telerik team
 answered on 11 Mar 2016
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
AppBar
BottomNavigation
Card
FloatingActionButton
Licensing
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
DateTimePicker
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?