Telerik Forums
UI for ASP.NET MVC Forum
5 answers
365 views
Hi,

I have a problem with decimal separators when doing inline editing.
Right now I have a solution that works, but I need more than two digits after the decimal separator:

The model:
[DataType("number")]
public double Percent
{
    get { return (double)Math.Round(source.Percent, 5); }
    set { source.Percent = (decimal)value; }
}

The view:
.Columns(columns =>
{
    columns.Bound(c => c.Percent).Title(Resource.Percent).Format("{0:n5}");

Setting the culture:
var c = '@System.Globalization.CultureInfo.CurrentCulture.ToString()'
kendo.culture(c);

The DataType=number, in the model, formats the inline input box the correct way.
The "Format("{0:n5}")", in the view, formats the number correctly in the grid.
There is no problems when updating the model (model-state is valid), but I need higher precision.

thanks.
Rosen
Telerik team
 answered on 13 May 2015
3 answers
310 views
How do I format the width of the page-sizes button on a grid ??

This is what I have:

.Pageable(p =>
    p.Refresh(true)
    .ButtonCount(10)
    .PageSizes(new[] { 10, 25, 100, 200, 1000 })
    .Input(true)
    )

I have tried the following:
.k-pager-wrap .k-dropdown{
    width: 280px;
}

var ddl = $('[data-role="dropdownlist"]').data("kendoDropDownList");
ddl.list.width(100);

-which only change the width of the dropdown list.
How to change the width of the button itself ??
Thanks.
Bryan
Top achievements
Rank 1
 answered on 12 May 2015
2 answers
4.4K+ views

Hi,

How do I add a default filter on a kendo.grid ?

I have a filter on a boolean, which is working just fine, but I would like TRUE to be the selection by default.

I am quite sure that I have done this before and then removed it again, and now I can't remember howto :-(

I'am aware, that server side operations require more than just setting the default filter selection, but once I have figured out how to set the filter in the view, then I figure out the rest.

So, how to set default filter in the view ??

Thank you in advance.

Jacob
Top achievements
Rank 1
 answered on 12 May 2015
4 answers
83 views

It is probably easy as you might say it is. But the fact remains is that I can not find the solution anywhere.

 Here is my code:

public ActionResult Edit([DataSourceRequest] DataSourceRequest gridRequest, Sub editSub)
        {
            if (ModelState.IsValid) 
            {
                Sub subToUpdate = db.Subs.FirstOrDefault();
                subToUpdate.SFirst = editSub.SFirst;
                subToUpdate.SLast = editSub.SLast;
                subToUpdate.SEmail = editSub.SEmail;
                db.SaveChanges();
            }

            return Json(new[] { editSub }.ToDataSourceResult(gridRequest, ModelState));
        }

Every time I modify a different row the first row gets overwritten. I assume that I nee to specify the ID in here: db.Subs.FirstOrDefault(); 

I cannot find how to?

Dimiter Madjarov
Telerik team
 answered on 12 May 2015
1 answer
278 views

Hi, i use a kendo grid with navigatable option set to true.

When i press tab key the current cell step to next row cell but change event is not fired.

I need to select the row corresponding to the active cell setted when i press tab key.

How to solve?

Thanks

Dimiter Madjarov
Telerik team
 answered on 12 May 2015
2 answers
133 views

I am trying to do an application in which I have three related listviews. The second listview is charged in dependency of the item selected in the first one, and the third depends on the second one. When I select an item I need to pass the controller, the id of this item not its text. It works perfectly in the first listview but reaches an error in the second one.

I copy here my view:

@model PruebaTelerik.Models.CompanyGroupModel

<script type="text/x-kendo-tmpl" id="ListViewTemplate">
<option value="#:Id#">#:Description#</option>
</script>

<script>
function onChange(args) {
var dbConnObj = $("#ListAgrupaciones").data("kendoListView");
var index = dbConnObj.select().index();
var dataItem = dbConnObj.dataSource.view()[index];
var _id = dataItem.Id;
cargarDatos('Companies/LoadCompanies', "#ListCompanies", _id);
}

function cargarDatos(urlEspecifica, listaModificar, _id) {
$.ajax({
url: urlEspecifica,
type: 'POST',
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify({ nombre: _id }),
success: function (nombre) {
$(listaModificar).kendoListView({
dataSource: nombre,
template: kendo.template($("#ListViewTemplate").html())
});

},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Error: " + XMLHttpRequest.responseText);
}

});

}

function onChangeCompanies(arg) {
debugger;
var objeto = $("#ListCompanies").data("kendoListView");
debugger;
var indice = objeto.select().index();
debugger;
var item = objeto.dataSource.view()[indice];
debugger;
var _id = item.Id;
debugger;
alert(_id);
cargarDatos('Companies/LoadProducts', "#ListProducts", _id);
}

</script>

The controller has this methods:

[HttpPost]
public ActionResult LoadCompanies(string nombre)
{
int ID = -1;
int dummy;
if (Int32.TryParse(nombre, out dummy))
{
ID = dummy;
}
if (ID == 1)
{
nombre = "agrupación1";
}
if (ID == 2)
{
nombre = "agrupación2";
}
SelectListModel selectList;
List<SelectListModel> listAgrupaciones = new List<SelectListModel>();
selectList = new SelectListModel() { Id = 3, Description = nombre + " 1" };
listAgrupaciones.Add(selectList);
selectList = new SelectListModel() { Id = 4, Description = nombre + " 2" };
listAgrupaciones.Add(selectList);
return Json(listAgrupaciones, JsonRequestBehavior.AllowGet);

}

[HttpPost]
public ActionResult LoadProducts(string nombre)
{
int ID = -1;
int dummy;
if (Int32.TryParse(nombre, out dummy))
{
ID = dummy;
}
if (ID == 1)
{
nombre = "compañía1";
}
if (ID == 2)
{
nombre = "compañía2";
}
SelectListModel selectList;
List<SelectListModel> listAgrupaciones = new List<SelectListModel>();
selectList = new SelectListModel() { Id = 1, Description = nombre + " 1" };
listAgrupaciones.Add(selectList);
selectList = new SelectListModel() { Id = 2, Description = nombre + " 2" };
listAgrupaciones.Add(selectList);
return Json(listAgrupaciones, JsonRequestBehavior.AllowGet);
}

 

Could anyone help me? Thanks a lot.









</script>

<article class="col-lg-12 col-md-12">
<span class="moduleTitle">
<span class="titleBox">Compañías</span>
</span>
<div class="articleContent selectMultiple">
<div class="formRow">
<div class="formItem multiple">
<label>Agrupación: </label>
@Html.Kendo().ListView(Model.CompanyGroups).Name("ListAgrupaciones").TagName("select multiple").ClientTemplateId("ListViewTemplate").BindTo(Model.CompanyGroups).Selectable(selectable => selectable.Enabled(true)).Events(events => events.Change("onChange"))
</div>
<div class="formItem multiple">
<label>Compañía: </label>
@*<select multiple>
<option>Compañía 1</option>
<option>Compañía 2</option>
<option>Compañía 3</option>
</select>*@

@Html.Kendo().ListView(Model.Companies).Name("ListCompanies").TagName("select multiple companies").ClientTemplateId("ListViewTemplate").Selectable(selectable => selectable.Mode(ListViewSelectionMode.Single).Enabled(true)).Events(events => events.Change("onChangeCompanies"))

</div>
<div class="formItem multiple ">
<label>Procedencia: </label>
@*<select multiple>
<option>Procedencia 1</option>
<option>Procedencia 2</option>
<option>Procedencia 3</option>
</select>*@

@Html.Kendo().ListView(Model.Products).Name("ListProducts").TagName("select multiple products").ClientTemplateId("ListViewTemplate").Selectable(selectable => selectable.Mode(ListViewSelectionMode.Single).Enabled(true))
</div>
</div>


</div>
</article>

Azahara
Top achievements
Rank 1
 answered on 11 May 2015
3 answers
186 views

Trying to group together data returned from my controller into a chart where items are categorized and grouped by type. Similar to the spain electricty production chart (binding to remote data) or the stock prices (binding to grouped data).

Here's the JSON I've got coming out of the controller

[ { "data" : [ { "client" : "Native-Client/iOS",
          "count" : 7
        },
        { "client" : "Native-Client/Windows-Phone",
          "count" : 4
        },
        { "client" : "Web-Client",
          "count" : 149
        }
      ],
    "type" : "AddOutageRequest"
  },
  { "data" : [ { "client" : "Web-Client",
          "count" : 161
        },
        { "client" : "Native-Client/iOS",
          "count" : 3
        },
        { "client" : "Native-Client/Windows-Phone",
          "count" : 2
        }
      ],
    "type" : "AuthorizationFailureRequest"
  },
  { "data" : [ { "client" : "Native-Client/iOS",
          "count" : 9
        },
        { "client" : "Native-Client/Windows-Phone",
          "count" : 9
        },
        { "client" : "Web-Client",
          "count" : 349
        }
      ],
    "type" : "AuthorizationRequest"
  },
  { "data" : [ { "client" : "Native-Client/iOS",
          "count" : 7
        },
        { "client" : "Native-Client/Windows-Phone",
          "count" : 6
        },
        { "client" : "Web-Client",
          "count" : 193
        }
      ],
    "type" : "AuthorizationSuccessRequest"
  },
  { "data" : [ { "client" : "Web-Client",
          "count" : 1967
        },
        { "client" : "Native-Client/iOS",
          "count" : 34
        },
        { "client" : "Native-Client/Windows-Phone",
          "count" : 134
        }
      ],
    "type" : "CurrentOutageRequest"
  },
  { "data" : [ { "client" : "Native-Client/Windows-Phone",
          "count" : 19
        },
        { "client" : "Web-Client",
          "count" : 92
        },
        { "client" : "Native-Client/iOS",
          "count" : 2
        }
      ],
    "type" : "PlannedOutageRequest"
  },
  { "data" : [ { "client" : "Web-Client",
          "count" : 1221
        },
        { "client" : "Native-Client/iOS",
          "count" : 6
        },
        { "client" : "Native-Client/Windows-Phone",
          "count" : 12
        }
      ],
    "type" : "RegionRequest"
  }
]

Each type of request (RegionRequest, AuthorizationRequest, etc.) would be the group. Inside that group the data array contains a series of clients and the count of those requests.

After an hour of mucking about with the wrapper I'm still lost on how to group this data and what goes where. I'm not using a C# model so things like the SeriesDefaults doens't work for me because I can't use a lamdba expression to set it up. I'm in control of all the parts here (markup or JSON) so I can output the JSON in a flatter format or something (although I really don't want to output the complete list of request types as these counts are low but outputting 300+ elements doesn't make sense when I can count it in LINQ on the server side much faster).

So any advice on how the data should be formatted or what the wrapper should look like given this data? Do I have to create a view model to do this (which is fine, I just didn't want to do it for a single chart).

BTW I really struggle with the documentation and examples on the site. They're great but only when they perfectly fit in your scenario. In my case for example I can't find an example where a) it's using the MVC wrapper b) it's binding to remote data c) the data is grouped d) there's no C# model. The descriptions of some of the MVC wrappers is just horrible. For example the description for the CategoryAxis says "Configures the category axis" and the example code in the documentation has an example pulling a single property from a model. Can you configure multiple categories? What if you don't have a model?

