Telerik Forums
Kendo UI for jQuery Forum
1 answer
1.0K+ views

Hi,
I need to create unique grid name inside template, i try with javascript, but it doesn't work.

<script id="conditionGroupTemplate" type="text/x-kendo-template">
    @(Html.Kendo().Grid<Rule.ConditionViewModel>()
                  .Name("entryGroupConditions" + //here i need to call getGUID()//)
                  .Columns(columns =>
                  {
                      columns.Bound(o => o.Text);
                      columns.Command(command =>
                      {
                          command.Destroy();
                      }).Width(110);
                  })
                  .ToolBar(toolbar =>
                  {
                      toolbar.Template("<div class='toolbar'><a class='k-button k-button-icontext pull-left' onClick='AddGroup(\"\\#entryGroupConditions\", \"Skupina podmínek\")'><span class='k-icon k-add'></span>PÅ™idat skupinu</a><h3>AND</h3></div>");
                  })
                  .ClientDetailTemplateId("conditionTemplate")
                  .AutoBind(false)
                  .DataSource(ds => ds
                      .Ajax()
                      .Model(m => m.Id(o => o.Path))
                      .Destroy(del => del.Action("DeleteAttribute", "Rule"))
                  )
                  .Resizable(resize => resize.Columns(true))
                  .ToClientTemplate()
    )
</script>

function getGUID(){       
        return (salt() + salt() + "-" + salt() + "-4" + salt().substr(0,3) + "-" + salt() + "-" + salt() + salt() + salt()).toLowerCase();
    }
 
    function salt(){
        return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    }

Any help?
thanks

Dimo
Telerik team
 answered on 22 Aug 2016
1 answer
149 views

I'm seeing some unexpected behaviour on the Scheduler running in Safari (on Mac OSX and iOS).  If I have the initially selected view set to "month" and selectable: true, when I change the view the date/range displayed in the header is set to the beginning of the displayed month range.  For example, with today being August 15, 2016, when I change the view to "day", the calendar displays July 31 instead of August 15.  Similarly, if I switch from "month" to "week", the displayed week is "July 31 - August 6.  If I don't have selectable set to true, I see the expected behaviour (i.e. display the current day/week).  If I just select the Month option (i.e. no switch necessary) the displayed month changes to July.

I can reproduce this behaviour using the default demo (see, for example, http://dojo.telerik.com/@mrosvick/uBIKa/2). I don't see this behaviour on other browsers/platforms.  Why is this occurring?

Georgi Krustev
Telerik team
 answered on 22 Aug 2016
1 answer
1.1K+ views

 

I have a edit popup dialog in a grid which will save a project into a project table.

This operation can be lengthy, because some tables are copied in the same operation. Maybe 10 seconds..

 

The problem now is when i click the save button, nothing happens in the gui for 10 seconds. Then the dialog closes.

If the user clicks the button right after it has been clicked two events will trigger, resulting in a error.

 

So how can i disable the save button / display a spinner in the save button while the add / update operation is ongoing ?

And when the operation is done, enable the button and remove the spinner ?

If the execution fails then i want to enable the button and let the user try again..

 

Anyone ?

 

 

 

Daniel
Telerik team
 answered on 22 Aug 2016
3 answers
447 views

I got a problem with the Kendo UI MVC DropDownList. I want to do server side filtering. When I click on the control, the list gets populated. This works fine if the current selected item is in the populated list.

But what if I have an address book and the current selected name is "Zorro". I have thousands of names before and when I click on the list, only the first 10 names starting with "A" are shown.

How do I include the currently selected item in the DataSource, so it remains selected if I click on the dropdownlist?

Here is my code:

Razor:

@(Html.Kendo().DropDownListFor(m => m.Id)
        .DataValueField("Id")
        .DataTextField("DisplayName")
        .Filter("contains")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("PopulateNames", "PhoneBook");
                read.Type(HttpVerbs.Post);
            })
            .ServerFiltering(true);
        })
)

Controller:

[HttpPost]
public ActionResult PopulateNames(string text)
{
    var q = TblName.Query(n => n.ClientId.IsEqualTo(Manager.One.ClientId), n => n.DisplayName.Asc());
    if (text != null && text.Length > 2) q.Filter(n => n.c.DisplayName.IsLike(text));
    q.Top(10);
 
    var rows = q.FetchList<NameLookupViewModel>();
    rows.Insert(0, NameLookupViewModel.Default);
 
    return Json(rows);
}

Georgi Krustev
Telerik team
 answered on 22 Aug 2016
1 answer
226 views

All of our spreadsheets contain external references. That is, cells that retrieve values from other worksheets in the same workbook using formulae similar to =SomeOtherWorksheet!B13. 

Our application workflow is pretty basic. We load a customer spreadsheet into the client-side kendoSpreadsheet control using the native "Load" button in the toolbar. We then save a representation of that workbook (from the toJSON() method) back to the server.

Later on, in server-side code, we Load() that json string into a Telerik.Web.Spreadsheet.Workbook and convert it to a Telerik.Windows.Documents.Spreadsheet.Model.Workbook. We then retrieve the value of certain cells with CellSelection.GetValue();

Unfortunately, when a cell formula refers to a cell on another worksheet, it fails. To be precise, cell.GetValue().Value.GetResultValueAsString(new CellValueFormat("")) comes back as "#REF!"

