Telerik Forums
Kendo UI for jQuery Forum
3 answers
381 views

Hello,

I have a table that contain a lots of rows (3000+ rows). Each rows are text entered by the users. Some have 1 line of text, some have 100 lines of text.

So each rows have a different height. I cannot truncate the text.

If I use virtual scroll, sometime the scroll "jump" and skip some rows.

And if I don't use the virtual scroll, the page take a long time to load and even get the unresponsive script error message from the browser.

 

I know about the warning about virtual scroll and different height from http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#virtual-scrolling, but I was hoping someone would have find a way around that?

 

Alexander Valchev
Telerik team
 answered on 07 Apr 2016
4 answers
185 views

Here are my code. Job data aren't coming in scheduler. There is error in browser's console also.

 

function recreateScheduler(groupArray, techs) {
    $("#kendoDemoScheduler").kendoScheduler({
        date: new Date("2016/3/31"),
        startTime: new Date("2016/3/31 07:00 AM"),
        height: 600,
        eventHeight: 50,
        majorTick: 60,
        views: [
            { type: "timeline", selected: true}
        ],
        timezone: "Etc/UTC",
        dataSource: {
            batch: true,
            transport: {
                read: {
                    url: '@Url.Action("JobSchedule_Read", "JOBS")',
                    dataType: "jsonp"
                },
                update: {
                    url: "//demos.telerik.com/kendo-ui/service/meetings/update",
                    dataType: "jsonp"
                },
                create: {
                    url: "//demos.telerik.com/kendo-ui/service/meetings/create",
                    dataType: "jsonp"
                },
                destroy: {
                    url: "//demos.telerik.com/kendo-ui/service/meetings/destroy",
                    dataType: "jsonp"
                },
                parameterMap: function (options, operation) {
                    if (operation == "read") {
                        var searchCondition = "";
                        var statusCheckBoxesValues = "";
 
                        var sortFilter = $("#sortFilterDropDownList").data("kendoDropDownList").text();
                        var dispatch = $("#dispatchDropDownList").data("kendoDropDownList").value();
                        var assignto = $("#techDropDownList").data("kendoDropDownList").value();
                        var area = $("#areaDropDownList").data("kendoDropDownList").value();
                        var category = $("#categoryDropDownList").data("kendoDropDownList").value();
                        var product = $("#productDropDownList").data("kendoDropDownList").value();
                        var proditem = $("#itemDropDownList").data("kendoDropDownList").value();
 
                        var datefrom = $("#fromDatePicker").val();
                        var dateto = $("#toDatePicker").val();
 
                        if (sortFilter == "[NONE]") {
                            if (area == "[ALL]" && dispatch == "[ALL]" && assignto == "[ALL]" && category == "[ALL]") {
                                searchCondition = "opq3";
                            }
                            else
                                searchCondition = "opq3_1";
                        }
 
                        if (sortFilter == "Name")
                            searchCondition = "opq1";
                        else if (sortFilter == "@SystemConfiguration.AssignTo")
                            searchCondition = "opq2";
                        else if (sortFilter == "PostCode")
                            searchCondition = "opq4";
                        else if (sortFilter == "Area")
                            searchCondition = "opq5";
                        else if (sortFilter == "Suburb")
                            searchCondition = "opq6";
                        else if (sortFilter == "Job Address")
                            searchCondition = "opq8";
 
                        $(".treatmentCheckBoxes .k-checkbox").each(function (index) {
                            if ($(this).is(":checked"))
                                statusCheckBoxesValues += $(this).attr("status") + ",";
                        })
 
                        $(".followUpCheckBoxes .k-checkbox").each(function (index) {
                            if ($(this).is(":checked"))
                                statusCheckBoxesValues += $(this).attr("status") + ",";
                        })
 
                        if (statusCheckBoxesValues.indexOf(",") >= 0)
                            statusCheckBoxesValues = statusCheckBoxesValues.substring(0, (statusCheckBoxesValues.length - 1));
 
                        return {
                            ip_cond: searchCondition,
                            ip_area: area == "" ? "[All]" : area,
                            ip_dispatch: dispatch == "" ? "[All]" : dispatch,
                            ip_assignto: assignto == "" ? "[All]" : assignto,
                            ip_category: category == "" ? "[All]" : category,
                            ip_product: product == "" ? "[All]" : product,
                            ip_proditem: proditem == "" ? "[All]" : proditem,
                            ip_streetno: $("#txtSearchStreetNo").val(),
                            ip_filter: $("#txtSearchInput").val(),
                            ip_datefrom: datefrom == "" ? null : datefrom,
                            ip_dateto: dateto == "" ? null : dateto,
                            ip_statlist: statusCheckBoxesValues == "" ? "DB" : statusCheckBoxesValues,
                            ip_unsched: $("#unsceduledCheckBox").is(":checked"),
                            ip_contr_only: $("#contractJobsCheckBox").is(":checked"),
                            ip_quote: $("#quoteShowOnlyCheckBox").is(":checked")
                        };
                    }
                }
            },
            schema: {
                model: {
                    id: "ReservationID",
                    fields: {
                        taskId: { from: "ReservationID" },
                        title: { from: "Title" },
                        start: { type: "date", from: "Start" },
                        end: { type: "date", from: "End" },
                        ownerId: { from: "emm_code" }
                    }
                }
            }
        },
        group: {
            resources: groupArray,
            orientation: "vertical"
        },
        resources: [
            {
                field: "attendees",
                name: "Attendees",
                dataTextField: "TechName",
                dataValueField: "emm_code",
                dataSource: techs,
                multiple: true,
                title: "Attendees"
            }
        ]
    });
}
 
