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

I'm trying to make the text label not crowded in a lot of data and I can not successful.

 

{
dataSource: modelStats,
legend: {
visible: false
},
xAxis: {
min: -2,
max: 2,
labels: {
format: "{0:n1}"
}
},
yAxis: {
labels: {
format: "{0:n2}"
}
},
series: [
{
name: "Fleet Avg",
type: "line",
aggregate: "avg",
field: "fleetAvg",
categoryField: "date",
color: "#a0b751",
},
{
name: "Driver",
type: "line",
aggregate: "avg",
field: "value",
categoryField: "date",
color: "#219dd0",
},
{
name: "Driver previous period",
type: "line",
aggregate: "avg",
field: "valueFrom_SameDateLastPeriod",
categoryField: "date",
color: "#10b4b6",
}
],
seriesDefaults: {
aggregate: "avg",
type: "line",
width: 3,
margin: 30,
markers: {
size: 15,
width: 10
}
},

categoryAxis: {
baseUnit: me.baseUnitDefault[0],
labels: {
dateFormats: {
weeks: tFormat
},
font: "13px Arial,Helvetica,sans-serif",
rotation: "auto"
},
},
tooltip: {
visible: true
},
pannable: true,
onZoom: onChartZoom,
});
Konstantin Dikov
Telerik team
 answered on 10 Jul 2018
6 answers
492 views

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/remove

I am using the above event to refresh other grids on the page when a specific grid has a row deleted.

My test code is as follows:

@(Html.Kendo().Grid<ViewModel>
    ()
    .Name("kGrid")
    .Events(e => {
        e.Remove("alert('hello')");
    })

 

The rest of the code is omitted as it is not relevant.

The "hello" is triggering on page load, and not triggered at all when a row is confirmed removed. Am I missing something? 

Vince
Top achievements
Rank 1
 answered on 09 Jul 2018
5 answers
1.5K+ views

Recently I've been working with telerik devcraft for the last couple of weeks, I'm interested in using the grid controller to display data, I've reached the point where I'm working with CRUD operations and I need to led the user make delete, create and edit operations of the displayed rows my client really doesn't like the way the controller displays the edit and delete buttons next to the rows, he would like to be available to invoke the edit and delete operations via external html buttons on the bottom of the page

 

 

Alex Hajigeorgieva
Telerik team
 answered on 09 Jul 2018
2 answers
856 views

Hi there guys and gals, I have a grid and i am try to hide and show columns based on the selected month from a drop-down list. If selected month is January, then show the JComment column if it is February, then hide the JComment column and show the FComment column. The hide and show functionality works but unfortunately, it breaks the grid appearance, the all columns are compressed in width and blank space on the right of the grid appears. i have tried  calling the resize grid function, i have tried fixing this through css, but to no avail. How  do i fix this?

Here is the Grid logic

@(Html.Kendo().Grid<P2I_UI.Models.ViewM.MinistryImpactVM>()
    .Name("peopleMinistryImpact")
    .Columns(columns =>
    {
        columns.Bound(c => c.StatisticName).Title("StatisticName ").Width(35);
        columns.Bound(c => c.MinistryGroup).Title("Ministry <br/> Group").Width(25);
        columns.Bound(c => c.AgeGroup).Title("Age").Width(25);
        columns.Bound(c => c.AnnualGoal).Title("Annual <br/> Goal").Width(30).ClientTemplate("#=(AnnualGoal == null) ? ' ' : kendo.toString(AnnualGoal,',0')#");
        columns.Bound(c => c.October).Title("Oct.").Width(30).ClientTemplate("#=(October == null) ? ' ' : kendo.toString(October,',0')#");
        columns.Bound(c => c.November).Title("Nov.").Width(30).ClientTemplate("#=(November == null) ? ' ' : kendo.toString(November,',0')#");
        columns.Bound(c => c.December).Title("Dec.").Width(30).ClientTemplate("#=(December == null) ? ' ' : kendo.toString(December,',0')#");
        columns.Bound(c => c.January).Title("Jan.").Width(30).ClientTemplate("#=(January == null) ? ' ' : kendo.toString(January,',0')#");
        columns.Bound(c => c.JanuaryComment).Title("JComment.").Width(50).Hidden();
        columns.Bound(c => c.February).Title("Feb.").Width(30).ClientTemplate("#=(February == null) ? ' ' : kendo.toString(February,',0')#");
        columns.Bound(c => c.FebruaryComment).Title("FComment.").Width(50).Hidden();
        columns.Bound(c => c.March).Title("Mar.").Width(30).ClientTemplate("#=(March == null) ? ' ' : kendo.toString(March,',0')#");
        columns.Bound(c => c.MarchComment).Title("MComment.").Width(50).Hidden();
        columns.Bound(c => c.April).Title("Apr.").Width(30).ClientTemplate("#=(April == null) ? ' ' : kendo.toString(April,',0')#");
        columns.Bound(c => c.May).Title("May.").Width(30).ClientTemplate("#=(May == null) ? ' ' : kendo.toString(May,',0')#");
        columns.Bound(c => c.June).Title("Jun.").Width(30).ClientTemplate("#=(June == null) ? ' ' : kendo.toString(June,',0')#");
        columns.Bound(c => c.July).Title("Jul.").Width(30).ClientTemplate("#=(July == null) ? ' ' : kendo.toString(July,',0')#");
        columns.Bound(c => c.August).Title("Aug.").Width(30).ClientTemplate("#=(August == null) ? ' ' : kendo.toString(August,',0')#");
        columns.Bound(c => c.September).Title("Sep.").Width(30).ClientTemplate("#=(September == null) ? ' ' : kendo.toString(September,',0')#");
        columns.Bound(c => c.FiscalYearToDate).Title("FYTD.").Width(30).ClientTemplate("#=(FiscalYearToDate == null) ? ' ' : kendo.toString(FiscalYearToDate,',0')#");
        columns.Bound(c => c.PercentageOfPlan).Title("% of <br/> Plan.").Width(30).ClientTemplate("#=(PercentageOfPlan == null) ? ' ' : kendo.toString(PercentageOfPlan,'p')#");
    })
    .ToolBar(toolbar =>
    {
        toolbar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Events(events =>
    {
        events.Edit("onEditMinistryImpact");
    })
    .AutoBind(false)
    .DataSource(dataSource => dataSource
    .Ajax()
    .Sort(s =>
    {
        s.Add(p => p.SortOrder).Ascending();
        s.Add(p => p.MinistryGroupCategoryID).Ascending();
        s.Add(p => p.AgeCategoryID).Ascending();
    })
    .ServerOperation(false)
    .Batch(true)
    .Model(model =>
    {
        model.Id(p => p.MinistryImpactID);
        model.Field(p => p.StatisticName).Editable(false);
        model.Field(p => p.MinistryGroup).Editable(false);
        model.Field(p => p.AgeGroup).Editable(false);
        model.Field(p => p.FiscalYearToDate).Editable(false);
        model.Field(p => p.PercentageOfPlan).Editable(false);
    })
     .Read(read => read.Action("MinistryImpact_Read", "MinistryImpact").Data("additionalData"))
     .Update(update => update.Action("MinistryImpact_Update", "MinistryImpact"))
    )
)

 

Js Logic

function onMonthChange(e)
{
    var selectedMonthIndex = this.value();
    var peopleMinistry = $("#peopleMinistryImpact").data("kendoGrid");
 
    if (parseInt(selectedMonthIndex) === parseInt(0))
    {
        peopleMinistry.showColumn("JanuaryComment");
        peopleMinistry.hideColumn("FebruaryComment");
        peopleMinistry.hideColumn("MarchComment");
    }
    else if (parseInt(selectedMonthIndex) === parseInt(1)) {
        peopleMinistry.hideColumn("JanuaryComment");
        peopleMinistry.showColumn("FebruaryComment");
        peopleMinistry.hideColumn("MarchComment");
    }
    else if (parseInt(selectedMonthIndex) === parseInt(2)) {
        peopleMinistry.hideColumn("JanuaryComment");
        peopleMinistry.hideColumn("FebruaryComment");
        peopleMinistry.showColumn("MarchComment");
    }
       peopleMinistry.resize();
        // force the layout readjustment without setting a new height
       peopleMinistry.resize(true)
}

CSS

<style>
    #peopleMinistryImpact.k-grid-header {
        padding: 0 !important;
    }
 
    #peopleMinistryImpact.k-grid-content {
        overflow-y: visible;
    }
 
    #peopleMinistryImpact > .k-grid-header > div > table,
    #peopleMinistryImpact > .k-grid-content > table {
        width: 100% !important;
    }
 
    #peopleMinistryImpact {
        min-width: 1250px;
    }
