Telerik Forums
UI for ASP.NET MVC Forum
9 answers
2.7K+ views
I have a Kendo DatePicker control on a page in an MVC app:

@(Html.Kendo()
.DatePicker()
.Name("PlanStartDate")
.HtmlAttributes(new { @class = "reportParam" })
.Value(Model.MinDate)
.Min(Model.MinDate.ToShortDateString())
.Max(Model.MaxDate.ToShortDateString())
)


Note that I am setting .Min and .Max values. These min and max
values correctly limit the calendar drop down to the proper date range:
"9/10/2013" to "9/10/2014".

Unfortunately, the user can still enter dates outside of the Min
and Max dates by using the input textbox instead of the calendar dropdown.

I'm aware that I can add JavaScript to create rules and messages
on the control's kendoValidator object, but I'm looking for the simplest,
hopefully Razor-only solution to enforce the max and min range on the
datepicker, no matter how the user enters the date.
Dimiter Madjarov
Telerik team
 answered on 17 Feb 2015
0 answers
113 views
Hi,
I am new to both mvc and Telerik mvc components. Apologies if this is the wrong place to ask for assistance.

I am developing a page that has a menu that consists of a list of buttons that set up a category.
Below this I have an MVC Listview.
If say the "Travel" category is chosen then I want to change the listview to display "Travel" type information.
I know that I can make the button force a postback and then reload the page with "Travel" stuff.

I want to know if there is an ajaxy way of doing this.
ie I would like to make the listview change what it displays as the menu above it changes.

Any advice or help would be appreciated.

Thanks in advance.

Niall
Keri
Top achievements
Rank 1
 asked on 16 Feb 2015
2 answers
362 views
How would one go about changing the demo at ...

http://demos.telerik.com/aspnet-mvc/grid/editing

to incorporate a footer that includes the total sum (or sum of shown items, whichever is easier) of the price field?  I was able to use Aggregates and ClientFooterTemplate to get a sum to show, but I want it to update as you lose focus of the control that contains values that affect the sum.  

So for example, when you delete a record the sum should reflect the change.  If you add a new record, enter a value and exit the control the value should change.  Also, if you edit the value of an existing price and exit the control (lose focus) the sum at the bottom should update.

Also, I'd like access to the sum in the footer client side (via jQuery?) for other actions. 

Any pointers?

G
Deamon
Top achievements
Rank 2
 answered on 16 Feb 2015
2 answers
122 views
I am using MVC5 wrappers for DateTIme in Kendo  Grid (ASP NET MVC wrappers)
My application works correctly when test it locally for date time, however when I deploy it on Azure website then issues starts. Timezone gets added to the datetime picker at time of display. I would like to keep it as UTC and not finding any proper solution.

I looked at following links but found none for MVC wrappers. I did not get what exactly to be done.
http://www.telerik.com/support/code-library/using-utc-time-on-both-client-and-server-sides
http://www.telerik.com/forums/timezone-issue
http://stackoverflow.com/questions/18718996/format-datetime-in-kendo-ui-grid-using-asp-net-mvc-wrapper

So as a fallback approach, I just converted date time to string as mydate.ToString("MM/dd/yyyy hh:mm tt");
However, I do not think this is right approach and feel there has to be better way rather than converting to string. Please let me know the correct solution and any sample code will help for using Datetime (Time is important for me) with Kendo Grid.
Alexander Popov
Telerik team
 answered on 16 Feb 2015
1 answer
98 views
For each day on the calendar, I was hoping to add some dynamic content, for an example, a count of events for the day or total hours in meetings for that day. Even the stock price for that day.

Anyone ever tried? Thoughts?

Jeff
Kiril Nikolov
Telerik team
 answered on 16 Feb 2015
4 answers
439 views
This may be way out there, but figure it can't hurt to ask.

We are using MVC Razor Grid, and have a Master/Detail grid working. However, is there any way to dynamically (ondatabound, etc) set the Detail grid for a particular Master Row as Editable(false)? The Master grid contains a year column, and we want the Details grids to only be editable if the year is the current year or later. Can the Grid's Editable attribute be set by jquery?
Alexander Popov
Telerik team
 answered on 16 Feb 2015
1 answer
96 views

Hi,

I'm using a grid wich keep state without problem
My only problem is that when the grid is rebuild, my toolbar ( export to excell ) has disapeard.

