Telerik Forums
UI for ASP.NET MVC Forum
3 answers
1.3K+ views

Hello , 

I'm trying to filter a grid column having DateTime value , for eg - 12/21/2020 12:01:47 PM . and below my implementation .

This works for the first time only and if we open the filter menu again, the filter operator shows as blank (It should have the operator as Equals) and upon selecting a new value from operator list ,it throws JS error at d.filters[0].operator as d.filters[0] is coming as undefined.

Grid filter settings-
.Events(x => x.FilterMenuInit("filterDateWithoutTimeTest"))

.Filterable(f => f.Operators(operators => operators.ForDate(dt => dt.Clear()
                                                        .IsEqualTo("Equals")
                                                        .IsLessThan("EarlierThan")
                                                        .IsGreaterThan("LaterThan")
                                                        )))

 

function filterDateWithoutTimeTest(e) {
        var grid = e.sender;
        if (e.sender.dataSource.options.schema.model.fields[e.field].type === "date") {
            e.preventDefault();
            var columnTobeFiltered = e.field;
            e.container.find('button[type="submit"]').click(function (e) {     
                var existingFilters = grid.dataSource.filter();
                var newFilter = [];               
                var filterType = $(this.form).find($("select[data-role=dropdownlist]")).eq(0).val();
                if (filterType == "eq") {
                   
                    //gets the datePicker input date
                    var selectedDate = $(this.form).find($("input[data-role=datepicker]")).eq(0).val();

                    //    //create a filter
                    grid.dataSource.filter({
                        field: columnTobeFiltered,
                        //create custom filter operator
                        operator: function (fieldDate) {
                            var fieldDate2 = new Date(fieldDate);
                            var parsedSelectedDate = kendo.parseDate(selectedDate);
                            //parse the field date in order to ignore the time
                            var parsedFieldDate = new Date(fieldDate2.getFullYear(), fieldDate2.getMonth(), fieldDate2.getDate());
                            var result = (parsedFieldDate.getTime() == parsedSelectedDate.getTime());

                            return result;

                        },
                        value: selectedDate
                    });

                    //close filter window
                    $(gridElement).find("th[data-field=" + columnTobeFiltered + "]").data("kendoFilterMenu").popup.close();
                }
            })
        }
    }

Any help around this is appreciated.

Thanks

Nikolay
Telerik team
 answered on 06 Jan 2021
4 answers
713 views
I am using Popup editing on several different grids in my application.  When a user edits an existing record and saves the results, the data will commit/save properly, but the PopUp window will not close.

The method for the .Update method is called successfullly, the record is submitted succesfully to the database, and the server responds with a 200 response so everything is successful.  However, the window remains open.

The response from the Update method is "return Json(ModelState.ToDataSourceResult());" exactly as I have seen in the demos.  I have confirmed that the ModelState is valid.

This only happens on two or three grids that use PopUp editing.  The remainder work properly.

Does the grid compare the return result to what is posted to verify success?  Or, does it simply check for a 200 response?

ADDITIONAL NOTES:

This appears to be IIS-related.  It works fine on my local dev environment using the VS Dev Server.  When hosting in IIS 7.5, or IIS Express the problem shows up.

FOLLOW UP:

I have solved the problem by changing "return Json(ModelState.ToDataSourceResult());" to "Content(ModelState.ToString());".  This changes the response content-type to "text/xml" instead of "application/json" which seems to resolve the issue.
Rick
Top achievements
Rank 1
 answered on 05 Jan 2021
8 answers
2.4K+ views

I need to change the date format in the grid filter context menu. After choosing a date from calendar, it gets displayed in the text box. The default format is 'm/dd/yyyy' which I want to change to a dynamically defined format. We allow user to set date format preferences in our website. It works fine for data. I need to do the same for grid search filter.

This is a server side grid.

Stefan
Telerik team
 answered on 05 Jan 2021
6 answers
91 views

I have created a custom editor template for my scheduler, and it works fine except for one glaring issue. When I update the list of attendees for a given meeting, the model fails to validate on post back because the attendee list that is returned consists of all 0s.Here is the control's code:

<div data-container-for="Attendees" class="k-edit-field">
    @(Html.Kendo().MultiSelectFor(model => model.Attendees)
        .HtmlAttributes(new { data_bind = "value:Attendees" })
        .DataTextField("Text")
        .DataValueField("Value")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("RemoteDataSource_GetUserList", "Calendar");
            })
            .ServerFiltering(true);
        })
    )
 
</div>
Responsive
Top achievements
Rank 1
Veteran
 answered on 04 Jan 2021
10 answers
1.7K+ views

I have a grid, with inline editing enabled, with a user entered value for the primary key. Obviously, for row edits, this value can't be updated. Unfortunately the Kendo Grid doesn't differentiate between edits and inserts.