</style>

 

Thanks for the help

Chinonso
Top achievements
Rank 1
 answered on 05 Jul 2018
2 answers
83 views

Hello,

I have an application, in wich there is a combobox above a grid. If i choose a company in the Combobox, then the people of the company are shown in the grid.

I have now the problem with the edit button in the grid. If I change the company and after this click on the edit button, the edit popup do not open. Instead the grid fires the Read-Action. When i click a second time on the edit button, the edit popup is opening.

I attached a demo project with this problem. I remvoed the Kendo Css-files and Scripts to get a small zip-File. Just Reinstall the "Telerik.UI.for.AspNet.Mvc5" package. I use the version 2018.1.117

Thank you for your help.

Ralf

Ralf
Top achievements
Rank 1
 answered on 05 Jul 2018
3 answers
102 views

Hello,

Could some one help me the sorting issue? Records cannot be sorted  by clicking on a column's header after I applying group on the grid. I am working on MVC project. 

Thanks in advance.

 

Alex Hajigeorgieva
Telerik team
 answered on 03 Jul 2018
3 answers
215 views

     I need to show the details of the grid for CRUD operations outside the grid (in a tabbed layout with the details and subgrids). The template is the same used in popup but it has to be in the same page that the grid.

 

  Is there any way to achieve this? I've seen this example in the documentation but it's for jquery

 

http://dojo.telerik.com/upiPE/26

 

Thank you

Georgi
Telerik team
 answered on 03 Jul 2018
2 answers
342 views

I'm using a grid with editable mode set to pop up. On the actions I have included a route value to be sent to the controller. This route value gets sent on each of the CRUD calls except for the create. 

Below is my Grid code with the route values for each of the actions. I really only need this value passed through for the Create and Read actions.

@(Html.Kendo().Grid(Model).Name("ApprovalProcessSteps").Columns(c =>
{
    c.Bound(e => e.ProcessStep);
    c.Bound(e => e.ProcessStepType);
    c.Bound(e => e.AndOr);
    c.Bound(e => e.GroupParentStep);
    c.Bound(e => e.UserId);
    c.Bound(e => e.RejectToStep);
    c.Bound(e => e.ReminderFrequency);
 
    c.Command(command =>
    {
        command.Edit();
        command.Destroy();
    }).Width(200);
})
      .ToolBar(toolbar => toolbar.Create().Text("Create New Step"))
      .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ApprovalProcessStepPopUp"))
      .Pageable(pager => pager.AlwaysVisible(false).PageSizes(new List<object> {5, 10, 20, 100}))
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(20)
          .Model(model => model.Id(p => p.Id))
          .Create(update => update.Action("EditingPopup_Create", "ApprovalProcessSteps", new { approvalProcessId = ViewBag.approvalProcessId }))
          .Read(read => read.Action("EditingPopup_Read", "ApprovalProcessSteps", new { approvalProcessId = ViewBag.approvalProcessId }))
          .Update(update => update.Action("EditingPopup_Update", "ApprovalProcessSteps", new { approvalProcessId = ViewBag.approvalProcessId }))
          .Destroy(update => update.Action("EditingPopup_Destroy", "ApprovalProcessSteps", new { approvalProcessId = ViewBag.approvalProcessId })))
      )

 

