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

I have a Razor for that has several Autocomplete fields on it.

 

Some of these fields are required, some are not required.

 

I need to show the required fields in a red border and a blue background, while non-required fields are white, with a blue border.

 

My css works for a regular text field, but i cannot figure out how to make it work for an autocomplete field.

 

How would I do that?  I have tried " .HtmlAttributes(new { @class="rsireqtext",style = "width: 99%;" }) " in the autocomplete (rsireqtext is my 'required' styling),

but that doesn't do it.

 

Any ideas?

 

TIA,

Bob Mathis

Dimo
Telerik team
 answered on 02 Mar 2016
2 answers
301 views

Using Kendo UI for ASP.NET MVC, I am creating and passing in a Model that contains a collection of objects (called ChartSeries) that has fields for Color, SeriesName, and a collection of a second class (ChartSeriesValue) which contains fields Value, Date. I am trying to create a line chart using this local data with a dynamic number of series. Using a foreach statement, I can get the different series values plotted, but am unable to get the Dates to display using CategoryAxis. Will I have to go the route of using DataSource to group the flattened data, or is it possible to accomplish this using localdata? 

Here are the chart-related classes I am using:

public class ChartSeries
    {
        public string SeriesName { get; set; }
        public string ValueType { get; set; }
        public string HexColor { get; set; }
        public IList<ChartSeriesValue> ChartSeriesValues { get; set; }
    }
 
public class ChartSeriesValue
    {
        public decimal? Value { get; set; }
        public DateTime Effective { get; set; }
    }

 

Thus far, I have been able to get either the lines with proper values, or just the X-Axis date labels to display, but not both. Here's my current attempt that displays proper line series data without X-Axis labels:

@(Html.Kendo().Chart<ChartSeriesValue>()
              .Name("myChart_" + Model.MyChart.Id)
              .Title(Model.MyChart.Name)
              .Legend(legend => legend
                  .Position(ChartLegendPosition.Bottom)
              )
              .ChartArea(chartArea => chartArea
                  .Background("transparent")
                  .Width(250)
                  .Height(250)
              )
              .SeriesDefaults(seriesDefaults =>
                  seriesDefaults.Line().Style(ChartLineStyle.Smooth)
              )
              .Series(series =>
              {
                  if (!Model.ChartSeriesList.IsNullOrEmpty())
                  {
                      foreach (var metSeries in Model.ChartSeriesList)
                      {
                          if (!metSeries.ChartSeriesValues.IsNullOrEmpty())
                          {
                              series.Line(metSeries.ChartSeriesValues)
                                  .Field("Value")
                                  .Name(metSeries.SeriesName)
                                  .Color(metSeries.HexColor);
                          }
                      }
                  }
              })
              .CategoryAxis(axis => axis
                  .Categories(x => x.Effective.Date)
                  .Name("Effective Date")
                  //.Name("Effective")
                  //.MajorGridLines(lines => lines.Visible(true))
                  //.Date().BaseUnit(ChartAxisBaseUnit.Months)
                  .Labels(labels => labels.Visible(true))
                  .Color("Red")//.Rotation(-60))
                               //.Type(ChartCategoryAxisType.Date)
              )
              ))

 

Please let me know if you need further clarification. Thanks!

 

 

Iliana Dyankova
Telerik team
 answered on 02 Mar 2016
3 answers
807 views

 

I have a very simple grid. For this grid only is there a way to disable the row hover highlight? I want it everwhere else, just not for this grid.

