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

I am attempting to enable server-side filtering for my ASP.NET MVC Grid. I have tried every tutorial, walkthrough, and blog post I could find, but with no success.

I would like to, on page load, call out to my data source and return just the first 25 records, but alert the grid of the total record count so that it can display the appropriate number of pages. Here is my Grid Razor code:

@(Html.Kendo().Grid<ViewModel>().Name("MyGrid").EnableCustomBinding(true).Columns(columns =>
  {
    columns.Bound(c => c.FieldA);
    columns.Bound(c => c.FieldB);
    columns.Bound(c => c.FieldC);
    columns.Bound(c => c.FieldD);
  }).ClientDetailTemplateId("DetailsTemplate").HtmlAttributes(new {@class = "myClass"}).DataSource(dataSource => dataSource
      .Ajax()
      .Read(read => read
        .Action("Data_Read", "MyController"))
    ).AutoBind(false).Events(events =>
    {
      events.DetailCollapse("setDetailIndicatorToExpand");
      events.DetailExpand("setDetailIndicatorToCollapse");
      events.DataBound("replaceDetailTemplateIndicatorStyle");
    }).Pageable().Deferred())

This was done by following this article: http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/binding/custom-binding#configuration-Apply

I have tried many variations of this, including removing AutoBind(). As far as I can tell, part of my issue is that I am not defining what the PageSizes are; whenever I set the PageSizes value I get an error of "Uncaught TypeError: r._query is not a function".

No matter what I try, the page count is always 0.

From the server-side, I am using the PageSize and Page number from the DataSourceRequest object to pass in as parameters to my data source. I am then returning the following:

var result = new DataSourceResult
{
    Data = myData,
    Total = 300 // this is dynamic, just hardcoded here as an example
};
 
return Json(result);

Can someone please assist?

Thank you.

Jesse
Top achievements
Rank 1
Veteran
 answered on 26 Apr 2018
1 answer
157 views

Hi

i am new in Kendo Scheduler.

I am wondering how to have multiple date time picker for startdate and enddate for each employee while adding event.

currently in kendo schedule there is one start and end date for event, but i want to relate it with individual employee to note timing of each employee in one go,

e.g 

while adding an event of type "Staf Meeting"

i want to select timing for each employee. timing could be different for each employee.

can any one help me ?

Veselin Tsvetanov
Telerik team
 answered on 26 Apr 2018
1 answer
154 views

     I am using the Razor wrappers for creating a Gantt chart.  I have it displaying without issues, and people are happy.  However, I also need to convert it into an image to save locally on the server.   I see a lot of places where the JQuery works to save it as an image, but is there a way to render it as an image directly from Razor?

 

Veselin Tsvetanov
Telerik team
 answered on 25 Apr 2018
9 answers
1.9K+ views
I haven't found any good examples on this that used the ASP.NET MVC.  The button will open up a partial view in a pop-up window.  The id field from the grid row needs to be used to pull data for the pop-up window.  Does anyone have an example of this using the ASP.NET MVC controls?

So far, I haven't been able to execute the "OpenContractRate" method that I mention in the javascript function below.

Here is what I've tried so far...

Kendo Grid:
@(Html.Kendo().Grid<TMS.Domain.Operations.TIMS.CoreObjects.ContractOrderEvent>()
    .Name("ContractDetailOrderEventGrid")
    .Columns(columns =>
    {
        columns.Command(o =>
        {
            o.Destroy();
            o.Edit();
        }).Width(100);
        columns.Bound(o => o.ContractTypeName).Width(100);
        columns.Bound(o => o.OrderLevelFlag).Width(50);
        columns.Command(command => command.Custom("Update").Click("ShowRates")).Width(75);
        columns.Bound(o => o.InvoiceDescription).Width(100);
        columns.Bound(o => o.SourceContainerOwner).Width(100);
        columns.Bound(o => o.DestContainerOwner).Width(100);
        columns.Bound(o => o.SourceContainerTypeName).Width(100).Title("Src Container Type");
        columns.Bound(o => o.DestContainerTypeName).Width(100);
    })
        .Scrollable(scrolling => scrolling.Enabled(true).Height("250px"))
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Sortable(sorting => sorting.Enabled(true))
        .Pageable(paging => paging.Enabled(false))
        .Resizable(resizing => resizing.Columns(true))
        .Filterable(filtering => filtering.Enabled(true))
        .Groupable(grouping => grouping.Enabled(true))
        .DataSource(dataSource => dataSource
           .Ajax()
           .Model(model => model.Id(p => p.ContractOrderEventId))
           .Read(read => read.Action("ReadContractOrderEvent", "ContractGrid", new { contractId = Model.DetailModel.ContractId } ))
           .Update(update => update.Action("UpdateContractOrderEvent", "ContractGrid"))
           .Destroy(update => update.Action("DestroyContractOrderEvent", "ContractGrid"))
        )
)
Kendo Window:
@(Html.Kendo().Window()
    .Name("Rates")
    .Title("Rates")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(500)
    .Height(500)
)
Javascript function:

<script>
function ShowRates(e) {
  
        var direction = "ContractRateAdmin/OpenContractRate";
        var wnd = $("#Rates").data("kendoWindow");
  
        if (!wnd) {
            // first click of the button - will automatically fetch the contentUrl
            wnd = $("#Rates").kendoWindow({
                title: "Rates",
                actions: [ "Close"],
                content: direction,
                width: "800px",
                height: "600px",
                visible: false,
                modal: true
            }).data("kendoWindow");
        }
        wnd.refresh(direction);
        wnd.center();
        wnd.open();
  
    }
  
</script>
Controller Action:

[HttpGet, ImportModelStateFromTempData, HttpParamAction]
        public ActionResult OpenContractRate()
        {
            ContractAdminRateModel model = new ContractAdminRateModel();
            model.EffectiveDate = DateTime.Now;
  
            // Return the view
            return PartialView(Url.Content("~/Views/Admin/Contracts/AdminContractsDetailRates.cshtml"), model);
        }
Partial View to show in pop-up window:
@model TMS.MVC.TIMS.Models.Admin.Contract.ContractAdminRateModel
  
@{  
    var htmlWidthDefault = "width: 250px;"; 
 }
  
@using (Html.BeginForm(HttpParamActionAttribute.TIMSActionName, "ContractRateAdmin"))
<table>
  
<tr>
    <td><span class="FieldLabel">Effective Date:</span></td>
    <td>
        @Html.Partial(Url.Content("~/Views/Admin/Contracts/FieldTemplates/ContractDetailRate_EffectiveDate.cshtml"))
    </td>
      
</table>    
  
}
Viktor Tachev
Telerik team
 answered on 24 Apr 2018
1 answer
194 views
Hi, i have the try version of kendo  R1 2018 , when i export to pdf using kendo dom drawing , all elements with its values show, except the kendo editor, it show without values , is there a way to solve this issue ?   , i need to show the kendo editor with it values in the pdf.
Ivan Danchev
Telerik team
 answered on 23 Apr 2018
2 answers
115 views

Here we have my combobox:

@(Html.Kendo().ComboBox()
    .Name("depots")
    .DataTextField("Text")
    .DataValueField("Value")
    .Height(500)
    .Filter(FilterType.Contains)
    .Events(ev =>
    {
        ev.Change("onDepotsChangeEvent");
        ev.DataBound("onDepotsDataBoundEvent");
        ev.Select("onDepotsSelectEvent");
    })
    .HighlightFirst(true)
    .Suggest(true)
    .Value(SOME INITIAL VALUE)
    .HtmlAttributes(new { style = "width:550px; max-width:100%;" })
    .DataSource(source => source.Custom()
        .Group(group => group.Add("Group", typeof(string)))
        .Transport(transport => transport
            .Read(read =>
            {
                // Censored ;)
            })
        )
    )
)

As you can see, I am setting an initial value with the ".Value(something something". This means that when the combobox loads, the item on the list corresponding to the value, is selected. It works fine as intended.

The problem is when there is not an item with a value corresponding to the initial set value. If that happens, the initial value is shown in the input field of the combobox. After searching around, this is apparently by design and not an error.

What I want to do is, if an item does not exist in the combobox, with the same value as the initial set value, the first item on the list should be selected.

I have searched and searched for days now, with no solution, so any help would be greatly appreciated.

In case it matters, here are the three event methods:

function onDepotsSelectEvent(e) {
    if (e.item) {
        var dataItem = this.dataItem(e.item.index());
        $.post("@Url.Action("SetSelectedDepotSession", "PartialView")", { id: dataItem.Value });
    }
}
 
function onDepotsChangeEvent(e)
{
    if (this.value() && this.selectedIndex === -1) {
        this._filterSource({
            value: "",
            field: this.options.dataTextField,
            operator: "contains"
        });
        this.select(1);
    }
}
 
function onDepotsDataBoundEvent(e)
{
    var widget = e.sender;
 
    if (widget.dataSource.view().length === 0) {
        widget.text("");
        widget.enable(false);
    }
}
Dimitar
Telerik team
 answered on 23 Apr 2018
2 answers
372 views

I'm trying to use GridEditMode.PopUp to enter times.  I currently get the full date in a text box (see pic)

I originally used InLineEditing and was able to use the following:

columns.Bound(c => c.Arrival).Format("{0: HH:mm}").EditorTemplateName("TimeEdit");

 