Below is my controller code. The route value gets pass to all but my Create call. Can any point me in the right direction on what I might be doing wrong.

public ActionResult EditingPopup_Read([DataSourceRequest] DataSourceRequest request, int approvalProcessId)
{
    ViewBag.approvalProcessId = approvalProcessId;
    return Json(this.ReadInline(approvalProcessId).ToDataSourceResult(request));
}
 
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingPopup_Create([DataSourceRequest] DataSourceRequest request, ApprovalProcessStep approvalProcessStep, int approvalProcessId)
{
    if (approvalProcessStep != null && ModelState.IsValid)
    {
        this.CreateInline(approvalProcessStep, approvalProcessId);
    }
 
    return Json(new[] {approvalProcessStep}.ToDataSourceResult(request, ModelState));
}
 
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingPopup_Update([DataSourceRequest] DataSourceRequest request, ApprovalProcessStep approvalProcessStep)
{
    if (approvalProcessStep != null && ModelState.IsValid)
    {
        this.UpdateInline(approvalProcessStep);
    }
 
    return Json(new[] {approvalProcessStep}.ToDataSourceResult(request, ModelState));
}
 
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingPopup_Destroy([DataSourceRequest] DataSourceRequest request, ApprovalProcessStep approvalProcessStep)
{
    if (approvalProcessStep != null)
    {
        this.DestroyInline(approvalProcessStep);
    }
 
    return Json(new[] {approvalProcessStep}.ToDataSourceResult(request, ModelState));
}
Georgi
Telerik team
 answered on 03 Jul 2018
12 answers
2.3K+ views
Hi,
I need to include MultiSelect list in grid which should show already assigned values as selected and if user wants  to assign more then he can select from select list.
I have attached screenshot the way i want select list in grid.
Please reply.
Boyan Dimitrov
Telerik team
 answered on 02 Jul 2018
12 answers
1.4K+ views

Hi,

I'm using an EditorTemplate to enable the user to select a person

@model Int64

@(Html.Kendo().ComboBox()
            .Name("RepIRN")
            .Filter("contains")
            .Placeholder("Select a rep...")
            .DataTextField("Text")
            .DataValueField("Value")
       .HtmlAttributes(new { style = "width:100%;" })
          .Filter("contains")
          .AutoBind(false)
          .MinLength(3)
          .DataSource(source =>
          {
            source.Read(read =>
            {
              read.Action("GetUsers", "AutoComplete");
            })
            .ServerFiltering(true);
          })
)

 

The model that I'm displaying is

 

 public class JobObjectModel
  {
    public long IRN { get; set; }
    public string Rep { get; set; }

    [UIHint("RepEditor")]
    public long RepIRN { get; set; }

    public string JobStatus { get; set; }
    public string Promised { get; set; }
 }

The combobox works fine except I can't figure out how I populate it with the rep value and rep name when the page loads the model.Everything else seems to work, if the user selects a value it is sent back to the controller fine etc.

I just can't figure out how I load the value (and text) when the page loads.

Below is how I populate the combobox

 

   public JsonResult GetUsers(string text)
    {

    var sortedPeople = Database.GetPeople(text);
      List<SelectListItem> items = new List<SelectListItem>();
      foreach (var person in sortedPeople)
      {
        items .Add(new SelectListItem() { Text = person.FullName, Value = person.IRN.Value.ToString() });
      }

      return Json(items , JsonRequestBehavior.AllowGet);
    }

Stefan
Top achievements
Rank 1
Iron
 answered on 02 Jul 2018
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
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
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
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?