Telerik Forums
Kendo UI for jQuery Forum
6 answers
9.6K+ views
I am using asynchronous file upload, where the user cannot select multiple files. Once the upload has completed successfully, I want to remove the selected file from the display. How can I do this?

I tried 
 $(".k-upload-files").remove() 

it removed the value from the display, but if the user selected another file and tried to upload again, then it would actually post the old file, not the newly selected file.

I also tried
$("#attachments").parents(".t-upload").find(".t-upload-files").remove() 

but it did not work
Orlando
Top achievements
Rank 1
 answered on 13 Sep 2018
3 answers
126 views

Hello,

I am having a strange problem and cannot find any solution. I have a simple grip in popup:

<script>
function createDepositsTable() {
$("#depositsTable").kendoGrid({
height: 200,
scrollable: true,
dataSource: {
data: depositdata
},
resizable: true,
columns: [
{
field: "TransactionDate",
title: "Date",
type: "date",
headerAttributes: { style: "vertical-align: top;white-space: normal" },
format: "{0:MM-dd-yyyy}",
attributes: { class: "text-left" }
}, {
field: "Value",
title: "Amount",
headerAttributes: { style: "vertical-align: top;white-space: normal" },
format: "{0:c2}",
attributes: { class: "text-right" }
}],
});
console.log(depositdata);
var grid = $("#depositsTable").data("kendoGrid");
grid.bind();
}

Another dropdown selects an account and gets the data. Initially 9 records populated in datasource for grid and they displayed fine. If I select another account, 2 records populated and I can see them in console.log(depositdata); => 2 records, but the grid will display the old ones plus new = 11. Any other selection will just add new records to the end of the grid. I did try re-bind: grid.bind();

re-create:

$(document).ready(createDepositsTable);
$(document).bind("kendo:skinChange", createDepositsTable);

refresh, but nothing helped. Do you have any idea what could be done here?

Thanks.

 

 

Andrey
Top achievements
Rank 1
Veteran
 answered on 13 Sep 2018
3 answers
343 views

Hi,

I'm trying to export a grid  with a big data to PDF file but I'm constantly having problems with it In Chrome,

it's fail to download a file (Failed - Network error). When i try to download it with Opera or Firefox it downloads without a problem.

What is causing this behavior?

Ivan Danchev
Telerik team
 answered on 13 Sep 2018
5 answers
669 views

In my web app I created a class DataSourceResult

 

/// <summary>
   /// DataSource result
   /// </summary>
   public class DataSourceResult
   {
       /// <summary>
       /// Extra data
       /// </summary>
       public object ExtraData { get; set; }
 
       /// <summary>
       /// Data
       /// </summary>
       public IEnumerable Data { get; set; }
 
       /// <summary>
       /// Errors
       /// </summary>
       public object Errors { get; set; }
 
       /// <summary>
       /// Total records
       /// </summary>
       public int Total { get; set; }
   }

 

and in my controller

 

[HttpPost]
        [AdminAntiForgery]
        public IActionResult PortList(DataSourceRequest command)
        {
            if (!_permissionService.Authorize(StandardPermissionProvider.ManageVendors))
                return AccessDeniedKendoGridJson();
 
            var ports = _worldPortIndexService.GetAllPorts(pageIndex: command.Page - 1, pageSize: command.PageSize);
            var model = ports.Select(p =>
            {
                var store = _worldPortIndexService.GetPortById(p.Id);
                return new PortMainModel
                {
                    Id = p.Id,
                    PortName = p.PortName,
                    UNLOCODE = p.UNLOCODE,
                    Country = p.Country,
                    LatDec = p.LatDec,
                    LonDec = p.LonDec
                };
            }).ToList();
 
            return Json(new DataSourceResult
            {
                Data = model,
                Total = ports.TotalCount
            });
        }

 

and my view script is