I really hope I'm not the only one feeling this. The wrappers are great but I'm constantly having to find snippets and samples on StackOverflow to try to figure out what's going on and how to do things, and usually it results in finding something "close" to what I want that I can tweak and sometimes this means finding a jsfiddle that someone has put together and reverse engineering the html/js to what should be plugged into the MVC wrapper. Yes I know you don't have to use the wrappers but they're there for a purpose and I'd rather try to use them instead of raw markup.

Thanks

T. Tsonev
Telerik team
 answered on 11 May 2015
6 answers
134 views
Hi,
    When viewing the editor on IE10 the height grows by 86px above what ever height is set on the style height attribute. On other browsers and IE11 the height is calculated as expected.

To see what I mean if you view your basic usage editor demo on IE11 and inspect the element and look at the layout both the style height and layout height match. See image IE11.png

Then do the same in IE10 or change the Document mode in IE11 to IE10 and inspect the element you will notice the style height is set to what you expect but the layout height is now 86px bigger. See image IE10.png

This means that when you have things laid out nicely and then view under IE10 controls can disappear of the screen because the editor has grown moving controls further down the document.

Any suggestions on a solution to this would be greatly appreciated or any explanation as to why this is happen.

Thanks
Peggy
Top achievements
Rank 1
 answered on 11 May 2015
