Telerik Forums
Kendo UI for jQuery Forum
2 answers
350 views
I have an ticket line grid, with a Total column, which is calculated (Qty x Price), using the total function in the model definition:
schema: {
    model: {
        id: "id",
        fields: {
            id: { type: "string" },
            orderId: { type: "number" },
            lineNo: { type: "number" },
            itemNo: { type: "string" },
            ...
            price: { type: "number" },
            qty: { type: "number" },
            comment: { type: "string" },
        },
        total: function () {
            return (this.get("qty") * this.get("price")).toFixed(2);
        }
    }
}

Note that I use a total function in the model definition instead of a template expression such as "#=Qty * price#" because I need it to also work in the custom edit form (which has a total field that needs to be dynamically updated when qty or price is changed).

Here is a plunker: http://plnkr.co/edit/YHiupWy49mvk4kZAqJTA?p=preview

I need to have a field outside of the grid that always reflects the grand total of the grid (=the total of the Total column).  I have put a place holder below the grid in the plunker, Grand Total; this is where the total should show.

How can I do this, preferably in an AngularJS way?

Thanks,
Lars
Alexander Popov
Telerik team
 answered on 16 Sep 2014
1 answer
642 views
Hi there,

Wasn't sure whether to post this in the grid forum or this one but it seems more like a dropdownlist issue so here we go.

I have a dropdownlist within an editor templates for a a grid that is configured for inline editing.   The dropdownlist is being populated from values within the grid row that I am extracting through javascript within editor template (see below).

Once an item is selected in the dropdown and "Update" is clicked, my controller calls a stored procedure that then updates the database.

(just as an asside for various reasons that I wont get into, I am not using the features of entity framework on this project and am heavilly reliant on stored procedures for my data layer)

Everything works fine, EXCEPT that the text field within object that I pass to the dropdownlist doesn't seem to get update, and therefor doesn't show up correctly on the grid until I refresh the page.   The ID value however IS getting updated ... not sure if, in my case, I need to hook into the change event somehow and manually update the text in the object through javascript.

Here is my code:

THE GRID THAT CALLS THE DROPDOWNLIST "EditorProductMasterData"

@(Html.Kendo().Grid(Model)
    .Name("ProductInfo_" + lang)
    .Columns(columns =>
    {
        columns.Bound(c => c.GridRowID).Hidden(); 
        columns.Bound(c => c.ColumnName);
        columns.Bound(c => c.ProductData.FieldName);
        columns.Bound(c => c.ProductData.ProductValue).ClientTemplate("#: ProductData.ProductValue.MasterDataText #").EditorTemplateName("EditorProductMasterData");
        columns.Command(command => { command.Edit(); });
    })
    .DataSource(d => d
      .Ajax()
      .Read(r => r.Action("Get", "Product"))
      .Update(u => u.Action("Update", "Product"))
      .Model(m =>
      {
         m.Id(p => p.GridRowID);
         m.Field(p => p.ColumnName).Editable(false);
         m.Field(p => p.ProductData.FieldName).Editable(false);
         m.Field(p => p.ProductData.MasterDataValue).Editable(true);
      })

     )
    .Pageable()
    .Editable(e => e.Mode(GridEditMode.InLine))
)

DROPDOWNLIST WITHIN EDITOR TEMPLATE

<script type="text/javascript">
    function sendMasterData() {
        var rowID = $("[name=GridRowID").val();
        var model = $("#ProductInfo_EN").data("kendoGrid").dataSource.get(rowID);

        return  {
            countrycode: model.ProductData.Country,
            lang: model.ProductData.Language,
            GlobalFieldName: model.ProductData.FieldName,
            MDTableName: model.ProductData.MasterDataTableName
        };
    }

</script>
@model NewGlobalProductCatalogue.Models.ProductInfo
@(Html.Kendo().DropDownListFor(p => p.ProductData.ProductValue)
.Name("ProductData.ProductValue.MasterDataID")
.DataValueField("MasterDataID")
.DataTextField("MasterDataText")
.DataSource(d => d
    // .Read(r => r.Action("Index", "MasterDataSelection", new { countrycode = Model.Country, lang = Model.Language, GlobalFieldName = Model.FieldName, MDTableName = Model.MasterDataTableName }))
       .Read(r => r.Action("Index", "MasterDataSelection").Data("sendMasterData").Type(HttpVerbs.Post))

)
.AutoBind(false)
.SelectedIndex(0)
)

Both the object "ProductValue" and the List that is returned from the stored procedure that is called by the ".Read" are based on the same data type and therefor contain identically named properties "MasterDataID" and "MasterDataText".   My assumption was that if I used the same datatype for both the datasource and the object is passed into the editor template, that the control would bind the two together, so that when I selected a value in the dropdown, it would update both the ID and the TEXT in the object.

In my case, it only seems to update the ID and leaves the old value in the text filed ... hence the grid still has told old text value even though the database has been updated with new ID.

Any ideas what I can do?

thx

-Sheldon





Alexander Popov
Telerik team
 answered on 16 Sep 2014
