Telerik Forums
Kendo UI for jQuery Forum
3 answers
1.7K+ views
I have a Kendo grid presented in a mobal window (kendoWindow). The grid has a column command with a click event:
$("#grid").kendoGrid({
...
columns:[
...
{ command: { text: "Details", click: showDetails }, width: "60px" }],
}];

The first time I open the window everything works fine, each time i click on a Details button on a row the showDetails method is called.
However, after closing the windows and opening it again, the event is fired twice. In fact as many times as I've opened the modal window.

Is there a way to unregister the event handler on the grid?
Vladimir Iliev
Telerik team
 answered on 08 Apr 2013
4 answers
191 views
This is odd..  So my grid seems to be working, but the page numbers are being shown vertically.. not horizontally .   Am I missing something?

TTAIA
Lee
Top achievements
Rank 1
 answered on 05 Apr 2013
0 answers
221 views
Hey,

I am developing a grid that takes in a model, but inside the model the variable it needs is an IEnumerable.

We have controllers filling this IEnumerable and it works without the ClientRowTemplate and the DataSource that we have on it, but the second we add both of those elements in, it stops working, it is blank, and does not show any errors.

Here is the code:
@model NS.Quoting.Models.ViewModels.QuoteLineGridViewModel
 
@(Html.Kendo().Grid(Model.QuoteLines)
    .Name("QuotesGrid")
    .Columns(columns => {
        columns.Bound(c => c.LineNumber).Filterable(false).Width(60).Title("Line #");
        columns.Bound(c => c.ItemNumber).Title("Material #");
        columns.Bound(c => c.ItemDescription).Title("Material Name");
        columns.Bound(c => c.Quantity).Filterable(false).Width(70).Title("Quantity");
        columns.Bound(c => c.SalePrice).Filterable(false).Width(81).Title("Quoted Price");
        columns.Bound(c => c.LinePrice).Filterable(false).Width(60).Title("Extended Price");
        columns.Bound(c => c.MarginPercent).Filterable(false).Width(60).Title("Margin %");
    })
    .ClientRowTemplate(
    "<tr>" +
     
        "<td class='line'>" +
            "<span class='linenumber'> #: LineNumber # </span>" +
        "</td>" +
         
        "<td class='materialNum'>" +
            "<span class='itemnumber'> #: ItemNumber # </span>" +
        "</td>" +
         
        "<td class='materialName'>" +
            "<span class='itemdescription'> #: ItemDescription # </span>" +
        "</td>" +
         
        "<td class='QTY'>" +
            "<span class='quantity'> #: Quantity # </span>" +
        "</td>" +
         
        "<td class='quotedPrice'>" +
            "<span class='saleprice'> #: SalePrice # </span>" +
        "</td>" +
         
        "<td class='extendedPrice'>" +
            "<span class='lineprice'> #: LinePrice # </span>" +
        "</td>" +
         
        "<td class='marginPerc'>" +
            "<span class='marginpercent'> #: MarginPercent # </span>" +
        "</td>" +
         
    "</tr>"
    )
    .DataSource(dataSource => dataSource
        .Ajax().ServerOperation(false)
    )
    .Pageable(pager => pager.PageSizes(new int[]{10,25,50}))
    .Scrollable()
    .Sortable()
    .Filterable()
)


Here is the call TWO CALLS to get the PartialView when the View is built:
<div id="itemGrids">
            <h3>Active Items</h3>
            <div id="newAct">
                @Html.Action("GetGrid", "Quote", new { id = Model.Quote.QuoteNumber, isActive = true })
            </div>
            <h3>Inctive Items</h3>
            <div id="newDe">
                @Html.Action("GetGrid", "Quote", new { id = Model.Quote.QuoteNumber, isActive = false })
            </div>
        </div>


The IEnumerable in the QuoteLineGridViewModel is this:
public IEnumerable<QuoteLineSummary> QuoteLines { get; set; }


Here is the Controller method to fill the IEnumerable:
public PartialViewResult GetGrid(int id, bool isActive)
{
    QuoteLineGridViewModel model = new QuoteLineGridViewModel();
 
    using (var client = new HttpClient())
    {
        // URL: /api/QuoteLine/GetByQuoteNumber/1
        var lineUrl = Url.RouteUrl(
                    "ActionApi",
                    new { httproute = "", controller = "QuoteLine", action = "GetSummaryByQuoteNumber", id = id, isActive = isActive },
                    Request.Url.Scheme
                );
        model.QuoteLines = client
                    .GetAsync(lineUrl)
                    .Result
                    .Content.ReadAsAsync<IEnumerable<QuoteLineSummary>>().Result;
 
    }
 
    return PartialView("_QuoteLineGrid", model);
}


Our theory is that it is not getting the current item in the IEnumerable, but we are not completely sure on why it doesn't work.

We tried going through the API/Documentation to see if a RowTemplate would be better, but we did not find much on this topic for the KendoUI.

The reason we are doing it this way is because we want to eventually be able to change the way a row displays using conditional statements.

