Telerik Forums
Kendo UI for jQuery Forum
2 answers
250 views

Greetings,

I'm using the kendo grid as an ImageViewer to show thousand of images; these images are being shown one by one (paging size = 1) with only Next and Previous buttons as paging navigation; every time i click next, the image is downloaded from azure; don't know if it's relevant but I'm using the ClientRowTemplate property to construct a normal <img src='#: data.filename :#' /> which is why the image is downloaded by the browser when the row has been loaded. 

I would appreciate any ideas to download in chunks of 20 or even 100 images in the background so they appear instantaneously on every new page?

Thanks a lot,

hope it makes sense,

Geo

 

Quickstoker
Top achievements
Rank 2
 answered on 19 Nov 2015
1 answer
1.3K+ views

I've got two different date pickers in my app, in different parts of the same page, and when I construct them, I am using the same options, but one of them has the "k-input" class added and style set to width:100%, while the second has neither of those - this is on the span containing the following classes: k-widget k-datepicker k-header.

In what situations is the k-input class added and the width: 100% added to this span surrounding the input element - and how do I prevent these from being added?

<input id="postingStartDate" placeholder="@Common.PostingStartDate" value="@Model.StartDate"/>
<input id="transactionStartDate" placeholder="@Common.StartDate" value="" />

and the javascript is:

$("#transactionStartDate").kendoDatePicker();
$("#postingStartDate").kendoDatePicker();

resulting in:

<span class="k-widget k-datepicker k-header k-input" style="width: 100%;"><span class="k-picker-wrap k-state-default"><input id="postingStartDate" placeholder="Posting Start Date" value="11/17/2010 9:02:41 PM" data-role="datepicker" type="text" class="k-input" role="combobox" aria-expanded="false" aria-owns="postingStartDate_dateview" aria-disabled="false" aria-readonly="false" aria-labelledby="postingStartDateLabel" aria-describedby="postingStartDateDesc" style="width: 100%;"><span unselectable="on" class="k-select" role="button" aria-controls="postingStartDate_dateview"><span unselectable="on" class="k-icon k-i-calendar">select</span></span></span></span>

<span class="k-widget k-datepicker k-header"><span class="k-picker-wrap k-state-default k-state-hover"><input id="transactionStartDate" placeholder="Start Date" value="" data-role="datepicker" type="text" class="k-input" role="combobox" aria-expanded="false" aria-owns="transactionStartDate_dateview" aria-disabled="false" aria-readonly="false" aria-labelledby="transactionStartDateLabel" aria-describedby="transactionStartDateDesc" style="width: 100%;"><span unselectable="on" class="k-select" role="button" aria-controls="transactionStartDate_dateview"><span unselectable="on" class="k-icon k-i-calendar">select</span></span></span></span>

 

Thanks,

--Ed

Dimiter Topalov
Telerik team
 answered on 19 Nov 2015
1 answer
385 views

Hi,

I am using Kendo List view with k-template. I want to use Bootstrap grid system inside template. I could not get it working. The content in template doesn't align properly.

I want content to stay within the listview template and behave the grid col-md-* layout. Even I tried changing css.

 