This however does not work for PopUp editing.  I found out that in order to make the "Name" column not editable in PopUp editing I had to create the following function in the view:

 

    function EditGrid(e) {
        if (!e.model.isNew()) {
            $('#Name').attr('readonly', 'readonly');
        }
    }

 

I am guessing in this function is where I may be able to set the Arrive box to a time picker, but I can't find anything to work. 

Stefan
Telerik team
 answered on 23 Apr 2018
1 answer
2.0K+ views

Hi there 

I have a model with a property marked up like this.

[Required]
[EmailAddress]
[Display(Name = "Username", ResourceType = typeof(MyResource))]
public string Username { get; set; }

 

The display name of the username property maps to a string "Email".

When i leave the field in the grid blank and update the row, a validation message is shown that correctly says "Email is required."
If i provide an invalid email address and update the row, a validation message is shown that incorrectly says "Username is not valid email"

I have tried applying my own validation message to the Username property with the following modifications to the model.

[Required]
[EmailAddress(ErrorMessageResourceName = "InvalidEmail", ErrorMessageResourceType = typeof(MyResource))]
[Display(Name = "Username", ResourceType = typeof(MyReouce))]
public string Username {get;set;}

 

Both of the above scenarios produce the same results with the above modifications.

What should the expected behavior be for the email validation message? (e.g use property name or display name attribute)

How do i provide a custom message for the email validation?

Viktor Tachev
Telerik team
 answered on 20 Apr 2018
1 answer
407 views

Hi, 
I hope someone can help me with is. I used the basic usage example (from the demo page) and built upon this to be able to read data from my database and then capture both lists in my controller. List two works as expected, however when re-ordering list one, the list item index remains the same. 

View

@(Html.Kendo().ListBox()
                            .Name("RegionOne")
                            .DataValueField("Id")
                            .DataTextField("Name")
                            .DataSource(source => source
                                    .Read(read => read.Action("_GetAvailableDashboardItems_ListOne", "Home"))
                            )
                            .Toolbar(toolbar =>
                            {
                                toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
                                toolbar.Tools(tools => tools
                                    .MoveUp()
                                    .MoveDown()
                                    .TransferTo()
                                    .TransferFrom()
                                    .TransferAllTo()
                                    .TransferAllFrom()
                                //.Remove()
                                );
                            })
                            .Events(events => events
                                .Reorder("test")
                            )
                            .ConnectWith("RegionTwo")
                            .BindTo(Model.RegionOne)
                        )
 
                        @(Html.Kendo().ListBox()
                            .Name("RegionTwo")
                            .DataValueField("Id")
                            .DataTextField("Name")
                            .DataSource(source => source
                                    .Read(read => read.Action("_GetAvailableDashboardItems_ListTwo", "Home"))
                            )
                            .BindTo(Model.RegionTwo)
                            .Selectable(ListBoxSelectable.Multiple)
                            .ConnectWith("RegionOne")
                        )

 

Controller

public JsonResult _GetAvailableDashboardItems_ListOne()
        {
            var items = _userTask.GetAvailableDashboardItems(CurrentUserId, false);
            return Json(items, JsonRequestBehavior.AllowGet);
        }
 
 public JsonResult _GetAvailableDashboardItems_ListTwo()
        {
            var items = _userTask.GetAvailableDashboardItems(CurrentUserId, true);
            return Json(items, JsonRequestBehavior.AllowGet);
        }

 

Task 

public IEnumerable<AvailableDashboardItems> GetAvailableDashboardItems(string userId, bool Region)
        {
            var userItems = _userRepository.GetUserDashboardItems(userId);
            if (userItems.Count() != 0)
            {
                var items = userItems.Where(x => x.Region == Region).OrderBy(x => x.Position);
                return Mapper.Map<IEnumerable<UserDashboardItem>, IEnumerable<AvailableDashboardItems>>(items);
            }
            else
            {
                if (!Region)
                    return Mapper.Map<IEnumerable<DashboardItem>, IEnumerable<AvailableDashboardItems>>(_userRepository.GetAvailableDashboardItems());
            }
            return null;
        }

 

Any help would be greatly appreciated, Thanks 

Rich

Stefan
Telerik team
 answered on 20 Apr 2018
1 answer
270 views

Hello, when using a sortaable list is it possible to ignore more than one type of input?  Here is my code:

@(Html.Kendo().Sortable()
    .For("#Termset")
    .ConnectWith("#AnotherWindow")                  
    .Ignore("input")
    .PlaceholderHandler("placeholder")
    .Cursor("url('" + Url.Content("~/content/web/sortable/grabbing.cur") + "'), default")
)

As you can see I have defined "ignore" to pass over input fields so that the user can still enter data, I have other elements though which I need it to ignore.  Can you define multiple elements for the sortable list to ignore?

 

Thanks

 

Alex Hajigeorgieva
Telerik team
 answered on 19 Apr 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?