@(Html.Kendo().Grid<SalesRepSummaryItem>()
                      .Name("grid")
                      .NoRecords()
                      .Sortable()
                      .Columns(columns =>
                      {
                          columns.Bound(c => c.SalesRepFullName).Title("Sales Rep");
                          columns.Bound(c => c.TotalSales).Title("Invoiced Sales").Format("{0:c}").HtmlAttributes(new { @class = "money" }).Width(150);
                          columns.Bound(c => c.CalculatedTotalSales).Title("Total Sales").Format("{0:c}").HtmlAttributes(new { @class = "money" }).Width(150);
                          columns.Bound(c => c.NumberOfOrders).Title("# of Orders").Format("{0:0}");
                          columns.Bound(c => c.NumberOfItems).Title("# Of Items").Format("{0:0}");
                          columns.Bound(c => c.TotalOrdered).Title("Qty Ordered").Format("{0:0}");
                          columns.Bound(c => c.TotalShipped).Title("Qty Shipped").Format("{0:0}");
                      })
                      .DataSource(dataSource => dataSource
                          .Ajax()
                          .Read(read => read.Url(Url.HttpRouteUrl("Default", new { controller = "SalesRep", action = "Sales_GetSalesData" })).Data("getFilterValuesForGridRead")))

Milena
Telerik team
 answered on 01 Mar 2016
3 answers
81 views

I am evaluating the Scheduler Components, specifically the TimeLine mode.

Does this component allow me to create an event that is comprised of smaller events? For example, I have a Process comprised of Steps. The Steps also have a Start/Stop Time. 

I was wondering if TimeLine would allow me to customize the Series Bar so that I could display the Steps Inside of the Process?

Does that make sense?

Chuck

Vladimir Iliev
Telerik team
 answered on 01 Mar 2016
4 answers
135 views
I'm trying to fill a column of the my grid with images from the Content/images folder of the project, but for some reason the column doesn't display any content.

Since maybe I wrote the path in a wrong way, I tried to follow an example of the web with only some text, without any luck.

This is my custom column:

    columns.Template(@<text>
       custom content here, which is not related to the data
       </text>).Title("Column Title");

I'm using Ajax binding, and because of that columns.ClienteTemplate is not an option (I need to use aggregates, which is not possible when Server binding.

This is my data source (abreviatted):

    .DataSource(dataSource => dataSource
              .Ajax()
              .Read(read => read.Action("Products_Read", "Home"))
              )

 Any help will be really appreciated.
Maria Ilieva
Telerik team
 answered on 29 Feb 2016
3 answers
128 views

With a hierarchical grid and row selection. Can I preserve the row selection when expanding a hierarchical grid row?

Example:

There is a grid with five rows in it. One or more rows contain hierarchical grids present (rows 2 and 5). The user has selected rows one or more rows (1 and 3). If the user clicks the hierarchical grid row expansion icon of row 2 the selection of rows 1 and 3 are lost.

Is there a way to prevent this default behavior?

Dimiter Madjarov
Telerik team
 answered on 29 Feb 2016
2 answers
470 views

I have a sub-grid in a details template, that allows records to be inserted and deleted. I can put an error handler on the datasource, which will show an error message if the action fails, however as the grid name is dynamically generated, I can't see a way to call preventdefault(), to stop the failed inserts / deletes being displayed in the grid.

How can I get the grid name to call the preventDefault method?

Grid:-

<script id="subdetailsTemplate" type="text/kendo-tmpl">
 
    @(Html.Kendo().Grid<EVASLogicLibrary.UserDirectorateMap>()
              .Name("MapGrid_#=ID#")
              .Columns(columns =>
              {
                  columns.Bound(o => o.ID).Title("ID");
                  columns.ForeignKey(p => p.DirectorateID, (System.Collections.IEnumerable)ViewData["directorates"], "ID", "DirectorateName").Title("Directorate").Width(200);
                  //columns.Bound(o => o.UserID).Title("User");
                  columns.Command(command => { command.Destroy(); command.Edit(); });
 
              })
              .Events(e=>e.DataBound("gridBind"))
              .ToolBar(tb => tb.Create())
              .Editable(e=>e.Mode(GridEditMode.InLine))
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(10)
              .Events(e=>e.Error("Suberror"))
              .Model(m=>{
                  m.Id(p => p.ID);
                  m.Field(p => p.ID).Editable(false);
 
              })
               .Read(read => read.Action("RD_Maps", "Users", new { UserId = "#= ID #" }))
               .Create(u=>u.Action("InsertMap", "Users", new { UId = "#= ID #" }))
               .Update(u => u.Action("InsertMap", "Users"))
               .Destroy(u => u.Action("DeleteMap", "Users"))
              )
 
              .Pageable(p => p.Refresh(true))
 
              .ToClientTemplate()
 
    )
 
    </script>

Error handler:-

function Suberror(e) {
 
          if (e.errors) {
 
              var message = "Errors:\n";
 
              $.each(e.errors, function (key, value) {
 
                  if ('errors' in value) {
 
                      $.each(value.errors, function () {
 
                          message += this + "\n";
                      });
 
                  }
 
              });
 
              alert(message);
          }
 
      }

