Telerik Forums
UI for ASP.NET MVC Forum
5 answers
1.2K+ views
When I change an amount, tick the checkbox etc, it triggers some javascript, which includes some code to set another field on the dataItem, so `dataItem.Set ("Amount", 0);`

I can set it using `dataItem.Amount = 0;` , but then I also need to update the contents of the <td> cell.  When I do set I obviously don't want the dirty flag clearing from other cells, as I haven't clicked 'Save changes' yet, so they are still 'dirty'.

I can't find any documentation on the .set method. It's as though it is firing other events off.

Any advice would be appreciated.

@(Html.Kendo().Grid<OurViewModel>()
.Name("Grid")
.DataSource(dataSource => dataSource
    .Ajax()
    .Model(model =>
    {
        model.Id(a => a.ID);
        model.Field(a => a.Reference).Editable(false);
        model.Field(a => a.Narrative).Editable(false);
        model.Field(a => a.Include).Editable(true);
        model.Field(a => a.Amount).Editable(true);
    })
    .Batch(true)
    .Read(read => read.Action("_Read", "Home"))
    .Update(update => update.Action("_Update", "Home"))
    .ServerOperation(false)
    .Events(events =>
    {
        events.Change("onDataSourceChange");
    })
)
.Columns(columns =>
{
    columns.Bound(a => a.Reference).Title("Reference");
    columns.Bound(a => a.Narrative).Title("Narrative");
    columns.Template(@<text></text>).Title("Include?")
        .ClientTemplate("<input type='checkbox' #= Include ? checked='checked': '' # onclick='updateAmount(this, \"#= ID#\")' />");
    columns.Bound(a => a.Amount).Title("Amount");
})
    .Events(events =>
    {
        events.Save("onSave");
        events.SaveChanges("onSaveChanges");
    })
.ToolBar(toolbar =>
{
    toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
)   

and the JS.

function updateAmount(cb, ourID) {
            var checked = $(cb).is(':checked');
            var grid = $('#Grid').data().kendoGrid;
            var dataItem = grid.dataSource.get(ourID);
            dataItem.set("Include", checked);
            if (checked) {
                dataItem.set("Amount", dataItem.get("OriginalAmount"));
            } else {
                dataItem.set("Amount", 0);
            }
       }
Samra
Top achievements
Rank 1
 answered on 07 Jul 2017
5 answers
222 views

I'm currently using a template in my scheduler, and have a button in it that depends on the id of a particular event. This works fine for single events, but I'm running into issues with recurring events. For recurring events, the id is passed to the first instance of the event shown in the scheduler, but 0 is passed to subsequent instances. This seems strange to me since all other fields (like "title") are passed to every instance. This breaks my button, as it relies on that id.

I've attached a screen shot showing the behavior. You can see that, for the recurring events, the title is displayed for every instance, but the id becomes 0 after the first instance.

Can someone explain this behavior to me? Is there a way I can get the event id to be passed to every instance of a recurring event to be used by my template?

 

Ivan Danchev
Telerik team
 answered on 06 Jul 2017
4 answers
232 views

Hello,

How do you get/read the value of the NumericTextBox right after you copy and paste the value into the box? 

 

Thanks!

Liem
Top achievements
Rank 1
 answered on 06 Jul 2017
6 answers
525 views

I have created a Task model in MVC project and populated it from SQL database through databinding. Now when I try to adjust the Task start date or end date on the Gantt I get errors. It seems like the date format retrieved from the Gantt control doesn't match the one to be stored in the SQL database. Also I don't have control over the Update method.

Can anyone help??

Joana
Telerik team
 answered on 06 Jul 2017
4 answers
18.2K+ views
I have seen this code in the documentation on getting the dataItem for a row, in this case the first row:

// get a reference to the grid widget
var grid = $("#grid").data("kendoGrid");
// returns the data item for first row
grid.dataItem(grid.tbody.find(">tr:first"));

Three other related questions:

  1. How do I find a dataItem by the selectedRow?
  2. How would I find a certain row by a unique identifier in given cell?
  3. Is it possible to find a row by the dataItem's unique Id, say one set by the dataSource.Model.Id, e.g.:
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.Model(model => model.Id(u => u.Unique_ID))
Samra
Top achievements
Rank 1
 answered on 06 Jul 2017
2 answers
216 views

I'm using a custom editor to incorporate some extra fields we are saving with our events. I am trying to set up the editor so that certain fields are hidden on an event add, but show on an event edit. I'm trying to do this by running some jQuery on document ready of the custom editor, to test if the event id is 0. What I'm finding however, is that on that event, the id is always 0 and it doesn't populate until some time later.

Do you know of any way I can get that id when document ready fires for the custom editor? Or is there another event I can use that would have the appropriate timing to get the id in time to hide those fields?

Please let me know if any code examples would be helpful.
Jackie
Top achievements
Rank 1
 answered on 05 Jul 2017
2 answers
196 views

Dear,

We have run into an issue regarding custom footer templates in combination with paging. We have an MVC grid with an Ajax datasource and clientside filtering. So we return a few thousands rows from our controller action, and let the grid control the paging and filtering. So far so good...

However we'd like to add an aggregate for standard deviation. We know how to pass cell values through a javascript function from a ClientTemplate and ClientFooterTemplate. However as you can guess, these functions do only get called for the items on the current page. So our stddev is based on 500 items only (our page size) instead of the complete grid.

Question: since the grid control itself is able to access all of its items while building up the default aggregates (count,min/max etc.) is there a way for us to access these non-visible items as well?

We tried to look at the client grid.dataSource, but this only includes the items on the page. Or is there a property we have overlooked? All items must be somewhere since the grid has uses them too, right?

We'd like to know our options before deciding to move to server side filtering, because that's quite a change from how we envisioned our app to work..

Thanks in advance!

 

 

Mark
Top achievements
Rank 1
 answered on 05 Jul 2017
1 answer
250 views

I am trying to do a simple responsive grid same like as below

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

When i resize browser then that grid looks nice but on my side its not like that and shows scrollbars

https://www.screencast.com/t/yCICRtwVjPv

and code here

https://www.screencast.com/t/BoDmPQViNNt

 

 

Viktor Tachev
Telerik team
 answered on 05 Jul 2017
1 answer
1.2K+ views

Hi, I have a strange issue where the DatePicker in my MVC grid is posting a null value to the controller on Save of an Edit only.

When creating a new record, I set the date in the picker and it comes through just fine.

When editing an existing record, if I change other Columns and save, the date from the DatePicker is null.  All other columns are not null and come through just fine.  Also when editing, the datepicker shows the correct date

When editing an existing record, if I change the date in the DatePicker, the date comes through just fine. 

@(Html.Kendo().Grid<PDFBinderWebApp.Models.IndexPageViewModel>()
        .Name("grid")
        .HtmlAttributes(new { style = "height: 550px;" })
        .Columns(columns =>
        {
            columns.Bound(c => c.vPdfContent.PdfName).Title("<div align=center>Name</div>").HtmlAttributes(new { style = "text-align: center;" }).Width(200);
            columns.Bound(c => c.PdfFileUrl).EditorTemplateName("PdfFileUrl").Title("<div align=center>Document</div>").ClientTemplate("#: Filename #").Width(200);
            columns.Bound(c => c.DocumentTypeName).EditorTemplateName("DocumentTypeList").Title("<div align=center>Document Type</div>").ClientTemplate("#:DocumentTypeName#").HtmlAttributes(new { style = "text-align: center;" }).Width(200);
            columns.Bound(c => c.DocumentArchiveName).EditorTemplateName("ArchiveRuleList").Title("<div align=center>Document Rule</div>").ClientTemplate("#:DocumentArchiveName#").HtmlAttributes(new { style = "text-align: center;" }).Width(200);
            columns.Bound(c => c.vPdfContent.ExpirationDate).EditorTemplateName("DatePickerTemplate").ClientTemplate("#= formatExpiration(vPdfContent.ExpirationDate ? kendo.toString(kendo.parseDate(vPdfContent.ExpirationDate), 'MM/dd/yyyy') : 'n/a') #").Title("<div align=center>Expiration</div>").HtmlAttributes(new { style = "text-align: center;" }).Width(140);
            columns.Bound(c => c.ADGroupsList).EditorTemplateName("ADGroupMultiSelectList").ClientTemplate("#= adGroupsTemplate(ADGroupsList) #").Title("<div align=center>AD Groups</div>").Width(200);
            columns.Bound(c => c.MeetingYear).EditorTemplateName("MeetingYearList").Title("<div align=center>Meeting Year</div>").ClientTemplate("#:MeetingYear#").HtmlAttributes(new { style = "text-align: center;" }).Width(100);
            columns.Bound(c => c.ChainOfCustody).ClientTemplate("#= replaceString(ChainOfCustody) #").HtmlAttributes(new { style = "font-size:10pt;" }).Title("<div align=center>Chain Of Custody</div>").Width(250);
            columns.Command(command => { command.Edit().UpdateText("Save"); command.Destroy(); }).Title("<div align=center>Action</div>").HtmlAttributes(new { style = "text-align: center;" });
        })
        .Resizable(resize => resize.Columns(true))
        .ToolBar(toolbar => { toolbar.Create().Text("Add Document"); })
        .Editable(editable => editable.Mode(GridEditMode.InLine).TemplateName("PdfEditor"))
        //.Scrollable()
        .Sortable(sortable => sortable.AllowUnsort(false))
        .Events(e=>e.Edit("onEdit").Cancel("onCancel").Save("onSaved"))
        //.Selectable()
        .Pageable()
        .DataSource(d => d
            .Ajax()
            .PageSize(20)
            .Batch(false)
            .AutoSync(false)
            .Events(events => events.Error("error_handler"))
            .Model(model =>
            {
                model.Id(p => p.vPdfContent.PdfId);
                model.Field(p => p.vPdfContent).DefaultValue(new PDFBinderWebApp.Models.v_PdfContent());
                model.Field(p => p.vPdfContent.PdfId).Editable(false);
                model.Field(p => p.vPdfContent.CreatedBy).Editable(false);
                model.Field(p => p.vPdfContent.ExpirationDate).Editable(true);
                model.Field(p => p.ADGroupsList).DefaultValue(new List<SelectListItem>());
            })
            .Read(read => read.Action("EditingInline_Read", "PdfContents"))
            .Create(update => update.Action("EditingInline_Create", "PdfContents"))
            .Update(update => update.Action("EditingInline_Update", "PdfContents"))
            .Destroy(update => update.Action("EditingInline_Destroy", "PdfContents"))
    )
    )

 

DatePickerTemplate is as follows:

@model DateTime?
 
@(Html.Kendo().DatePickerFor(m=>m)
    .Name("vPdfContent.ExpirationDate")
  .Format("yyyy-MM-dd")
)

 

Again, the DatePicker is working for all scenarios, Create and Edit (when actually selecting a date) and displaying the date.

The problem is when editing, the datepicker displays the proper date, but when you click Save, vPdfContent.ExpirationDate is null and validation fails Stating:

"The value /'Date(1504152000000)' is not valid for ExpirationDate"  (See attached screen shot).

Also when I use the Chrome developer tools and debug through the onSave javascript, when I inspect the model in e, it always shows a date, which is weird because when it hits the controller the date is null.

Tsvetina
Telerik team
 answered on 05 Jul 2017
2 answers
1.1K+ views

Hello

I am using the kendo grid control and I'm not able to get a DateTime Picker to appear on the filter for the column that contain DateTime values. The grid filter with datetimepicker demos that I have come across have only been implemented with javascript examples. I am assuming some javascript may be requiried. What I was hoping was, help with the grid filter datetimepicker demo/example via ASP.Net MVC implementation. Below is my unsuccessful implementation. Hope I am clear with my desires and thanks in advance for any assistance.

 

@(Html.Kendo().Grid<ATSAnnouncementViewModel>()
                              .Name("AnnouncementGrid")
                              .Columns(columns =>
                              {
                                  columns.Bound(c => c.ATSAnnouncementID).Title("Announcement ID").Hidden(true);
                                  columns.Bound(c => c.TargetDepartment).Title("Target").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
                                 columns.Bound(c => c.StartDateTime).Format("{0:MM/dd/yyyy HH:mm tt}").Title("Start Date Time").Filterable(ftb => ftb.UI("DateTimeFilter"));

columns.Bound(c => c.Message).Title("Description").Filterable(false).Sortable(false).ClientTemplate(@Html.ActionLink("#=Message#", "Edit", "Announcement",                               })
                              .Sortable()
                              .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                              .Pageable(pageable => pageable
                                  .Refresh(true)
                                  .PageSizes(true)
                                  .ButtonCount(5))
                              .DataSource(dataSource => dataSource
                                  .Ajax()
                                  .PageSize(20)
                                  .Model(model => model.Id(x => x.ATSAnnouncementID))
                                  .Read(read => read.Action("GetActiveATSAnnouncements", "DataSource"))
                              ).Events(e => e.DataBound("onAnnouncementDataBound")))

 <script type="text/javascript">

function DateTimeFilter(e) {
            //$(control).kendoDateTimePicker();
            $("#datetimepicker").kendoDateTimePicker({
                value: new Date(),
                dateInput: true
            });
           
        }
    </script>

kw

 
kw
Top achievements
Rank 1
 answered on 05 Jul 2017
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
Window
ListView
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
AICodingAssistant
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
+? 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?