Please let me know if you need more information or clarification for what is going on and what the end result is.
Vito
Top achievements
Rank 1
 asked on 05 Apr 2013
1 answer
166 views
Hi guys..Do you have nay codes for splash screen? about it will fade hide/fade after 2 seconds?
Thanks you


Keen
Iliana Dyankova
Telerik team
 answered on 05 Apr 2013
1 answer
266 views
I'm moving an application from jQuery UI to kendo UI and have trouble getting kendo autocomplete do what the jquery ui autocomplte does.

The autocomplete queries the server with 3 input paramters and returns a json array of objects:
$('#reportLocation').autocomplete({
    minLength: 4,
    source: function (request, response) {
 
        var country = $('#ddlLocationCountry').val();
 
        $.ajax({
            type: "POST",
            url: "../../ws/wsLocations.asmx/GetLocationsBySearchString",
            data: '{searchString: "%' + request.term.replace(/\ /g, '%') + '%", country: "' + country + '", includeInactive: "False"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            dataFilter: function (data) { return data; },
            success: function (data) {
                $('#locationsByPosition').empty();
                var json = $.parseJSON(data.d);
                response($.map(json, function (item) { return { value: item.LName, id: item.LId} }));
            },
            error: function (result) {
                alert('wsLocations.asmx/GetLocationsBySearchString failed: ' + result.status + ' ' + result.statusText);
            }
        });
    },
    select: function (e, ui) {
 
        var lLocationId = ui.item.id;
        $('#selectedLocationId').text(lLocationId);
 
    }
});
I can't figure how to setup/configure the kendo ui autocomplete (or combobox) datasource right.
Is the above possible?
Morten
Top achievements
Rank 2
Iron
Iron
Iron
 answered on 05 Apr 2013
1 answer
115 views

I want to use the Sparkline functionality within a dashboard web page using the DotNetNuke 6.2 framework.

When I use the sample code snippet below within the DNN framework the height of the sparkline is rendered as 14px.  When I use the same code in a stand alone html file it renders at the specified 50px.  There are no javascript errors thrown in either case.

My only thought is that an internal error is occurring when attempting to find the height and the default render height is 14px.  Debugging the spark line java script using the minimized js files is not working for me.

HTML to render:

<div class='k-content' style='position: relative; width:400px; height:275px;'>
<table style='height: 100%; vertical-align: top;'>
  <tr>
    <td style="width:150px; text-align:middle; line-height: 50px;">
        <span id='htmlsparkline_32ac' style="width: 150px; height: 50px; "></span>
    </td>
    <td style="width:40%; text-align:left;"><span class='ads-summaryvalue'>56795</span>  
      <span>Refund</span></td>
    </tr>
</table>
</div>
 
<script type="text/javascript">
    try {
        $('#htmlsparkline_32ac').kendoSparkline({ data: [1069, 8792, 7078, 6355, 8078, 8066, 9293, 3296, 7559, 56795], type: 'area', theme: 'black' });
    } catch (e) { alert('SparkError: ' + e.message); }
</script>

Code Rendered by kendoSparkline, starting on line 02.

01.<span class="k-sparkline" id="htmlsparkline_32ac" style="width: 150px; height: 50px; position: relative; -ms-touch-action: double-tap-zoom pinch-zoom;" data-role="sparkline">
02.<span style="width: 150px; height: 14px;">
03.<!--?xml version='1.0' ?-->
04.<svg xmlns="http://www.w3.org/2000/svg" style="left: -0.81px; top: -0.83px; display: inline; position: relative;" width="150px" height="14px" version="1.1">
05.<defs id="k10027" />
06.<path style="display: block;" fill="#3d3d3d" fill-opacity="1" stroke="" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="1" stroke-width="0" d="M 0 0 L 150 0 L 150 14 L 0 14 Z" />
07.<path style="display: block;" fill="none" fill-opacity="1" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="1" stroke-width="0.1" d="M 2 2 L 147 2 L 147 11 L 2 11 Z" />
08.<path id="k10026" style="display: none;" fill="none" fill-opacity="1" stroke="#8e8e8e" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="1" stroke-width="1" d="M 2 2 L 2 11" />
09.<path id="k10000" style="display: block;" fill="#fff" fill-opacity="0" stroke="" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="1" d="M 2 2 L 147 2 L 147 11 L 2 11 Z" data-model-id="k10001" />
10.<g id="k10002"><g>
11.<path id="k10024" style="display: block;" fill="#0081da" fill-opacity="0.4" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="1" d="M 2 11 L 2 10.863 L 18.111 9.87 L 34.222 10.09 L 50.333 10.183 L 66.444 9.961 L 82.556 9.963 L 98.667 9.805 L 114.778 10.576 L 130.889 10.028 L 147 3.698 L 147 11" data-model-id="k10025" />
12.<path style="display: block;" fill="none" fill-opacity="1" stroke="#0081da" stroke-linecap="butt" stroke-linejoin="round" stroke-opacity="1" stroke-width="0.5" d="M 2 10.863 L 18.111 9.87 L 34.222 10.09 L 50.333 10.183 L 66.444 9.961 L 82.556 9.963 L 98.667 9.805 L 114.778 10.576 L 130.889 10.028 L 147 3.698" data-model-id="k10025" />
13.</g></g>
14.</svg>
15.</span>
16.<div class="k-tooltip" style="font: 12px/normal Arial,Helvetica,sans-serif; border: 1px solid rgb(0, 129, 218); left: 34px; top: -15px; display: none; position: absolute; font-size-adjust: none; font-stretch: normal; opacity: 1; background-color: rgb(0, 129, 218);">
17.<table><tbody><tr><th colspan="2"></th><tr><td>7078</td></tr></tbody></table>
18.</div>
19.</span>