$(function () {
    var groupArray = ["Attendees"];
    var techs = [];
 
    $.ajax({
        async: false,
        url: '@Url.Action("Techs", "JOBS")',
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            $.each(data, function (i, tech) {
                techs.push(
                    { TechName: tech.TechName, emm_code: tech.emm_code }
                );
            })
            recreateScheduler(groupArray, techs);
        }
    });
})

 

public JsonResult JobSchedule_Read([DataSourceRequest] DataSourceRequest request, string ip_cond, string ip_area, string ip_dispatch, string ip_assignto, string ip_category, string ip_product, string ip_proditem, string ip_streetno, string ip_filter, DateTime? ip_datefrom, DateTime? ip_dateto, string ip_statlist, string ip_unsched, string ip_contr_only, string ip_quote)
{
    int jobHour = 0;
    int jobMinute = 0;
    string duration = "";
    DateTime startDateTime = ip_datefrom ?? DateTime.Now;
    DateTime endDateTime = ip_dateto ?? DateTime.Now;
    List<TaskViewModel> tasks = new List<TaskViewModel>();
 
    List<JscMstr> jscMstrs;
    List<JhMstr> jhMstrs;
    List<JdDet> jdDets;
    List<JscDet> jscDets;
    List<CoMstr> coMstrs;
    List<CodDet> codDets;
    List<JrSumm> jrSumms;
    List<CsMstr> csMstrs;
    List<HhStatus> hhStatuses;
    List<HhSumm> hhSumms;
    List<GrJscMstr> grJscMstrs;
    List<SchJsdDet> schJsdDets;
 
    List<TsMstr> tsMstr;
    JobRepository jr = new JobRepository();
 
    tsMstr = jr.GetReservations(startDateTime, endDateTime, "[ALL]");
 
    foreach (var item in tsMstr)
    {
        tasks.Add(new TaskViewModel()
        {
            TechName = item.tsm_assto,
            emm_code = item.tsm_assto,
            Title = item.tsm_reason,
            ReservationID = item.tsm_res_id,
            ReservedBy = Session["CompanyID"].ToString(),
            ReservationDate = item.tsm_res_date,
            ReservationViewDate = item.tsm_res_date.ToString("dd/MM/yyyy"),
            ReservationTime = item.tsm_res_date.ToString("dd/MM/yyyy") + " " + item.tsm_res_time,
            Start = startDateTime,
            End = endDateTime,
            Description = "Description 101",
            IsAllDay = false,
            StartViewDate = startDateTime.ToString("dd/MM/yyyy"),
            StartViewTime = startDateTime.ToString("HHmm"),
            Duration = item.tsm_job_duration,
            ScheduleType = "Reservation",
            Color = "#f8a398"
        });
    }
 
    return Json(tasks.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

Thanks.
Georgi Krustev
Telerik team
 answered on 07 Apr 2016
1 answer
221 views

When user copy paste the listed items from notepad or textpad to editor and clicking on the bullet\numbering list icon the whole text is considered as single item as shown (Before and After selecting Order List Image).

Please provide us the solution to fix this issue

Ianko
Telerik team
 answered on 07 Apr 2016
1 answer
143 views

How to stretch the entire height of the chart ?(adaptive-height)

help please

Helen
Telerik team
 answered on 07 Apr 2016
1 answer
757 views

Hi,

I am using tabstrip to load content from different partial views. I am doing it as below:

 

@(Html.Kendo().TabStrip()
    .Name("tabstrip")
    .Items(tabstrip =>
    {
        tabstrip.Add().Text("Tab1");
        tabstrip.Add().Text("Tab2");
    })
    .ItemAction(item=>
    {
        if(.....)
        {
            item.Selected = true;
            item.Html = Html.Partial("Tab1").ToString();
        }
        else if(....)
        {
            item.Selected = true;
            item.Html = Html.Partial("Tab2").ToString();
        }
    })
    )

 

When I do it without specifying if/else's, I am having issues loading the partial views. Each partial view is having kendo editor and in the editor we have some content and url's. Without using if/else, when I load the tabs by rendering the partials, the partial that is rendered first is loaded without issues. But the partial that is rendered after loading the first partial, does not load the 2nd partial correctly. It has issues like, url's are not clickable inside of the editor and even the editor is behaving unexpectedly.

Going through the threads in this forum, gave me the idea of using if/else and I thought that might be helpful. But, I am not sure how to specify the condition in there to know which tab is clicked.

 

I tried using condition like if(item.Text.Equals("Tab1"), but this is of no use. I am getting same error again.

Please help!

 

Thanks.

 

 

Dimo
Telerik team
 answered on 06 Apr 2016
1 answer
9.0K+ views
Maybe I've looked in the wrong places, but I just can't seem to find an answer to this simple question; I want my grid to behave like a table does in HTML - if there isn't room in a column to show something, I want it to set the width of that column such that it shows all the content, and I want the table to stretch too, so all the columns are visible. 

All the examples I've seen so far have fixed width columns, and if you put too much text in a column, either word wrap and stretch vertically, or (depending on settings) truncate the field data with ... ; neither of these is acceptable - I want it to stretch the column horizontally to fit. 

Could someone put together a quick demo in jsBin to show me how please?

Thanks in advance!

Clive
Dimo
Telerik team
 answered on 06 Apr 2016
8 answers
1.1K+ views

I am using the grid with a details template.The data is remote and the data set is large. The method that populates the grid is only going to give me a subset of that data. Upon expansion, I want to query for the full data for each particular record. The schema stays the same. This is what I have so far in the detailInit function.

 

function detailInit(e) {
    var detailRow = e.detailRow;
    var defaultData = e.data;
    $.ajax({
        type: "GET",
        url: urlBase + "candidatesearch/" + e.data.CandidateId,
        contentType: 'application/json',
        dataType: 'json',
        success: function (data) {
            kendo.bind(detailRow, data);
            detailRow.find(".tabstrip").kendoTabStrip({
                animation: {
                    open: { effects: "fadeIn" }
                }
            });
        },
    });
}

Everything seems to go fine. The event is fired, the data is retrieved but I cannot figure out a way to tell my template to refresh/rebind with the fully retrieved data. What am I missing?

 

Thank you in advance for your help.

William
Top achievements
Rank 1
 answered on 06 Apr 2016
3 answers
706 views
Hi Guys,

Have just tripped over the following issue with the 'items per page' dropdown overriding the 'All' setting with the total number of records.

To see the problem in action run the following dojo

        http://dojo.telerik.com/EZevo
        
- Set the 'items per page' to 'All'

- Now filter the Freight column to show items greater than 32 and less than 33 which now shows 1 - 12 of 12 items
  But the 'items per page' dropdown now shows 830 instead of 'All'
 
- Reset the dropdown to 'All' and clear the filter and the 'items per page' value gets set to 12

To my mind this seems wrong if I have set the dropdown to 'All' it should not get overridden with the total number of records of the previous filter.

Regards
Alan
Vasil
Telerik team
 answered on 06 Apr 2016
3 answers
210 views

I am having trouble with the filter row example from your demos for the kendo ui grid. My code looks similar to what you guys are showing but I get an error when I run my site. The code I am using is shown below:

 

However, when I run this I get an error saying "Cannot convert lambda expression to type "bool" because it is not a delegate type. This happens on line

columns.Bound(p => p.Name).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));

What am I missing?

 

@(Html.Kendo().Grid<MyViewModel>()
    .Name("MyGrid")
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read =>
        {
            read.Action("GetResults", "MyController");
 
        })
        .PageSize(10)
        .ServerOperation(true)
        )
        .Columns(columns =>
        {
            columns.Bound(p => p.Name).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
            columns.Command(command => command.Custom("Report").Click("showDetails"));
        })
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .Sortable()
        .Pageable()
        .Selectable(s => s.Mode(GridSelectionMode.Single))
 
)

Boyan Dimitrov
Telerik team
 answered on 06 Apr 2016
3 answers
2.6K+ views

How would I set up a filter that looked for null values in a numberic field?

filter currently looks like this:

'$and': [
                { 'CompanyId': null },
                { 'IsActive': true }
            ]

 

If I look for a value in CompanyId it works, but trying find items with null values (or "Not set") finds nothing.

Rosen
Telerik team
 answered on 06 Apr 2016
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?