@(Html.Kendo().Grid<UserCustomizedViewModel>()
.Name("grid")
.DataSource(dataSource => dataSource
.Ajax()
.Aggregates(aggregates =>
{
aggregates.Add(p => p.Origin_Code).Count();
})
.Read(read => read.Action("UserCustomizedRead", "Rdr")
.Data("asco.rdrReadData"))
.Model(model => model.Id(rdr => rdr.Id))
.PageSize(50)
.Sort(sort => sort.Add(model => model.RdrNumber).Descending())
.Events(events =>
{
events.Error("onGridDataSourceError");
events.Change("onGridDataSourceChange");
}))
.Events(events => events.DataBound("onGridDataBound"))
.Columns(columns =>
{
columns.Bound(model => model.Origin_Code)
.Title(Global.ColumnOrigin)
.ClientTemplate("<span class='tooltips' data-placement='top' title='#= Origin_Value_English #'>#= Origin_Code # </span>")
.Visible(currentCulture == Cultures.En)
.Width(20)
.ClientGroupFooterTemplate("Count: #=count#");
columns.Bound(model => model.Origin_Code)
.Title(Global.ColumnOrigin)
.ClientTemplate("<span class='tooltips' data-placement='top' title='#= Origin_Value_French #'>#= Origin_Code # </span>")
.Visible(currentCulture == Cultures.Fr)
.Width(20)
.ClientGroupFooterTemplate("Count: #=count#");
columns.Bound(model => model.Origin_Code)
.Title(Global.ColumnOrigin)
.ClientTemplate("<span class='tooltips' data-placement='top' title='#= Origin_Value_German #'>#= Origin_Code # </span>")
.Visible(currentCulture == Cultures.De)
.Width(20)
.ClientGroupFooterTemplate("Count: #=count#");
columns.Bound(model => model.Origin_Code)
.Title(Global.ColumnOrigin)
.ClientTemplate("<span class='tooltips' data-placement='top' title='#= Origin_Value_Dutch #'>#= Origin_Code # </span>")
.Visible(currentCulture == Cultures.Nl)
.Width(20)
.ClientGroupFooterTemplate("Count: #=count#");
columns.Bound(model => model.RdrNumber)
.Title(Global.ColumnRdrNumber)
.ClientTemplate(Html.ActionLink("#= RdrNumber #", "Edit", new { id = "id" }).ToHtmlString().Replace("id", "#=Id#"))
.Width(70);
columns.Bound(model => model.RdrStatus_Value_English)
.Title(Global.ColumnRdrStatusType)
.Visible(currentCulture == Cultures.En)
.Width(70);
columns.Bound(model => model.RdrStatus_Value_German)
.Title(Global.ColumnRdrStatusType)
.Visible(currentCulture == Cultures.De)
.Width(70);
columns.Bound(model => model.RdrStatus_Value_French)
.Title(Global.ColumnRdrStatusType)
.Visible(currentCulture == Cultures.Fr)
.Width(70);
columns.Bound(model => model.RdrStatus_Value_Dutch)
.Title(Global.ColumnRdrStatusType)
.Visible(currentCulture == Cultures.Nl)
.Width(70);
columns.Bound(model => model.CreatedOn)
.Title(Global.ColumnCreatedOn)
.Format("{0:dd/MM/yyyy}")
.Width(100);
columns.Bound(model => model.CreatedByText)
.Title(Global.ColumnCreatedBy)
.Width(150);

})
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.FileName("Kendo UI Grid Export.xlsx")
.Filterable(true)
.AllPages(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Rdr"))
)
.Reorderable(r => r.Columns(true))
.Resizable(r => r.Columns(true))
.Groupable()
.ColumnMenu()
.Pageable(pager => pager
.Refresh(true)
.PageSizes(new[] { 50,100, 200, 500, 1000, 3000 })
.Messages(messages =>
{
messages.Refresh(Global.GridPagerClickToRefresh);
messages.ItemsPerPage(Global.GridPagerItemsPerPage);
messages.Of(Global.GridPagerOf);
messages.Next(Global.GridPagerNext);
messages.Last(Global.GridPagerLast);
messages.First(Global.GridPagerFirst);
messages.Previous(Global.GridPagerPrevious);
messages.Page(Global.GridPagerPage);
messages.Empty(Global.GridPagerEmpty);
messages.Display(Global.GridPagerDisplay);
}))
.Filterable(filter =>
{
filter.Extra(true);
filter.Messages(messages =>
{
messages.And(Global.GridFilterAnd);
messages.Clear(Global.GridFilterClear);
messages.Filter(Global.GridFilterFilter);
messages.Info(Global.GridFilterInfo);
messages.IsFalse(Global.GridFilterIsFalse);
messages.IsTrue(Global.GridFilterIsTrue);
messages.Or(Global.GridFilterOr);
messages.SelectValue(Global.GridFilterSelectedValue);
});
filter.Operators(oper => oper.ForString(messages =>
{
messages.Clear();
messages.IsEqualTo(Global.GridFilterIsEqualTo);
messages.Contains(Global.GridFilterContains);
messages.StartsWith(Global.GridFilterStartsWith);
}));
})
//.Sortable(sortable => sortable.AllowUnsort(false))
)

Here is the code that load the state of my grid

