Telerik Forums
UI for ASP.NET MVC Forum
5 answers
947 views

Hello,

I'm trying to create a custom validator in a grid (which is using GridEditMode.InCell) but when the validation fail it shows the validation error just for a few milliseconds and then hide it. However when I left the field empty the default error "The xxxxx filed is required." is showed and do not disappear.

What should I do to achieve the same result with my custom validator?

The custom validator is the same I used in this question

http://www.telerik.com/forums/need-help-creating-two-kendo-validators-in-the-same-view#pzfZKgPe7UqXkPnRyN4grg

Thank you.

PS: I've attached a screenshot displaying the default required validator.
Konstantin Dikov
Telerik team
 answered on 13 Feb 2017
1 answer
1.7K+ views

I have a page that has a grid which autobinds when the page loads.  When the page initially shows, the grid is empty and loading, executing the read action.  Unfortunately it's taking a small bit of time, but to the user it shows nothing.  So I implemented my own progress spinner, it's kind of our company standard spinner/mascot...  So now when the page loads, the grid is empty but my own custom spinner shows appropriately, and in the DataBound event I turn off the spinner.  All good so far...

 

However, doing anything within the grid, such as grouping, sorting, etc... is all handled by the server, and the grid shows it's own little spinner animation.  Well this is a bit jarring to the user, different spinners.  So what do I need to change or override to replace the built in progress spoinner thing with my own?  And if I do that, when the grid is empty and doing it's initial load, would it then be hidden such as the builtin one is?  And if so, how can I override that and get it to do what I want, when I want.

Alex Hajigeorgieva
Telerik team
 answered on 13 Feb 2017
6 answers
389 views

When using the MVC Grid, and I group by a date, it shows: "Receipt Date: Tue Jan 24 2017 00:00:00 GMT-0700 (US Mountain Standard Time)", when all I want is the field name, followed by the date, formatted as a date.  "Receipt Date: 01/24/2017"  How can I get this?

 

Viktor Tachev
Telerik team
 answered on 13 Feb 2017
2 answers
139 views

For some reason my DatePickerFor isn't working. It's height is always only 39px. So all I can see is pretty much the header. A photo of the issue is attached. Here's the code for the DatePickerFor:

<div class="row">
  <div class="col-sm-4 col-md-3">
    @Html.LabelFor(m => m.DATEFROM, translator.Translate("DATEFROM"), new
    {
      @class = "control-label"
    })
   @(Html.Kendo().DatePickerFor(m => m.DATEFROM).Format("dd.MM.yyyy").HtmlAttributes(new
   {
     style = "width:100%;"
   }))
  </div>
</div>

 

Jokull
Top achievements
Rank 1
 answered on 11 Feb 2017
2 answers
223 views

I'm trying to launch a view which just has a grid in it, but I want to pass in an id to filter the read from the db

Maybe someone can point out what I'm doing wrong.

Here is my call, although I think I really want the read transport

                    @Html.ActionLink("Good Sample List", "Index", "Grid", null, null) @*This works but reads all the rows*@
                    @Html.ActionLink("Sample List", "Index", "Grid", new { id = Model.id }, null) @*This Doesn't*@

What happens is with both calls the Index constructor gets called.  When I don't send in an id it calls the AttributeOptions_Read next.

If I call it with an id the Index constructor get called  with the correct id, then it calls it without an id.  The AttributeOptions_Read is never called.

Here is the controller with some code commented out and using test data instead of my real data.  Hopefully this works the same as on my system.

Code was generated with the Kendo UI Scaffolder

using System;
 using System.Collections.Generic;
 using System.Data.Entity;
 using System.Linq;
 using System.Web.Mvc;
 using Kendo.Mvc.Extensions;
 using Kendo.Mvc.UI;
 //using riteTIME_WebApi.Data;
 
namespace riteTIME_WebApi.Controllers.MVC
{
    public class TestData
    {
        public Guid id { get; set; }
        public Guid attribute_id { get; set; }
        public string value { get; set; }
    }
    public class GridController : Controller
    {
 
        // Generated
        public ActionResult Index()
        {
            return View();
        }
 
        // My version, doesn't do what I expect.
        //public ActionResult Index(Guid? id)
        //{
        //    return View();
        //}
 