I attached the document. Please use the code in Kendo UI Dojo(i.e http://dojo.telerik.com/IyIYe).

 Appreciate if you can provide solution. 

Magdalena
Telerik team
 answered on 19 Nov 2015
1 answer
139 views

Hi Team,

Am trying to implement the tree view structure as per the attached image. As you can see, i have parent and child in the same line. When i expand the children it should show it's children under it. Is this structure achievable? Or should i always have children only under a parent and not in the same line?

 Thanks!

Alexander Popov
Telerik team
 answered on 19 Nov 2015
1 answer
124 views

HI,

I have a kendo gird which is shown in a popup on click of link button in another grid(parent grid)

 $(".styleColorsLink").on('click', function () {

                var grid = gridMAPScreen.data().kendoGrid;
                var dataItem = grid.dataItem($(this).closest('tr'));
                var selectedSeason = dataItem["Season"];
                console.log(dataItem);
                selectedStyle = dataItem["StyleNumber"];
                var selectedStyleDesc = dataItem["StyleDescription"];
                var selectedMAPPrice = dataItem["MAPPrice"];
                var selectedMAPDiscPercent = dataItem["MAPDiscPercent"];
                var selectedExceptionWeekParticipant = dataItem["ExceptionWeekParticipant"];
                var selectedExceptionWeekMAPPrice = dataItem["ExceptionWeekMAPPrice"];
                var selectedMAPLTMSRP = dataItem["MAPLessThanMSRP"];
                var selectedHide = dataItem["Hide"];
                var selectedConfidential = dataItem["Confidential"];
                var selectedCarryForward = dataItem["CarryForward"];
                var initialize = false;
                var selectedDS = '@viewType';
                var isItemDirty = dataItem.dirty;
                var dirtyFields = dataItem.dirtyFields;
                $("#gdMAPColors").kendoGrid({
                    toolbar:hasUpdatePermission ? [
                        { name: "save", text: "Save Changes" },
                        { name: "cancel", text: "Cancel Changes" }]: "",
                    editable: "incell",
                    autoBind: true, // load data during grid initialization
                    scrollable: true,
                    //resizable: true,
                    //reorderable: true,
                    navigatable: true,
                
                    columns: hasUpdatePermission ? ColorColumnOptions : ColorNonEditColumnOptions,
                    height: 420

     }
                });

// Column i need to lock in pop up kendo grid 

 var CarryForwardSeaColorCol = {

    title: "Carryforward Season",
    field: "CarryforwardSeason",
    width: 130,
    //Vipul Chnage
    locked: true,
    lockable: false,
    filterable: filterableContain
};

var ColorLevelCodeCol = {
    title: "Product Code",
    field: "ProductCode",
    width: 130,
    filterable: filterableContain,
    //template: "<span>#=StyleNumber#-#=ColorCode#</span>"
};

 

//defination of all columns
var ColorColumnOptions = [CarryForwardSeaColorCol, ColorLevelCodeCol, ColorLevelDescCol, ColorLevelLongDescCol,
    MSRPLastChangeCol, MSRPPriorCol, MSRPCurrentCol, ConfirmMSRPCol, MAPLastChangeCol, MAPPriceCol, MAPDiscountCol, ExceptionParCol, ExceptionWeekPriceCol,
    ExceptionWeekDiscountCol, MAPLTMSRPCol, HideCol, AddCol, ConfidentialCol, CarryforwardCol, NotesCol, ConfirmMMXAddCol];

When i do this CarryForwardSeaColorCol and ColorLevelCodeCol header show in same column.

 

Appreicate any help. Thanks

Nikolay Rusev
Telerik team
 answered on 19 Nov 2015
1 answer
121 views

Hello. I'm trying to implement virtual scrolling in my ComboBox. I'm using OData for datasource. 

I've tried to use this example (https://demos.telerik.com/kendo-ui/combobox/virtualization) however i'm stuck. I don't know how to implement a Value Mapper in my Web API.

In this example it's easy to do, because tere are no any filters/ordering in the DataSource request. But in my canse i'm using the same OData method for different DataSources, but with differend Filters and Ordering. So, how can i get the index if some value which is not existing in the initial DataSource data, if i don't know which filter/ordering was used for a datasource? Because for different filters/ordering the index of this value will be different.

Georgi Krustev
Telerik team
 answered on 19 Nov 2015
1 answer
411 views

Hi,

I am using Kendo UI for MVC.  I have a string column containing string numbers.  I also have a hidden int column containing the integer version of these numbers.  I would like for the user to sort the string number column, but have the sorting actually take place using the hidden number column.  How would I go about this with Kendo UI for MVC? 

 

Thanks.

Alexander Popov
Telerik team
 answered on 19 Nov 2015
1 answer
222 views

Hi, I am creating a dropdownlist as follows:

Create Widget:

html.Kendo().DropDownList().Name(widgetName).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = widgetName, selectId = RegexHelper.GetIndex(parameter) })

 GetPromptData:

 