1 answer
124 views

I am trying to color a row based on the results that returned from the datasource.

Is there a good clean way to accomplish this? The result comes back as a Hex value (not shown in the code below) so it can be a simple concatenation if needed in my MVC or Jquery. I just dont know the best way to perform this. Please help. Thanks

 

@(Html.Kendo().Grid<Guardian.ViewModels.ExtendedTicketModel>()
      .Name("mytickets_grid")
      .Columns(columns =>
      {
          columns.Bound(ticket => ticket.RequesterId);
          columns.Bound(ticket => ticket.RequesterName);
          columns.Bound(ticket => ticket.TopicName);
          columns.Bound(ticket => ticket.Created).Format("{0:MM/dd/yyyy hh:mm tt}");
          columns.Bound(ticket => ticket.Id).Title("Actions").ClientTemplate("<button class=\"btn btn-primary\" onclick='location.href=\"/Ticket/Details/#=Id#\"'>Details</button>");
      })
      .DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("_MyOpenTickets_Read", "Ticket", new{ username = HttpContext.Current.Items["sAMAccountName"].ToString() }))
      )
      .Sortable()
      .Pageable()
      .Filterable()
      )
 
<style scoped="scoped">
    .k-detail-cell .k-tabstrip .k-content {
        padding: 0.2em;
    }