$(document).ready(function() {
    $("#ports-grid").kendoGrid({
        dataSource: {
            type: "json",
            transport: {
                read: {
                    url: "@Html.Raw(Url.Action("PortList", "PortGuideAdmin"))",
                    type: "POST",
                    dataType: "json",
                    data: addAntiForgeryToken
                },
                destroy: {
                    url: "@Html.Raw(Url.Action("Delete", "PortGuideAdmin"))",
                    type: "POST",
                    dataType: "json",
                    data: addAntiForgeryToken
                }
            },
            schema: {
                data: "Data",
                total: "Total",
                errors: "Errors",
                model: {
                    id: "Id"
                }
            },
            requestEnd: function (e) {
                if (e.type == "update") {
                    this.read();
                }
            },
            error: function(e) {
                display_kendoui_grid_error(e);
                // Cancel the changes
                this.cancelChanges();
            },
                pageSize: @(defaultGridPageSize),
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
        },
        pageable: {
            refresh: true,
            pageSizes: [@(gridPageSizes)],
            @await Html.PartialAsync("_GridPagerMessages")
        },
        editable: {
            confirmation: "@T("Admin.Common.DeleteConfirmation")",
            mode: "inline"
        },
        scrollable: false,
        columns: [{
            field: "Id",
            headerTemplate: "<input id='mastercheckbox' type='checkbox'/>",
            headerAttributes: { style: "text-align:center" },
            attributes: { style: "text-align:center" },
            template: "<input type='checkbox' value='#=Id#' class='checkboxGroups'/>",
            width: 50
        }, {
            field: "PortName",
            width: 200,
            title: "Port Name"
        }, {
            field: "UNLOCODE",
            width: 100,
            title: "UNLO CODE"
        },{
            field: "Country",
            width: 200,
            title: "Country"
        }, {
            field: "LatDec",
            width: 100,
            title: "Latitude"
        },{
            field: "LonDec",
            width: 100,
            title: "Longitude"
        }, {
                        field: "Id",
                        title: "@T("Admin.Common.Edit")",
                        width: 100,
                        headerAttributes: { style: "text-align:center" },
                        attributes: { style: "text-align:center" },
                        template: '<a class="btn btn-default" href="Edit/#=Id#"><i class="fa fa-pencil"></i>@T("Admin.Common.Edit")</a>'
                    }]
    });
});

 

when I turn filterable and sortable true filter and sorting is not updating my grid.Grid views list fine. all other functions are working except filtering and sorting.

Konstantin Dikov
Telerik team
 answered on 13 Sep 2018
5 answers
528 views

Hi,

 

We recently upgraded from 2016 library to latest one. One of the widgets we are using is Chart and we have situation where we display yearly data spread through the weeks. 

In previous version we simply had categoryAxis configuration set to 

baseUnit: "weeks",
labels: {
     step: 1,
     dateFormats: {
          weeks: "cw"
     }
},
majorGridLines: {
     visible: true
},
axisCrossingValues: [0, 54]

However, after upgrading to the new version, instead of displaying week numbers (1 to 52) it simply displays cw text. 

I tried all possible things i could think of, but couldn't make it display week numbers, so I would appreciate a little help. :)

Thanks

 

 

Vedad
Top achievements
Rank 3
Bronze
Bronze
Iron
 answered on 13 Sep 2018
4 answers
7.2K+ views
I have a  virtual remote data enabled grid configured like this:

var myDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: 'http://localhost/MyODataService.asmx',
            dataType: 'jsonp',
            data: {
                $select: 'RecordID, FirstName, LastName'
 
            }
        },
        parameterMap: function (data, operation) {
            if (operation == 'read') {
                return kendo.data.transports['odata'].parameterMap(data, operation);
            } else {
                return JSON.stringify(data.models);
            }
 
        }
 
    },
    type: 'odata',
    pageSize: 200,
    serverPaging: true,
    serverSorting: true,
    batch: true
});
 
 
jQueryGrid.kendoGrid({
    dataSource: myDataSource
    height: 530,
    scrollable: {
        virtual: true
    },
    reorderable: true,
    resizable: true,
    sortable: true,
    columns: ['RecordID', 'FirstName', 'LastName'],
    selectable: 'row'
});
Basically, I would like to refresh the grid, scroll all the way up (usually, this is done by the refresh call) and finally, I would like to select the first row.

I created the following code:

myGrid.data('kendoGrid').dataSource.read();
myGrid.data('kendoGrid').refresh();
myGrid.data('kendoGrid').select('tr:eq(0)');
However, the call to the refresh function is executed asynchronously. As the grid datasource is consuming an OData service to load only a subset of data when you scroll up or down, it does make sense.

So even if the call to the refresh function is made before the select call, the displayed row will be updated after the select call and will also remove any row selection in the grid.

I know it could possible to solve this problem by creating some kind of message system that could be handled by the grid's dataBound event, but I would like to know if anyone has a more simple solution for this.

Best regards,

Simon
John
Top achievements
Rank 1
 answered on 12 Sep 2018
2 answers
157 views

Hello

I have noticed an issue when moving from 2017.3.1026 to 2018.1.221 which causes a dropdown  with a 'valueTemplate' to be drawn oddly as if it is trying to draw blank line above the value.

I enclose a couple of images of how it looks now and how it looked before.

I have looked at the docs and I cannot see if I need to change the format of the 'valueTemplate'

Any suggestions would be appreciated.

Thanks

James

here is some sample code:

 <input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: [
    { id: 1, name: "Apples", txtColor: "black", bkgColor: "lightblue" },
    { id: 2, name: "Oranges", txtColor: "black", bkgColor: "slateblue" },
    { id: 3, name: "Pears", txtColor: "black", bkgColor: "lightgreen" }
  ],
  dataTextField: "name",
  dataValueField: "id",
  template: '<div style="color: #= txtColor #; background-color: #= bkgColor #;">#= name #</div>',
  valueTemplate: '<div style="color: #= txtColor #; background-color: #= bkgColor #;">#= name #</div>'
});
</script>

James
Top achievements
Rank 1
 answered on 12 Sep 2018
1 answer
10.2K+ views
HI, I create a Grid with a custom local dataSource. I give the grid un model and when initially created and displayed all work good.

If I whant to replace date in the datasource without change de model, i use:
grid.dataSource.data(collTemp);
collTemp containt array of objects in the same way i did at the creation phase.

The grid relaod the data OK, but I lost all my formating information (like the $ on the price columns). When I click on the price for edition I can see the $ sign breifelly appear.

When the user click on the "refresh" button, The initial old data is repopulated.

How I can change the "real" internal data without recreating all the datasource, Model and columns information? 

thanks
Tsvetina
Telerik team
 answered on 12 Sep 2018
1 answer
708 views
I have to upload 5 (min and max) .txt  files at a time, I'm trying to validate throught JS the minium or max number of files and send a message, but with the validation events that are there i can't actually do that. Is there any other way? Or a way to create a custom validation for uploading files?
Neli
Telerik team
 answered on 12 Sep 2018
3 answers
388 views

Hello.

I want to create grid where in some of the columns would be a datepicker just to select the time.

 

Here is a data which I recive (1 record sample) : {shopID: 16, scheduleDay: "2000-01-01T00:00:00", shopWorkingHourID: 1,…}

 

Here is my model schema :

                schema: {
                    model: {
                        fields: {
                            shopID: "shopID",
                            scheduleDay: "scheduleDay",
                            workStartHour: "workStartHour",
                            workEndHour: "workEndHour",
                        }
                    }
                }

 

Here is my column configuration :

                columns: [
                    {
                        field: "shopID"
                    },
                    {
                        field: "scheduleDay",
                        format: "{0:yyyy/MM/dd}"
                    },
                    {
                        
                        field: "workStartHour",
                        editor: function (container, options) {

                           console.log('here');
                            var input = $("<input/>");
                            input.attr("workStartHour", options.model.workStartHour);

                            input.appendTo(container);

                            input.kendoTimePicker({});
                        },
                        format:"{0:HH:mm}",
                    }]

Time is displayed correctly but I cannot pick the time, even picker isn't shown.

 

Some crucial information

* I've tried convert data I receive to new Date

* I've included scripts corectly

* I don't get any errors

 

I'll take any advice how to make this work.

Viktor Tachev
Telerik team
 answered on 12 Sep 2018
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
Licensing
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?