Telerik Forums
UI for ASP.NET MVC Forum
6 answers
4.3K+ views

Hi,

How can I change the default font of a MVC Project with all Kendo Controls / Widget i.e. to Segoe UI?

Peter

Peter
Top achievements
Rank 1
 answered on 01 Jun 2016
1 answer
239 views

Hi,

I don't find an example to plot a heatmap /  intensity chart.

Is a chart similar to the chart in the attached file possible with ASP.NET MVC?

Peter

Rumen
Telerik team
 answered on 01 Jun 2016
4 answers
1.1K+ views

Is there a way to have a Custom Command Button that is only visible when the user is editing a cell and becomes invisible when the editing is complete?  And if so, when clicked resets the row to it's original values.  Right now if the model annotations specifies [required] for a field, if the user starts to edit that column then changes there mind they still have to enter a valid value there. 

I ask this because using the default Edit Inline mode the Update button when clicked hits the controller and resets the dirty flag on the records so the red indicators go away.  We want to have a custom master "Save" button that does a master save of all rows at once.

So basically a way to use the default Edit, Update, Cancel mechanism built into Kendo that just leaves the red indicators and dirty flags when the user clicks the update button and also snaps the row out of edit mode.  In this respect we would not need a custom "cancel" button.

Any suggestions would be welcome.

 

Thanks

Venelin
Telerik team
 answered on 01 Jun 2016
4 answers
217 views

hi,

i cannot get the total sum to show in the ClientFooterTemplate,  below is the code.  please let me know what i need to change.  

the ClientGroupFooterTemplate does show, but the ClientFooterTemplate does not.

thanks.

    @(Html.Kendo().Grid<VolumeViewModel>
        ()
        .Name("ReportGrid")
        .Columns(columns =>
        {
            columns.Bound(o => o.Firm).Width(130).Locked(true);
            columns.Bound(o => o.Collat).Width(70);
            columns.Bound(o => o.UserName).Width(100).Title("User");
            columns.Bound(o => o.Product).Title("Product Type").Width(110);
            columns.Bound(o => o.Symbol).Title("Symbol").Width(100);
            columns.Bound(o => o.Volume).Title("Amount (USD)").Width(150).Format("{0:n0}")
                    .ClientGroupFooterTemplate("Sub-total: #= kendo.toString(sum, \"n2\")#")
                    .ClientFooterTemplate("Period Total: #= kendo.toString(sum, \"n2\")#");
        })
        .ToolBar(tools => tools.Excel())
        .Excel(excel => excel
        .FileName("RevenueReport.xlsx")
        .Filterable(true)
        .AllPages(true)
        .ProxyURL(Url.Action("ExcelExportSave", "ReportGrid"))
        )
        .Sortable()
        .AllowCopy(true)
        .ColumnMenu()
        .Groupable(group => group.ShowFooter(true))
        .Resizable(resize => resize.Columns(true))
        .Scrollable(scrollable => scrollable.Virtual(true))
        .Scrollable(s => s.Height("500px"))
        .Filterable(filterable => filterable
        .Extra(true)
        .Operators(operators => operators
        .ForNumber(n => n.Clear()
        .IsEqualTo("Is Equal To")
        .IsGreaterThan("Is Greater Than")
        .IsGreaterThanOrEqualTo("Is Greater Than Or Equalt To")
        .IsLessThan("Is Less Than")
        .IsLessThanOrEqualTo("Is Less Than Or Equal To")
        )
        .ForDate(d => d.Clear()
        .IsEqualTo("Is Equal To")
        .IsGreaterThan("Is Greater Than")
        .IsGreaterThanOrEqualTo("Is Greater Than Or Equal To")
        .IsLessThan("Is Less Than")
        .IsLessThanOrEqualTo("Is Less Than Or Equal To"))
        )
        )
        .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Multiple)
            .Type(GridSelectionType.Row)
        )
        .AutoBind(false)
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(100)
            .Model(model =>
            {
                model.Id(p => p.Firm);
                model.Field(p => p.Collat).Editable(false);
                model.Field(p => p.UserName).Editable(false);
                model.Field(p => p.Product).Editable(false);
                model.Field(p => p.Symbol).Editable(false);
                model.Field(p => p.Volume).Editable(false);
            })
        .Read(read => read.Action("Volume", "ReportGrid")
        .Data("GetGridData"))
        .Group(groups =>
        {
            groups.Add(model => model.Firm);
            groups.Add(model => model.Collat);
            groups.Add(model => model.UserName);
            groups.Add(model => model.Product);
            groups.Add(model => model.Symbol);
        })
        .Aggregates(aggregates =>
        {
            aggregates.Add(model => model.Volume).Sum();
        })

        .Events(events => events.Error("onError").Change("onChange"))
        ))

James
Top achievements
Rank 1
 answered on 31 May 2016
1 answer
501 views

I am wanting to pass only the rows where the checkbox is checked to my controller but I can not seem to figure this out.  I don't want to use selected but checked boxes.

Scenario: user is presented with a list of products, some of which are pre-checked.  they will then select more products by checking the checkboxes.  I want to send all those rows to the controller, and also have it work with paging.  Is there a way to change the following from using "selected" to use the checked?

 