On line 2 and 4 the height is set to 14px.

Any help would be appreciated.

Alexander Valchev
Telerik team
 answered on 05 Apr 2013
1 answer
608 views
Hi,

I just started using Kendo UI and am still trying to get my head around the css structure.
I am trying to make sure a multi select element is aligned to the right of it's parent div ( see image ).

The HTML code I have is as follows (where the PHP code generates the 2 multiselect widgets) and is used in conjunction with Twitter Bootstrap:
<div class="row-fluid">
    <div class="span5 tfw-right"><?php echo $this->front_mould_codes; ?></div>
    <div class="span2 tfw-center">mould code(s)</div>
    <div class="span5 tfw-left"><?php echo $this->back_mould_codes; ?></div>
</div>
the .tfw-classes are defined as follows:
div.tfw-left {
    text-align: left;
}
div.tfw-right {
    text-align: right;
}
div.tfw-center {
    text-align: center;
}
I can see using Firebug that this alignment is active, but it's not effective. I also tried changing the display to inline-block, but that didn't have the desired result either.
Maybe it's just late and I am looking at it all wrong right now, but some help would be greatly appreciated! :)
Regards,
Rinck
Iliana Dyankova
Telerik team
 answered on 05 Apr 2013
0 answers
63 views
I seem to be unable to get the virtual scrolling to work with large data sets. There seems to be a bug in the calculation of scroll position or height and the effect is different in all browsers. I have created a fiddle to demonstrate.

http://jsfiddle.net/SBxtC/

Firefox seems to max around 234000 depending on exact structure of html
Chrome around 906300
IE around @ 553400

Not sure if there is something im not overrideing correctly.

Also Ive noticed that the naigatable option dosn't work with virtual scrolling. Is there a way around this?
Oliver
Top achievements
Rank 1
 asked on 05 Apr 2013
1 answer
1.0K+ views
I'm trying to build as general a grid as possible. It has a dataSource that uses server side paging, sorting, and filtering. It all works great, at least until the server gets a request from the dataSource and has a hard time figuring out the query that it should execute.

The web server is running .NET, so the dataSource uses web methods to exchange data with the data server via a SqlConnection. The dataSource stringifies all the options very nicely but I can't come up with a general solution for how to write parameters for my web methods that can take a variety of filtering cases.

The simplest case is... simple. Without any filtering or sorting the web method just handles the paging parameters. No problems there.

Adding filtering to the mix, or even doing filtering without any other parameters, is tough. Looking at the JSON that the dataSource sends to the web server, I gather that the filter argument can be complicated. It can be a list of filters and an operation, or a list of lists of filters and operations and filters and operations, yadda yadda yadda. I've attached a tree view of a sample JSON request showing the nested filters; this is a simple case relative to what my grid will eventually have to do.

It almost looks like I need to handle each case explicitly on the server, rather than being able to write a generic filter object that will take any filter parameter sent by the dataSource. That kind of sucks. I have no problem getting the filter out in a particular case (that would be easy) but I can't seem to design a generic object that will take the filter parameter in any case.

Any help on how to represent a filter on the server in the most general case?
Petur Subev
Telerik team
 answered on 05 Apr 2013
1 answer
152 views
Today I've noticed that when using an XML DataSource in a TreeView, KendoUI complains about level method not being defined.

As far as I've seen this method is defined in Data Model but seems that for XML DataSources the code follow a different path and level is not defined.

Given the XML:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<root>
    <doc>
        <nome>fabio</nome>
    </doc>
    <doc>
        <nome>mauro</nome>
    </doc>
</root>
And the following JavaScript code for defining the grid and the datasource:
var ds = new kendo.data.HierarchicalDataSource({
    transport: {
        read: {
            url     : "kendoTWData.xml",
            dataType: "xml"
        }
    },
    schema   : {
        type : 'xml',
        data : '/root/doc',
        model: {
            fields: {
                nome: "nome/text()"
            }
        }
    }
});
 
$("#treeview").kendoTreeView({
    dataSource   : ds,
    dataTextField: "nome"
});
 It complains about level not being defined.

If I add into the model a level function returning any number then it works.
model: {
    fields: {
        nome: "nome/text()"
    },
    level : function () {
        return 0;
    }
}
Is this a bug or XML datasources are not supported in Kendo UI TreeView widgets?
Alex Gyoshev
Telerik team
 answered on 05 Apr 2013
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
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
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
+? 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?