</style>

Dimiter Madjarov
Telerik team
 answered on 11 May 2015
1 answer
2.6K+ views

Greetings,

 I am new to Telerik's MVC controls and also to Jquery in general.  I am trying to build a wizard like interface for the attached screen shot using the Telerik window.  I can get the first step to load, but when click either of the buttons to load the new view for step 2, nothing happens.  The controller fires correctly.    It seems like I need to somehow refresh or reload the Telerik window, but I am not sure how to to do this.  Any help would be much appreciated.

 

 View

@{
    ViewBag.Title = "AddCampaignStep1";
    Layout = "~/Views/Shared/_LayoutModal.cshtml";
}
 
    <script type="text/javascript">
        function SaveandExit() {
            var itemId = $('#btnSaveandExit').attr('itemid');
            var url = '@Url.Action("AddCampaignStep1", "AgencyCampaign")';
          var data = { Id:itemId };
          $.post(url, data, function (result) {
              var id = '#postedFor' + postId;
              $(id).html(result);
          });
 
 
        }
        function SaveandContinue() {
 
            var itemId = $('#btnSaveandContinue').attr('itemid');
            var url = '@Url.Action("AddCampaignStep1", "AgencyCampaign")';
            var data = { Id: itemId };
            $.post(url, data, function (result) {
                var id = '#postedFor' + postId;
                $(id).html(result);
 
            });
        }
  </script>
 
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <h4 class="modal-title" id="addCampaignModalLabel">Add New Campaign</h4>
        <div class="center">
            <img src="~/Content/img/progress-add_campaign-step1.png">
        </div>
        <fieldset>
            <div class="form-group">
                <label for="inputCampaingName" class="control-label">Campaign Name:</label>
                <input type="text" name="inputCampaingName" id="inputCampaingName" class="form-control" value="">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="inputCampaingEndsNotification" id="inputCampaingEndsNotification"> Email me when campaign ends
                </label>
            </div>
        </fieldset>
    <input id="btnSaveandExit" itemid="0" type="button" onclick="SaveandExit()" class="btn btn-default" value="Save and Exit"/>
    <input id="btnSaveandContinue" itemid="1" type="button" onclick="SaveandContinue()" class="btn btn-primary modal-btn" value="Save and Continue" />
  
 
}

 Controller

public ActionResult AddCampaignStep1(int id)
     {
       return View("AddCampaignStep2");   //this line fires with the correct id
   
     

Alex Gyoshev
Telerik team
 answered on 08 May 2015
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
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
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Rating
ScrollView
ButtonGroup
CheckBoxGroup
Licensing
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
+? 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?