1 answer
134 views
Hello,
I have setup a grid like this:
$scope.mainGridOptions = {
            dataSource: {
                transport: {
                    read: function (e) {
                        $http({ method: 'GET', url: myUrl, cache: true }).
                            success(function (data) {
                                e.success(data);
                            }).
                            error(function (data, status) {
                                console.log(status);
                            });
                    }
                },
                serverPaging: false,
                serverSorting: false,
                schema: {
                    model: {
                        fields: {
                            expiryDate: { type: "date" }
                        }
                    }
                }
            },
            sortable: true,
            filterable: {
                mode: "row, menu",
                operators: {
                    date: {
                        gt: "After",
                        lt: "Before"
                    }
                }
            }
           }

and filtering for a date before today works fine but using after produces no results at all. The data does contain data with dates in the future.
I am using the latest version v2014.2.903

Any ideas?
Thanks,
Casper
Casper
Top achievements
Rank 1
 answered on 16 Sep 2014
1 answer
763 views
Hi,
I have some <select> elements on my page, which are decorated with the kendoDropDownList widget.
The problem is, that their content can be changed (options can be removed, disabled or new options can be added), and I need to update the widgets' content appropriately.
I'm trying to use the refresh method, but I can't get it, new options are not present is the list.
Here is the fiddle: http://dojo.telerik.com/isAQ
Thanks.
Dimo
Telerik team
 answered on 16 Sep 2014
6 answers
708 views
In my chart's legend, it lists each series' name with a square icon that is the same color as my line to the left of it. I need this icon to be a circle for one of my series. Is this possible?

I'm using a line chart if that matters, and the marker type for this line is "circle".
Hristo Germanov
Telerik team
 answered on 16 Sep 2014
5 answers
333 views
Hi, i'm hoping i'm just missing something here but I can't find an event for my problem.

I have an app that can have multiple windows.  I'm maintaining a list of windows which I would like to highlight the currently selected window.  When I click on a window that is not selected, it jumps to the front.

Is there an event that can be fired off when the user clicks on a background window and it jumps to the front?  This would allow me to toggle a style on my window list to highlight the active window.

Possible?

Thanks...
Anthony
Top achievements
Rank 1
 answered on 16 Sep 2014
1 answer
144 views
A few questions

1: Is it possible to change the font size for the chart note?
2. Is it possible to format portions of the note content (coloring a keyword i.e.) using css?

Hristo Germanov
Telerik team
 answered on 16 Sep 2014
8 answers
190 views
I am experimenting with having the Kendo Grid bound to an initial set of data and then using a transport URL for all subsequent trips. To this end, I discovered this project on a kendo Dojo : http://dojo.telerik.com/UtON/125

This is very similar to what I want to be able to do, however, if you notice at the bottom of the script the data total is manually set to 58, but the grid does not reflect this. How can I get the grid to reflect/display the total before paging?

Thanks,
Chris
Daniel
Telerik team
 answered on 16 Sep 2014
1 answer
430 views
Hi! 
How to hide the "Add task" button in the mode "editable: true"?

Thank you for help.
Bozhidar
Telerik team
 answered on 16 Sep 2014
2 answers
323 views
I've created a combobox that should pull remote data from an MVC 4 controller action.

Html:
<label for="contactFilter">Filter by contact name:</label>
<input id="contactFilter" type="search" value="" />

Javascript:
$(document).ready(function () {
 
  $("#contactFilter").kendoComboBox({
    placeholder: "contact name",
    dataTextField: "Name",
    dataValueField: "Id",
    filter: "contains",
    autoBind: false,
    minLength: 3,
    dataSource: {
      type: "json",
      serverFiltering: true,
      transport: {
        read: {
          url: siteRoot + "Groupings/ContactsTypeahead"
        }
      }
    }
  });
   
});

Controller action:
Public Function ContactsTypeahead(filterString As String) As JsonResult
 
  Dim contacts As Attenda.Cmdb.ServerGroups.Core.SupportworksService.Contacts = _supportworks.SearchContacts(filterString)
 
  Dim retVal = contacts.Select(Function(x) New With {.Id = x.ContactID, .Name = x.FirstName & " " & x.Surname}).ToList()
 
  Return Json(retVal, JsonRequestBehavior.AllowGet)
 
End Function

The problem is rather than just getting the value that's been typed in to the combobox the request looks something like:
http://localhost/myApp/myController/ContactsTypeahead?filter%5Blogic%5D=and&filter%5Bfilters%5D%5B0%5D%5Bvalue%5D=bob&filter%5Bfilters%5D%5B0%5D%5Bfield%5D=Name&filter%5Bfilters%5D%5B0%5D%5Boperator%5D=contains&filter%5Bfilters%5D%5B0%5D%5BignoreCase%5D=true

What I actually want is something like:
http://localhost/myApp/myController/ContactsTypeahead?filterString=Bob

Is there any way to get the combobox to just send the value in the box, rather than that serialised filter object?

Thanks,
Nick



Nick
Top achievements
Rank 1
 answered on 16 Sep 2014
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
Drag and Drop
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
Marco
Top achievements
Rank 4
Iron
Iron
Iron
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
Want to show your ninja superpower to fellow developers?
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
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
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?