var grid = $("#grid").data("kendoGrid");
//var dataSource = grid.dataSource;
var url = $("#LoadGridState").data('request-url');
var GridName = $("#SaveGridState").data('gridname');
$.ajax({
url: url,
type: 'POST',
async: false,
//cache: false,
data: {
GridName: GridName
},
success: function (state) {
try{
state = JSON.parse(state);
var options = grid.options;
options.columns = state.columns;
options.dataSource.page = state.page;
options.dataSource.pageSize = state.pageSize;
options.dataSource.sort = state.sort;
options.dataSource.filter = state.filter;
options.dataSource.group = state.group;
grid.destroy();
$("#grid")
.empty()
.kendoGrid(options);

}
catch (e) {
}

},
error: function (request, status, errorThrown) {
window.alerts.error(errorThrown);
}
});

thanks for your help
Rosen
Telerik team
 answered on 16 Feb 2015
1 answer
122 views
Hi, I am using the Filter Row.  In the date filter, the filter will only work if user puts in full four digit year and not just the last two ("1/1/2014" works, "1/1/14" doesn't).  In the Telerik RadGrid for WebForms, the two-digit format works.  Is there anyway to enable this in Kendo?

Additionally, the demo below doesn't appear to work for the date filter when tabbing off the date input with a valid date input.
http://demos.telerik.com/aspnet-mvc/grid/filter-row
Steps to reproduce: type in 7/3/1996 for "Order Date", tab off field, all rows disappear even though many have that date
Alexander Popov
Telerik team
 answered on 13 Feb 2015
2 answers
480 views
So Here is the situation:

I am currently initializing a grid with details on the client side.  Then I am using a row template on both the regular grid and detail grid to allow check boxes.  I have it where a user checks the top grid check box, it will "select" that detail row.  The issue that I am having is getting the data of that row, if that makes sense.  It doesn't appear this works:
var grid = $("#copyHierarchyGrid").data('kendoGrid');
var allSelected = grid.select();


Here is the code:

Grid:

var element = $("#copyHierarchyGrid").kendoGrid({
                        dataSource: {
                            type: "jsonp",
                            transport: {
                                read: '/AdministerRates/GetCombinedRatesToCopy?collection=' + sCollection
                            },
                            pageSize: 6,
                            serverPaging: false,
                            serverSorting: false
                        },
                        scrollable: false,
                        height: 'auto',
                        sortable: false,
                        pageable: false,
                        detailInit: detailInit,
                        selectable: "multiple",
                        dataBound: function () {
                            this.expandRow(this.tbody.find("tr.k-master-row"));
                        },
                        columns: [
                            {
                                field: "",
                                title: "Select All",
                                width: "75px"
                            },
                            {
                                field: "ProductTypeName",
                                title: "Product Type",
                                width: "auto"
                            }
                        ]
                       , rowTemplate: kendo.template($("#rowTemplate").html())
                    }).data('kendoGrid');


Row Templates:
<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr data-uid="#: uid #" class="assignment-table-row1 k-master-row">
        <td class="k-hierarchy-cell"><a class="k-icon k-plus" href="\\#" tabindex="-1"></a></td>
        <td class="photo">
            <input type="checkbox" class="checkParent" onchange="javascript:testing('#: ProductTypeName#', this)" />
        </td>
        <td>#:ProductTypeName#</td>
 
    </tr>
</script>
<script id="detailRowTemplate" type="text/x-kendo-tmpl">
 
    <tr data-uid="#: uid #" id="#: uid #">
        <td>
            <input type="checkbox" class="checkChild" onchange="javascript:testing('#: SourceProductId#')" />
        </td>
        <td>#:SourceProductName#</td>
        <td>#:SourceStartDate#</td>
        <td>#:SourceEndDate#</td>
        <td>#:TargetProductName#</td>
        <td>#:TargetStartDate#</td>
        <td>#:TargetEndDate#</td>
 
    </tr>
</script>



function detailInit(e) {
       debugger
       $("<div/>").appendTo(e.detailCell).kendoGrid({
           dataSource: e.data.ProductDetails,
               scrollable: true,
               sortable: false,
               pageable: false,
               columns: [
                   
                   { field: "SourceProductId", title: "Select Rate", },
                   { field: "SourceProductName" },
                   { field: "SourceStartDate" },
                   { field: "SourceEndDate" },
                   { field: "TargetProductName" },
                   { field: "TargetStartDate" },
                   { field: "TargetEndDate" }
               ],
               selectable: "multiple",
               rowTemplate: kendo.template($("#detailRowTemplate").html()),
               editable: true
       });
   }











Dimiter Madjarov
Telerik team
 answered on 13 Feb 2015
1 answer
214 views
Hi there,

We are using Kendo Charts in our application. We can successfully export the charts using the following jQuery.

 var chart = $("#" + idChart).getKendoChart();
        chart.exportPDF({ paperSize: "auto", margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" } }).done(function (data) {
            kendo.saveAs({
                dataURI: data,
                fileName: "chart.pdf",
                proxyURL: "@Url.Action("Export_Save", "Home")"
            });
        });

But spanish accents are not rendering properly in the output PDF. Is there any configuration to be set?

Thank you.
Iliana Dyankova
Telerik team
 answered on 12 Feb 2015
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
DateTimePicker
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
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Iron
Iron
Andrey
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Iron
Iron
Andrey
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?