Telerik Forums
Kendo UI for jQuery Forum
0 answers
152 views
Is there an event equivalent to onEditComplete for Kendo Grid where the event fires only after the content of the cell has been edited?

Documentation mentions "edit" event, but this fires as soon as the cell goes into edit mode (So this is equivalent to onBeginEdit). The closest event with the desired behavior I found was the "save" event, but this event fires unexpectedly from time to time. For instance, if the cell has an up/down arrow to increment/decrement the integer and if the user clicks on the arrows, the save event fires even though the cell is still in edit mode.

The grid's editmode is set to incell.

Edit: For the particular issue above, I've found out that the save event firing upon incrementing/decrementing happens only when the navigatable option is set to true. Is this a bug?
Dvorak
Top achievements
Rank 1
 asked on 10 May 2013
5 answers
413 views
I have a dropdownlist which is bound to a shared kendo datasource.  The shared datasource has already read it's data in.  When I am binding it to this drop down it is calling read on this dataset again.  If I create ddl without the data-bind it will not attempt to read the data a 2nd time.  How do I prevent the dropdownlist from forcing the datasource to read the data?

var ddl = $('<input data-bind="value:' + options.field + '" style="display:none;"/>')
            .appendTo(container);
 
ddl.kendoDropDownList({
    dataTextField: list.displayColumn,
    dataValueField: list.valueColumn,
    autoBind: false,
    optionLabel: optionLabel,
    dataSource: list.dataSource              
});
Scott Rakestraw
Top achievements
Rank 1
 answered on 09 May 2013
1 answer
844 views
Here is what I am trying to do.   I have a grid that is using the syntax @(Html.Kendo().Grid.... (razor).   We want to re-use the grid for different purposes. The columns are the same, the paging is the same etc.   The only difference is sometimes I want to pass in the dataset to bind to and at other times I want to make server calls to get results.

Scenario #1 - we have a predefined list of items we want to display.  The server call to render the page populates the model with the results and the grid should render those rows.  Additionally the sorting, filtering etc should not make a call back to the server since we have all the rows we need.  I can accomplish this by setting the .ServerOperation(false) parameter on the datasource.

Scenario #2 - we have a search page that has some inputs on it that allows us to enter data to reduce our results set.   When we first display the page we display the empty grid and do not want to make the ajax call to populate the grid, which can be accomplished by setting the AutoBind(false) property on the grid.  Then when we click the search button we invoke the grid.dataSource.Read() method. 

So the issue is that I get an error message for scenario 1 telling me 'Cannot set AutoBind if widget is populated during initialization'

I don't quite understand why this error is being thrown.  Seems like we should be able to configure that in this scn

What I would like to do is be able to either override or add configuration options to the grid at the time it is being rendered.   It is preferrable to not create the entire grid in javascript, nor do I really want to create 2 seperate grids since everything is identical with the exception of how the data is bound.  Perfect world would be able to send in parameters as part of the model to tell the grid how to bind.  Right now I have Model.AutoBind and Model.ServerOperation,  however with the limitation I have run into this will not work.    It seems like we should be able to set the AutoBind flag to false

Any suggestions on how to accomplish this?

@(Html.Kendo().Grid<Novus.MediaAccounting.Models.Buys.BuyModel>(Model.GridData)
      .Name(Model.GridName)
      .AutoBind(Model.AutoBind)
      .Deferred()
      .Resizable(resizing => resizing.Columns(true))
      .Scrollable()
      .Columns(columns =>
      {
        columns.Bound(o => o.Id)
          .ClientTemplate("<input name='selectedBuys' id='selectedBuys' type='checkbox' value='#= Id #' onclick='gridRowSelected(this);' />")
          .Template(
          @<text>
                        <input name="selectedBuys" type="checkbox" value="@item.Id" onclick="gridRowSelected(this);" />                    
                    </text>)
          .HeaderTemplate("<input type='checkbox' title='check all records' id='checkAll' onclick='gridCheckAll(\"BuysGrid\", this);' />")
          .Width(35)
          .HeaderHtmlAttributes(new { style = "text-align:center" })
          .HtmlAttributes(new { style = "text-align:center" })
          .Title(string.Empty)
          .Filterable(false)
          .Sortable(false);
        columns.Bound(o => o.Id)
          .ClientTemplate("<div class='btn-group'><a class='btn dropdown-toggle' data-toggle='dropdown' href='javascript:void(0)'>Action<span class='caret'></span></a>"
                          + "<ul class='dropdown-menu'>"
                          + "# if (ClientInvoicingStatusDisplay != 'Invoiced') {#"
                            + "<li><a href='" + Url.Action("EditBuy", "Buy") + "?buyId=#= Id #'" + "><i class='icon-pencil'></i> Edit Buy</a></li>"
                          + "#}#"
                          + "<li><a href='" + Url.Action("ViewDetails", "Buy") + "?buyId=#= Id #'" + "><i class='icon-eye-open'></i> View Details</a></li>"
                          + "<li><a href='" + Url.Action("BuyHistory", "Audit") + "?buyId=#= Id #'" + "><i class='icon-tasks'></i> Audit History</a></li>"
                          + "</ul></div>")
          .Template(
          @<text>
                            <div class="btn-group">
                                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                                    Action
                                    <span class="caret"></span>
                                </a>
                                <ul class="dropdown-menu">
                                    @if (item.ClientInvoicingStatusDisplay != "Invoiced")
                  {
                                        <li><a href="@Url.Action("EditBuy", "Buy", new { buyId = @item.Id })"><i class="icon-pencil"></i> Edit Buy</a></li>
                  }
                                    <li><a href="@Url.Action("ViewDetails", "Buy", new { buyId = @item.Id })"><i class="icon-eye-open"></i> ViewDetails</a></li>
                                    <li><a href="@Url.Action("BuyHistory", "Audit", new { buyId = @item.Id })"><i class="icon-tasks"></i> Audit History</a></li>
                                </ul>
                            </div>
                    </text>)
          .Title("")
          .Width(100)
          .Filterable(false)
          .Sortable(false)
          .HtmlAttributes(new { style = "overflow: visible;" });
        columns.Bound(o => o.BuyId)
          .Width(150);
        columns.Bound(o => o.BillMonth)
          .Width(80);
        columns.Bound(o => o.StatusDisplay)
          .Width(125);
        columns.Bound(o => o.ClientInvoicingStatusDisplay)
          .Width(125);
        columns.Bound(o => o.Payor)
          .Width(175);
        columns.Bound(o => o.MediaTypeDisplay)
          .Width(150);
        columns.Bound(o => o.ClientNetRate)
          .Width(100)
          .Format("{0:c}")
          .HtmlAttributes(new { style = "text-align: right;" });
        columns.Bound(o => o.PriorInvoicedAmount)
          .Width(110)
          .Format("{0:c}")
          .HtmlAttributes(new { style = "text-align: right;" });
        columns.Bound(o => o.NovusCompany)
          .Width(155);
        columns.Bound(o => o.InvoiceDate)
          .Width(110)
          .Format("{0:MM/dd/yyyy}");
      })
      .Filterable()
        .Sortable(sorting => sorting.SortMode(GridSortMode.MultipleColumn))
        .Pageable(page => page.PageSizes(new[] { 50, 100, 200 }).Refresh(true))
      .BindTo(Model.GridData)
      .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(Model.ServerOperation)
        .Read(read => read
          .Action(Model.Action, Model.Controller)
          .Data(Model.JavascriptDataFunction))
        //.Model(model => model.Id(p => p.Id))
        .Sort(sort => sort.Add(c => c.InvoiceDate))
        .PageSize(50)
      )
    )