        public ActionResult AttributeOptions_Read([DataSourceRequest]DataSourceRequest request)
        {
 
            // I would like to be able to query the db using the attribute_id
 
            var options = new List<TestData>();
 
            options.Add(
                new TestData
                {
                    id = new Guid("1B7EC29F-E2D8-E611-8114-00155DDF5703"),
                    attribute_id = new Guid("F5352D7F-E2D8-E611-8114-00155DDF5703"),
                    value = "Test1 A"
                });
            options.Add(new TestData
            {
                id = new Guid("1C7EC29F-E2D8-E611-8114-00155DDF5703"),
                attribute_id = new Guid("F5352D7F-E2D8-E611-8114-00155DDF5703"),
                value = "Test2"
            });
            options.Add(new TestData
            {
                id = new Guid("1D7EC29F-E2D8-E611-8114-00155DDF5703"),
                attribute_id = new Guid("F5352D7F-E2D8-E611-8114-00155DDF5703"),
                value = "Test3"
            });
            IQueryable<TestData> attributeoptions = options.AsQueryable();
 
            DataSourceResult result = attributeoptions.ToDataSourceResult(request, attributeOption => new
            {
                attributeOption.id,
                attributeOption.value,
                attributeOption.attribute_id
            });
 
            return Json(result);
        }
 
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult AttributeOptions_Create([DataSourceRequest]DataSourceRequest request, TestData attributeOption)
        {
            if (ModelState.IsValid)
            {
                //var entity = new AttributeOption
                //{
                //    value = attributeOption.value
                //};
 
                //db.AttributeOptions.Add(entity);
                //db.SaveChanges();
                attributeOption.id = Guid.NewGuid();
            }
 
            return Json(new[] { attributeOption }.ToDataSourceResult(request, ModelState));
        }
 
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult AttributeOptions_Update([DataSourceRequest]DataSourceRequest request, TestData attributeOption)
        {
            if (ModelState.IsValid)
            {
                //var entity = new AttributeOption
                //{
                //    id = attributeOption.id,
                //    value = attributeOption.value
                //};
 
                //db.AttributeOptions.Attach(entity);
                //db.Entry(entity).State = EntityState.Modified;
                //db.SaveChanges();
            }
 
            return Json(new[] { attributeOption }.ToDataSourceResult(request, ModelState));
        }
 
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult AttributeOptions_Destroy([DataSourceRequest]DataSourceRequest request, TestData attributeOption)
        {
            if (ModelState.IsValid)
            {
                //var entity = new AttributeOption
                //{
                //    id = attributeOption.id,
                //    value = attributeOption.value
                //};
 
                //db.AttributeOptions.Attach(entity);
                //db.AttributeOptions.Remove(entity);
                //db.SaveChanges();
            }
 
            return Json(new[] { attributeOption }.ToDataSourceResult(request, ModelState));
        }
 
        protected override void Dispose(bool disposing)
        {
            //db.Dispose();
            base.Dispose(disposing);
        }
    }
}

 

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        height: 400,
        columns: [
            { field: "value" },
            { hidden: true, field: "id" },
            { hidden: true, field: "attribute_id" },
            {command: [ "edit" , "destroy"], width: 180 }
        ],
        toolbar: ["create"],
        dataSource: {
            type: "aspnetmvc-ajax",
            transport: {
                read: {
                     url: "AttributeOptions_Read"
                },
                create: {
                    url: "AttributeOptions_Create"
                },
                update: {
                    url: "AttributeOptions_Update"
                },
                destroy: {
                    url: "AttributeOptions_Destroy"
                }
            },
            schema: {
                data: "Data",
                model: {
                    id: "id",
                    fields: {
                        //id: { type: "number"},
                        value: { type: "string" }
                        // attribute_id:{ type: "number"}
                    }
                }
            },
            serverPaging: true,
            serverSorting: true,
            serverSorting: true,
        },
        editable: "inline",
        scrollable: true
    })
 
</script>
Jeff
Top achievements
Rank 1
 answered on 10 Feb 2017
1 answer
87 views

Hi people.

I'm implementing PivotGrid on my ASP.NET MVC application. With the Grid component, I was able to make filters based on a selection of which values I want due to bounded columns capture feature.

Is there something like this on PivotGrid?

In Grid component. I've done the filter just like this:

                    var bounded = gridColumns.Bound(dataTableCol.GetType(), dataTableCol.ToString());
                    // If the column has a multicheckbox filter - set it based on column definition
                    var customFilterColumn = Model.columns.SingleOrDefault(item => item.ColumnName.Equals(dataTableCol.ToString()));
                    if (customFilterColumn != null)
                    {
                        bounded.Filterable(ftb => ftb
                            .Multi(true)
                            .Cell(cell =>
                            cell.DataSource(ds =>
                                // This is the action that will return the filter unique values
                                ds.Read("MultiFilter_read", "Consulta", new { columnId = customFilterColumn.Id }))));
                        bounded.Width(300);
                    }

 

In "Consulta/MultiFilter_read" action I make a search on database returning the possible values for that column, applying them to the respective bounded column. This instructions I've put on Columns property of the Grid HtmlHelper, and I'm doing PivotGrid with HtmlHelpers too.

 