// gather the selected rows and send them to the controller
  $(function () {
      $('#btnGenerate').click(function () {
          var grid = $('#products').data('kendoGrid');
          var selectedElements = grid.select();
          for (var j = 0; j < selectedElements.length; j++) {
              var item = grid.dataItem(selectedElements[j]);
              items['products[' + j + '].ItemDescription'] = item.ItemDescription;
              items['products[' + j + '].Quantity'] = item.Quantity;
          }
          $.ajax({
              type: "POST",
              data: items,
              url: '@Url.Action("ProductsCart","Trial")',
              success: function () {
                  window.location.href = "@Url.Action("ProductsCart", "Trial")";
              },
              error: function () {
                  alert("No products were selected.");
              }
          });
      });
  });

// POST: Add Trial Products to cart
[HttpPost]
public ActionResult ProductsCart(TrialProductViewModel[] products)
{
   // do something with products
 
    return Json(products);
}

Viktor Tachev
Telerik team
 answered on 31 May 2016
2 answers
166 views

Hi there I am trying to do http://demos.telerik.com/aspnet-mvc/grid/filter-row for my application. But there are some functionality I want to control but fails to do so and I can't find it anywhere on the documentation. 

Since I have a lot more data than the demo here (15,000 people), loading all the auto complete from the filter the moment one character is typed in will result in a very slow and bad user experience, and often times it will pop up a window like the screenshot telling me "Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property."

How can I control when the auto complete shows up? 

I did something like this in order to start auto complete after three characters, is this right? Any better way to control the whole project instead of just one column?

        columns.Bound(i => i.LastName)
            .Filterable(ftb =>
                ftb.Cell(cell => cell.MinLength(3)
                ));

 And when I clear the filter, it will load up a list with all the people here, which is not something I want and it will often stuck there for 10 seconds and then shows the error. How can I disable it?

 

Milena
Telerik team
 answered on 31 May 2016
1 answer
535 views

I have a grid which allows users to upload multiple files during the edit mode. Now during the edit mode, i am trying to figure out a way to show the preuploaded files and let user delete the files by clicking on 'x' icon. 

Is there any example that shows how to  populate prouploaded files during the edit mode inside the kendo grid in ASP Mvc?

Thanks

Avinash

 

Radoslav
Telerik team
 answered on 31 May 2016
6 answers
420 views

Can you translate the texts in the filters, like "Equals to" "Contains" etc. ?

if so. how ?

 

it would look a lot better if I can translate this to a different language.

 

Regards,

Emil

 

Emil
Top achievements
Rank 1
 answered on 30 May 2016
3 answers
473 views

I have a grid where I have a popup form defined to edit a row.  Everything (finally) is working correctly *EXCEPT* the In-Progress spinner never displays upon submit.

Grid definition:

@(Html.Kendo().Grid<BomViewModel>()
        .Name("bom-prGrid-kendoGrid")
        .HtmlAttributes(new {@class = "prGrid"})
        .ClientRowTemplate("")
        .Columns(columns =>
        {
            if (Model.StatusDisplay.Equals("Started")) { columns.Command(cmd => cmd.Edit()).Width(80); }
            columns.Bound(g => g.BomId).Hidden();
            columns.Bound(g => g.IsEditable).Hidden();
            columns.Bound(g => g.Row).Width(75).Title("Row");
            //... Some columns removed for brevity ...//
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => { model.Id(g => g.BomId); })
            .PageSize(100)
            .Read(r => r.Action("GetCloneAssembly", "AjaxProductReuse").Data("ProductReuseGridReadData"))
            .Update(u => u.Action("UpdateBomItem", "AjaxProductReuse").Type(HttpVerbs.Post).Data("getUpdatedBomRowData"))
            .Events(e => e.Error("ajax_error").Sync("dataSource_sync").Change("dataSource_change"))
        )
        .Events(e => e.DataBound("onDataBound").Edit("onEdit").Save("onSave"))
        .Pageable(pager => pager
            .Input(true)
            .Numeric(true)
            .Info(true)
            .PreviousNext(true)
            .Refresh(true)
            .PageSizes(new int[] {100, 250, 500, 1000})
        )
        .ToolBar(toolbar =>
        {
        toolbar.Template(
                @<text>
                    <div class="container-fluid otherElements" style="padding-top: 5px; padding-bottom: 5px;">
                        @Html.Partial("_CloneAssembly", Model)
                    </div>
                </text>);
        })
        .Excel(excel => excel.FileName("ClonableBom.xlsx").Filterable(true).AllPages(true).ProxyURL(Url.Action("ExcelProxy", "AjaxProductReuse")))
        .Sortable()
        .Scrollable()
        .Filterable()
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("BOMForm").Window(w => w.Title("Manage BOM Item").Name("BOMForm")))
        .Resizable(resizing => resizing.Columns(true)).Reorderable(reorder => reorder.Columns(true))
        )

Javascript:

// Events as defined by the grid's .Event(...) settings...
function onEdit(e) {
    //Bind deactivate event to the Popup window to support conditional formatting
    e.container.data("kendoWindow").bind("deactivate", function() { conditionalFormattingAll(); });
}
function onSave(e) {
    debugger;
    kendo.ui.progress(e.container, true);
}
// End events...

Maybe I misunderstood all the docs, forums and such but the onSave(e) event handler should display a progress gif while the ajax call is in progress.  Am I completely off base here?

 

Konstantin Dikov
Telerik team
 answered on 30 May 2016
1 answer
245 views

Hey,

maybe i missing something. But it seems there is no support vor the "prompt" property of the DisplayAttribute, isnt? Any plans to have full support for the DisplayAttribute out of the box? Would be awesome!

regards
Kai

Konstantin Dikov
Telerik team
 answered on 30 May 2016
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
Dialog
MultiColumnComboBox
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
Security
ColorPicker
DateRangePicker
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?