Thank you,
Wade Sharp
Daniel
Telerik team
 answered on 09 May 2013
1 answer
111 views
Is there any treeview (with checkboxes) event triggered when pressing the spacebar? The checkbox click/unclick triggers the
$("#treeview").on("change", function () {} but the spacebar doesn't (even though the checkboxes are automatically checked/unchecked when doing it)
Thanks
Alex Gyoshev
Telerik team
 answered on 09 May 2013
3 answers
86 views
Once a Theme is built in Theme Builder, is there any way to save it? 
Alexander Valchev
Telerik team
 answered on 09 May 2013
1 answer
122 views
I'm trying to use the mentioned kendo ui components together. I came across this sample in js fiddle, it works like a charm. But when I try to use the same code in my asp.net mvc project, my chart is not being rendered as expected.
Below you can find the code in my project:

@(Html.Kendo().TabStrip()
          .Name("tabstripChart")
          .Items(tabstrip =>
          {
              tabstrip.Add().Text("Chart")
                  .Selected(true)
                  .Content(
                    @<text>
                            <div id="symbolChart"
                                data-role="chart"
                                data-series="[{ field: 'Hours' }]"
                                data-category-axis="{ field: 'Label' }"
                                data-series-defaults="{ type: 'line' }"
                                data-bind="source: Activity">
                            </div>
                            <script type="text/javascript">
                                alert("hey");
                                var viewModel = kendo.observable({
                                    Activity: [
                                      { Label: "Jan", Hours: 10 },
                                      { Label: "Feb", Hours: 5 }
                                    ]
                                });
                                kendo.bind($("#symbolChart"), viewModel);
                            </script>
                    </text>
                  );
 
              tabstrip.Add().Text("Realtime Chart")
                  .Content(@<text></text>);
          })
    )
I'm not getting the expected result. Here I asked the same question on stackoverflow, there you can find the result screen shot. What am I doing wrong? 

Thanks,
Iliana Dyankova
Telerik team
 answered on 09 May 2013
4 answers
131 views
I can't seem to find any documentation regarding what .CSS files are required to get a custom theme working. If I just copy the .css from the theme-builder, the theme appears to break.

Do I also need to add common.min and default.min? I tried these but I don't want to add more .css that I don't need.

TIA
Ray
Top achievements
Rank 1
 answered on 09 May 2013
1 answer
124 views
Hi Admin,

By using, $("#grid.k-grid-pager a").hide();, I have hidden grid pager. If I want to show hidden pager again, how we can do that?
$("#grid.k-grid-pager a").show(); is not showing hidden pager? Immediate help would be appreciated.

Regards,
Partha.
Iliana Dyankova
Telerik team
 answered on 09 May 2013
1 answer
109 views
Hi!

We use the ActionSheet widget in a lot of views. The problem we have is that when a user clicks on a link in the ActionSheet (cancel for example), the click also goes through it and hits a list item under the ActionSheet - this results in two clicks and messes up the user experience.

This problem is particulary apparent on Android.

Any way to solve it?
Petyo
Telerik team
 answered on 09 May 2013
3 answers
390 views
Hi,

Is there any way to change the row template after the grid has been created on the page?  We want to provide different views of the grid (like small icons, large icons, etc) but we also need to be able to revert back to the standard template (i.e. no overriding template/Kendo creates the template).

Any ideas how we can do this please?
Alexander Valchev
Telerik team
 answered on 09 May 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
Drag and Drop
Application
Map
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
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?