Angel Petrov
Telerik team
 answered on 10 Feb 2017
1 answer
462 views

Hi,

I'm using the following template to display values in a ComboBox:

.Template("Name: <strong>#: data.FirstName # #: data.LastName #</strong> Organisation: #: data.Organisation #<br>Email: #: data.Email #, Telephone: #: data.Telephone # <br>-----------------------------")

It's working fine except that null values from the database are actually displayed as 'null' in the display. For example, Name: null null Organisation: null.

I've tried filtering the data on the server so it replaced null values with "" but that didn't seem to work.

How can I replace the text 'null' with just a blank value?

Thanks

Tim

Ivan Danchev
Telerik team
 answered on 10 Feb 2017
3 answers
110 views

I cannot select 0 in the example below. I could convert the data to a string type but that would not fit the underlying data. Does anybody have a fix for this issue?

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"/>

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
  
<input id="dropdownlist" />
<script>
  $("#dropdownlist").kendoDropDownList({
    dataSource: [ 0, 1 ],
    optionLabel: "Select"
  });
</script>
</body>
</html>

Ivan Danchev
Telerik team
 answered on 10 Feb 2017
2 answers
209 views
public ActionResult AgentIndex([DataSourceRequest] DataSourceRequest request, string agencyNum)
    {
        
        using (var CB = new CentralBillingEntities())
        {
            var result = CB.GetAgentViewInfo(agencyNum).ToList();
            return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }
        
    }     

 

When I set a breakpoint I actually see the value for my GetAgentViewInfo coming through. But, the grid just flashes and the data never comes back. What am I doing wrong?

Here's the rest of my code:

 

@model IEnumerable<CentralBilling.Models.CentralBillingEntities>
@{
    ViewBag.Title = "View";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="center">
    <h3><u>Agent View</u></h3>
 </div><br />
 
<div>
    @(Html.Kendo().DropDownList()
        .Name("ddlAgency")
        .Events(e => e.Change("agencyChange"))
        .BindTo(new List<SelectListItem>()
          {
                new SelectListItem() { Text = "" },
                new SelectListItem() { Text = "250-Louisville", Value = "U00250" },
                new SelectListItem() { Text = "590-OKC", Value = "U00590"},
          }
 
    ))
</div>
    <div>
 
@(Html.Kendo().Grid<CentralBilling.Models.GetAgentViewInfo_Result>()
         .Name("gridAgent")
         .DataSource(datasource => datasource
         .Ajax()
         .Read(read => read.Action("AgentIndex", "Agent")))
         .Columns(columns =>
                {
 
                columns.Bound(o => o.Req).Width("130px").Title("Request Submission").Template(
                    @<text>
                        @Html.ActionLink("GetAgentDetail", "Agent", new { controller = "Agent", id = item.Full_Order_Number })
                    </text>
                         ).ClientTemplate(@"<a href=/Agent/GetAgentDetail?id=#= Full_Order_Number #>#= Req #</a>");
 
                    columns.Bound(o => o.Master_OrderNum).Width("150px");
                    columns.Bound(o => o.Shipper).Width("175px");
                    columns.Bound(o => o.aom_shipment_type).Title("MoveType").Width("100px");
                    columns.Bound(o => o.AccountHeader).Width("150px");
                    columns.Bound(o => o.EarlyLoadDate).Format("{0:MM/dd/yyyy}").Width("135px");
                    columns.Bound(o => o.Date_Delv_Act).Format("{0:MM/dd/yyyy}").Width("135px");
                    columns.Bound(o => o.Book_Agent).Width("135px");
                    columns.Bound(o => o.Haul_Agent).Width("135px");
                    columns.Bound(o => o.Org_Agent).Width("135px");
                    columns.Bound(o => o.Dest_Agent).Width("135px");
                })
 
                .HtmlAttributes(new { style = "height: 550px" })
                .Resizable(resize => resize.Columns(true))
                .Sortable()
                .Scrollable()
                .Filterable()
        )
 
 
    </div>
 
<script type="text/javascript" language="javascript">
 
    function agencyChange() {
        var ddlAgency = $("#ddlAgency").val();
        alert("Drop down list value is: " + ddlAgency);
        $.get('/Agent/AgentIndex', { agencyNum: ddlAgency }, function (data) {
            onDataUpdated();
     });
}
function onDataUpdated() {
    var grid = $("#gridAgent").data("kendoGrid");
    grid.dataSource.read();
}
</script>
Nick
Top achievements
Rank 1
 answered on 09 Feb 2017
25 answers
906 views
Using UTC time on both client and server sides.
This project shows how to keep a DateTime property in UTC format on both server and client sides when using a Grid with Ajax Binding and editing.     

Kendo UI
Top achievements
Rank 1
 answered on 09 Feb 2017
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?