I can set the field to non editable using :-

.Model(m=>{
                    m.Id(p => p.OPCS);
                    m.Field(p => p.OPCS).Editable(false);
                })

And this works for edits, as the key column remains as text, not a text box. However, this breaks inserts.

Alternatively I can set the field to read only using the grid edit event:-

function gridEdit(args) {
 
        if (args.model.isNew() == false) {
            // textbox
            $("#OPCS").attr("readonly", true);
 
             
        }
 
    }

This stops the value in the field from being changed, but still displays it in a textbox, giving the user the impression it can be changed.

How can I stop the field being shown in a textbox for edits, but allow inserting new values for new records?

AP
Top achievements
Rank 1
Iron
Iron
Veteran
 answered on 04 Jan 2021
8 answers
2.5K+ views

I want to call a js in my read action, and so far I can do it without problems, but now I need to pass the function several parameters. Is it posible?

I want to achieve something like this:

@(Html.Kendo().Grid<SGMTrade.DAL.ViewModels.OperacionesOCTPorFecha>()
                .Name("grid2_#=row#")
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Read(read => read.Action("OperacionesOCTPorFecha_Read", "Operaciones").Data(MyFunction( #=fecha_venc#,#=espe_codigo#,#=clas_codigo# ))))
        )
        .Columns(columns =>
        {
            columns.Bound(o => o.oper_numero).Title(Global.NumeroOperacion)
                .ClientTemplate("<a href='\\\\\\#' onclick=\"showDetails('\\#=oper_numero\\#')\">\\#=oper_numero\\#</a>").HtmlAttributes(new { @class = "grillaNumero" });
            columns.Bound(o => o.oper_forigen).Title(Global.FechaOrigen).Format("{0:dd/MM/yyyy}").HtmlAttributes(new { @class = "grillaFecha" });
            columns.Bound(o => o.espe_codigo).Title(Global.Especie).HtmlAttributes(new { @class = "grillaTexto" });
            columns.Bound(o => o.clas_codigo).Title(Global.Clase).HtmlAttributes(new { @class = "grillaTexto" });
            columns.Bound(o => o.clie_nombre).Title(Global.Cliente).HtmlAttributes(new { @class = "grillaTexto" });
            columns.Bound(o => o.tope_suma).Title(Global.CompraOVenta).HtmlAttributes(new { @class = "grillaTexto" });
            columns.Bound(o => o.oper_monto).Title(Global.Capital).Format("{0:N}").HtmlAttributes(new { @class = "grillaNumero" });
            columns.Bound(o => o.oper_plazo).Title(Global.Plazo).HtmlAttributes(new { @class = "grillaNumero" });
            columns.Bound(o => o.Fecha_Vence).Title(Global.FechaVence).Format("{0:dd/MM/yyyy}").Hidden(true).HtmlAttributes(new { @class = "grillaFecha" });
            columns.Bound(o => o.precio_transf).Title(Global.PrecioTransferencia).HtmlAttributes(new { @class = "grillaNumero" });
            columns.Bound(o => o.spread).Title(Global.Spread).HtmlAttributes(new { @class = "grillaNumero" });
        })

 

This is actual code from a child grid that I'm using. The standard method for passing parameters is not working due to date format:
.Read(read => read.Action("OperacionesOCTPorFecha_Read", "Operaciones", new { fecha = "#=fecha_venc#", especie = "#=espe_codigo#", cliente = @ViewBag.cliente, clase = "#=clas_codigo#" }))

Thanks in advance

Tsvetomir
Telerik team
 answered on 04 Jan 2021
4 answers
118 views

Hi:

From the server side, I can save the content of the editor for a .docx file indicating the path where I want to save it

 

Regards, Guillermo

Plamen
Telerik team
 answered on 01 Jan 2021
4 answers
1.3K+ views

Hey,

So i have a grid on my page which is going to act as a result view to search criteria input into the provided controls.

By default to grid does not make a request to obtain data on page load. .AutoBind(false) has been set.

So what i require is when the page is loaded the user will be presented with a range of inputs that will make up the "Search Filter", when the search button is clicked i create a complex object which is then passed to the controller and the filtering will happen in the IQueryable object. and this works without an issue.

The problem comes in when i try and page, filter, sort or change the page size the grid does not use my custom javascript function to pass the complex object as parameters to the controller, my parameters are only passed when i click on the search button.

i have read up on the grid events here

and i attached the .Sort(), .Filter(), .Page() events to my javascript  function, the problem is that then the grid makes  2 requests to the server, 1 request with a null parameter and another request with the parameter.

How do i disable the default grid Paging, Filtering,Sorting and Page Size change triggers and make it use my own javascript function so that even if i page, filter, sort the complex parameter object is passed to the controller every single time?

public class SystemLogsParameters
{
  public string Message { get; set; }
}

 

Controller

[HttpPost]
public ActionResult PopulateLogsGrid([DataSourceRequest] DataSourceRequest request, SystemLogsParameters Data)
{
  DataSourceResult result = new LogsGrid().PopulateSystemSettingLogsGrid(request,Data);
  return Json(result);
}

 

View

<div class="row">
    <input type="text" id="tbMessage" placeholder="Message" />
</div>
 
<div class="row">
    @(Html.Kendo().Grid<Presentation.GenericGridViewModel>()
        .Name("Grid")
        .AutoBind(false)
        .Events(ev => ev
 
            .Sort("loadGrid") <-- Makes 2 requests to server
            .Filter("loadGrid") < --Makes 2 requests to server
            .Group("loadGrid") < --Makes 2 requests to server
            .Page("loadGrid")) < --Makes 2 requests to server
 
         .Columns(columns =>
         {
             columns.Bound(o => o.Name);
             columns.Bound(o => o.LastUpdated).Format("{0: dd MMM yyyy HH:mm}");
             columns.Bound(o => o.Active);
             columns.Bound(o => o.Id).ClientTemplate("<img class='grid-button gb-update' src='../Images/icons/update.png' onclick='update(#=Id#)' title='Update' />" +
             "#if(Active){#<img class='grid-button gb-delete' src='../Images/icons/delete.png' onclick='deactivate(#=Id#)' title='Delete' />#}#")
             .Width(100)
             .Title("Actions")
             .Filterable(false)
             .Sortable(false)
             .Groupable(false);
         })
        .NoRecords("No logs found.")
        .ToolBar(toolbar =>
        {
            toolbar.Template("<a class='k-button k-primary' onclick='Add()' href='javascript:;'><i class='fa fa-plus'></i>  Add</a>");
        })
        .Pageable(pager => pager.AlwaysVisible(true).ButtonCount(5).PageSizes(new List<object>{ 5, 10, 20, 100 }))
            .Sortable()
            .Filterable()
            .Scrollable(a => a.Height("auto"))
        .DataSource(d => d
            .Ajax()
            .Model(a => a.Id(p => p.Id))
            .Read(read => read.Action("PopulateLogsGrid", "Setting"))
            .PageSize(20)
        ))
 
</div>
<div class="row">
    <input type="button" onclick="loadGrid()" value="Submit" />
</div>
 
 
<script>
 
 
    function loadGrid() {
 
        var myParameters = { "Message": $("#tbMessage").val() };
 
        var grid = $('#Grid').data('kendoGrid');
        grid.dataSource.read({ Data: myParameters });
    }
 
</script>
Ravi
Top achievements
Rank 1
 answered on 31 Dec 2020
3 answers
6.9K+ views

I would like to conditionally disable custom command button when a specific value existing in a column field.

@(Html.Kendo().Grid<Swisslog.DC.Entities.AlarmRespond>
                ()
                .Name("alarmRespondGrid")
                .Events(e => e.DataBound("commandButtons"))
                .Columns(columns =>
                {
                    columns.Bound(c => c.Customer).Title("Customer");
                    columns.Bound(c => c.CustomerID).Title("Customer #").Sortable(false).Width(100);
                    columns.Bound(c => c.EquipmentID).Title("Equipment #").Sortable(false).Width(100);
                    columns.Bound(c => c.AlarmCode).Title("Alarm").Sortable(false).Width(75);
                    columns.Bound(c => c.AltAlarmDescription).Title("Description").Sortable(false);
                    columns.Bound(c => c.FirstAlarmDateLocal).Title("Alarm Date").Format("{0:MM/dd/yy hh:mm:ss tt}").Width(175);
                    columns.Bound(c => c.AlarmCount).Title("Count").Sortable(false).Width(75);
                    columns.Bound(c => c.AssignedTo).Title("Assigned To").Sortable(false).Width(175);
                    columns.Command(command => command.Custom("Assign").Click("assignAlarm")).Width(100);
                    columns.Command(command => command.Custom("Auto Case").Click("showResolveWindow")).Width(100);
                    columns.Command(command => command.Custom("Manual Case").Click("createSfdcAlarmCase")).Width(100);
                })

 When c.AssignedTo == "" I would like to disable the Auto Case and Manual Case buttons.  It is not clear to me how to accomplish this with a custom command.

 

Jim

 

Ólafur Gíslason
Top achievements
Rank 1
 answered on 31 Dec 2020
1 answer
244 views

Hello;

I'm trying to use footer total in grid edit mode InCell for my grid. The total display correctly but I have to hit save/update button. Is it possible to auto/refresh calculate after I moved out of that cell or column without to hit the save button? Any advices. Thanks.

Nikolay
Telerik team
 answered on 31 Dec 2020
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
Licensing
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
Iron
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
Iron
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?