function GetPromptData(options) {
    $.ajax({
        url: "FileSubmit/GetPromptData",
        datatype: "jsonp",
        data: {
            "selectId": $('#widgetName').attr("selectid"),
            "key": window.dataKey
        },
        contentType: 'application/json',
        success: function (data) {
            alert("Data is received");
            options.success(data);
        }
    });
}

 And finally my controller:

public JsonResult GetPromptData(string selectId, string key)
{
   List<string> items = new List<string>();
   items.Add("item1");
   items.Add("item2");
   return Json(items, JsonRequestBehavior.AllowGet);
}
  

The ajax call receives a response but from there nothing happens?

html.Kendo().DropDownList().Name(normalisedParameter).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = normalisedParameter, selectId = RegexHelper.GetIndex(parameter) })
html.Kendo().DropDownList().Name(normalisedParameter).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = normalisedParameter, selectId = RegexHelper.GetIndex(parameter) })
html.Kendo().DropDownList().Name(normalisedParameter).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = normalisedParameter, selectId = RegexHelper.GetIndex(parameter) })
html.Kendo().DropDownList().Name(normalisedParameter).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = normalisedParameter, selectId = RegexHelper.GetIndex(parameter) })
html.Kendo().DropDownList().Name(normalisedParameter).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = normalisedParameter, selectId = RegexHelper.GetIndex(parameter) })
html.Kendo().DropDownList().Name(normalisedParameter).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = normalisedParameter, selectId = RegexHelper.GetIndex(parameter) })
html.Kendo().DropDownList().Name(normalisedParameter).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = normalisedParameter, selectId = RegexHelper.GetIndex(parameter) })
html.Kendo().DropDownList().Name(normalisedParameter).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = normalisedParameter, selectId = RegexHelper.GetIndex(parameter) })
html.Kendo().DropDownList().Name(normalisedParameter).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = normalisedParameter, selectId = RegexHelper.GetIndex(parameter) })
html.Kendo().DropDownList().Name(normalisedParameter).DataSource(source =>
                {
                    source.Custom().Transport(new
                    {
                        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "GetPromptData" }
                    });
                }).HtmlAttributes(new { id = normalisedParameter, selectId = RegexHelper.GetIndex(parameter) })
Georgi Krustev
Telerik team
 answered on 19 Nov 2015
3 answers
244 views

I have two date pickers and want to set the min of the second equal to the value of the first however it is not applying the restriction.  Here are my two pickers:

<input id="fromDate" name="toDate" kendo-date-picker k-ng-model="vm.fromDate" placeholder="From Date" />

<input id="toDate" name="toDate" kendo-date-picker k-ng-model="vm.toDate" k-min="vm.fromDate" placeholder="To Date" />

Kiril Nikolov
Telerik team
 answered on 19 Nov 2015
1 answer
184 views

 Is it possible to use Kendo's Grid to do virtual/infinite scrolling with an unknown number of entities?  My data is stored in a NoSQL Datastore which I query using cursors, so in general it is possible to determine where or not the data has tapped out on a particular page fetch, but not the total number of items.  Unfortunately, the schema.total documentation included below seems to indicate that schema.total is required for server side paging.  

 

schema.total Function |String
The field from the server response which contains the total number of data items. Can be set to a function which is called to return the total number of data items for the response.
The schema.total setting may be omitted when the Grid is bound to a plain Array (i.e. the data items' collection is not a value of a field in the server response). In this case, the length of the response Array will be used.
schema.total must be set if the serverPaging option is set to true.

 So, is there any way to do virtual/infinite scrolling with an unknown total?

 Thanks

 

Kiril Nikolov
Telerik team
 answered on 19 Nov 2015
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
Licensing
ScrollView
Switch
TextArea
BulletChart
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
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
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
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?