This only happens after the spreadsheet has been serialised/deserialised via JSON. If we load the exact same spreadsheet via 
     new XlsxFormatProvider().Import(myExcelFileStream)
then those external references work just fine. 

Am I doing something wrong? I could not find anything in this forum or User Voice that relate to this bug. Is there a workaround?


T. Tsonev
Telerik team
 answered on 22 Aug 2016
2 answers
122 views

Hi,

I've a kendo grid with Navigatable option, and the grid navigation is working fine when I press Tab. But when I make some columns in grid as locked (frozen columns), the grid navigation is not working as expected. The navigation is working for only frozen columns and then for unfrozen columns. 

Can you please provide me with sample solution if possible, because I'm a beginner with Kendo UI.

Thanks in Advance.

Topazz
Top achievements
Rank 1
 answered on 19 Aug 2016
6 answers
422 views

We have following model which are bind to kendo grid with web api 2.2 and Odata v4.0

public class Order
{
    public int Id {get;set;}
    public ICollection<User> ApprovedByUsers {get;set;}
}
 
public class User
{
    public string Name {get;set;}
    public string Company {get;set; }
}


For ApprovedByUsers property we use custom template to display data in grid column in format:

Name1 (company1)
Name 2 (Company2)

All columns have filterable row for filtering it.

When user input some text in filter column kendo grid generate folowing request:

GET /odata/documents?%24top=20&%24filter=contains(ApprovedByUsers%2C%27WMS%27)&%24count=true&myDocumentsOnly=true

which throws following errors:

The argument for an invocation of a function with name 'tolower' is not a single value. All arguments for this function must be single values.

We need to alter this request so that following request has to be send:

odata/documents?%24filter=AssignedUsers/any(d:d/CompanyNameExternalUser eq 'WMS')&%24count=true&myDocumentsOnly=false

We are using kendo controls version: 2014.3.1411

How we can do it?
Rosen
Telerik team
 answered on 19 Aug 2016
7 answers
433 views

If you have a Tabstrip with "tabPosition: Left" or "tabPosition: Right", and then you next a TabStrip inside it with "tabPosition: Top" or "tabPosition: Bottom", it appears to apply some of the styling/position from the parent left/right positioning, breaking the TabStrip, places the tabs one above the other in an incorrect position.

 Hopefull this link will work, if not you'll have to paste the code below into a new Dojo: http://dojo.telerik.com/eWiHa

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/tabstrip/tab-position">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.blueopal.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.blueopal.min.css" />

    <script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
</head>
<body>

  <div class="demo-section k-header">

    <div id="tabstrip-A">
      <ul>
        <li class="k-state-active">One</li>
        <li>Two</li>
        <li>Three</li>
      </ul>
      <div><p>A</p></div>
      <div><p>B</p></div>
      <div>
        <div id="tabstrip-B">
          <ul>
            <li class="k-state-active">One</li>
            <li>Two</li>
            <li>Three</li>
          </ul>
          <div><p>A</p></div>
          <div><p>B</p></div>
          <div><p>C</p></div>
        </div>
      </div>
    </div>
  </div>
  <style>
    .demo-section { width: 600px; }
    .demo-section * + h4 { margin-top: 2em; }
    .demo-section .k-tabstrip .k-content { height: 140px; }
  </style>
  <script>
    $(document).ready(function () {
      $("#tabstrip-A").kendoTabStrip({ tabPosition: "right" });
      $("#tabstrip-B").kendoTabStrip({ tabPosition: "bottom" });
    });
  </script>

</body>
</html>

Iliana Dyankova
Telerik team
 answered on 19 Aug 2016
1 answer
294 views

Hello, i'm trying to learn Kendo and would like to use my local drive initially, just to start off with simple examples and so i'm wondering if Telerik has some examples that i can simply cut and paste to my C:\ drive like below and where the data inputs are JSON files? 

Or in the example below, can i somehow determine what the full path is for this input dataset?

//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers

thanks very much for any pointers!

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>

<div id="example">
    <div id="grid"></div>
    <script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                    },
                    pageSize: 20
                },
                height: 550,
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                    template: "<div class='customer-photo'" +
                                    "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                                "<div class='customer-name'>#: ContactName #</div>",
                    field: "ContactName",
                    title: "Contact Name",
                    width: 240
                }, {
                    field: "ContactTitle",
                    title: "Contact Title"
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 150
                }]
            });
        });
    </script>
</div>

<style type="text/css">
    .customer-photo {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-left: 5px;
    }

    .customer-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 32px;
        padding-left: 3px;
    }
</style>


</body>
</html>

Alex Hajigeorgieva
Telerik team
 answered on 19 Aug 2016
1 answer
104 views

Hello,

I'm trying to get a reference to the kendo multiselect widget that I've created using the AngularJS kendo-multiselect directive.  In following the example here (http://docs.telerik.com/kendo-ui/AngularJS/introduction#widget-references), I've tried to add a kendo-widget-name attribute to my element, but it doesn't seem to do anything.  In fact, the docs make mention of 'kendo-widget-name', but none of the examples actually use it.  I scanned the source code, and I can find no reference to that attribute or a directive with that name.  What am I missing? 

Alexander Valchev
Telerik team
 answered on 19 Aug 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
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
SmartPasteButton
PromptBox
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?