And the main grid error handler (that I want to replicate the functionality of:-

function error(e) {
 
           if (e.errors) {
 
               var message = "Errors:\n";
 
               $.each(e.errors, function (key, value) {
 
                   if ('errors' in value) {
 
                       $.each(value.errors, function () {
 
                           message += this + "\n";
 
                       });
 
                   }
 
               });
 
 
 
               var grid = $("#Grid").data("kendoGrid");
 
               grid.one("dataBinding", function (e) {
 
                   e.preventDefault();   // cancel grid rebind if error occurs
 
               });
 
               alert(message);
 
        
 
           }
       }

Thanks

AP
Top achievements
Rank 1
Iron
Iron
Veteran
 answered on 29 Feb 2016
1 answer
138 views

Hi,

We are currently using our own calculations by using JavaScript and  Kendo Grid. Since it is written by us with a lot of validations, it hurts the performance and creates bugs. I found Kendo has Spreadsheet control and I like to give it a try, I have already found some answers but I still have a lot of questions which I cannot find. I wonder if you can help me with those answers.

 

1. Can we move worksheet bar to the top?

2. Can we set a default worksheet to open up with?

2. Can we lock all features but only open "add row" to the user?

3. Can we add a drop-down list to one column of cells?

4. can it handle different date/time format based on the user culture?

5. can we lock columns so users cannot modify those columns?

6. can we pre-define the formula and users cannot change it?

7. can we change the column header name instead of "A" "B" "C" ...

 

thanks a lot!

T. Tsonev
Telerik team
 answered on 29 Feb 2016
3 answers
71 views

In the attached picture, the id is equal to "tabStrip_#=Name#", but the #=Name# portion should be replaced with the name from the ViewModel.

<div class="row " style="max-width: 98%">
    <div class="columns">
        <div class="full-width">
            @(Html.Kendo().Grid<EPP.AdminPortal.ViewModels.Test>
                  ()
                  .Name("grid")
                  .HtmlAttributes(new {style = "table-layout: fixed, height: 550px;"})
                  .Columns(columns =>
                  {
                      columns.Bound(c => c.Id).Width(1000);
                      columns.Bound(c => c.Name).Width(2000);
                      columns.Bound(c => c.Email).Width(5000);
                      columns.Bound(c => c.Ap).Width(5000);
                      columns.Bound(c => c.Bp).Width(5000);
                      columns.Bound(c => c.Cp).Width(5000);
                      columns.Bound(c => c.Dp).Width(5000);
                      columns.Bound(c => c.Ep).Width(5000);
                      columns.Bound(c => c.Fp).Width(200);
                  })
                  .ClientDetailTemplateId("template")
                  .DataSource(dataSource => dataSource
                      .Ajax()
                      .Read(read => read.Action("T_Read", "Test"))
                  )
                  //.Groupable()
                  .Sortable()
                  )
        </div>
    </div>
</div>

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
    .Name("tabStrip_#=Name#")
    .SelectedIndex(0)
    .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
    .Items(items =>{
              items.Add().Text("Contact Person").Content("Jeremy");
            }   
       ).ToClientTemplate())
</script>

Helen
Telerik team
 answered on 29 Feb 2016
1 answer
338 views

Hello, 

I was wondering if there was any way to add conditions to a datasourcereulst like "Where" and"Union"?  Here is my controller code.

public ActionResult tbl_vessels_Read([DataSourceRequest]DataSourceRequest request, decimal[] param_bhp, decimal[] param_deck)
      {
          IEnumerable<tbl_vessels> tbl_vessels = db.tbl_vessels;
          DataSourceResult result = tbl_vessels.ToDataSourceResult(request,
              
              c => new tbl_vessels
               
          {
              vessel_idx = c.vessel_idx,
              vessel_name = c.vessel_name,               
              spotlist_dp = c.spotlist_dp,
              spotlist_bhp = c.spotlist_bhp,
              spotlist_deck = c.spotlist_deck,
              spotlist_bp = c.spotlist_bp,
              spotlist_oilrec = c.spotlist_oilrec,
              spotlist_fifi = c.spotlist_fifi,
              spotlist_rov = c.spotlist_rov,
              charterer_info = c.charterer_info
          });
          JsonResult data;
 
          if (param_bhp == null && param_deck == null)
          {
              data = Json(tbl_vessels);
          }
          else
          {
              data = Json(tbl_vessels.Where(
                  w => w.spotlist_bhp > param_bhp[0] &&
                       w.spotlist_bhp < param_bhp[1] &&
                       w.spotlist_deck > param_deck[0] &&
                       w.spotlist_deck < param_deck[1]
                  ).ToDataSourceResult(request));
          }
          return data;
      }

As you can see I also have sliders which means that my dataresults need to be enumerable, IQueryable isn't allowed on array.  So how can I add some conditions to the DataSourseResult like "Where" etc??

 

Thanks

Rosen
Telerik team
 answered on 29 Feb 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?