Telerik Forums
UI for ASP.NET MVC Forum
1 answer
489 views
Hi,

i want fix width of column in kendoGrid, i tried using width:100px but when text is too long like
 (Ex. asgfsgdajhdkjashdasdklaskdljaslkdjlkasj) column width aoutomatically incresed,
 is there any way to handel overflow text or nowrap property to break text and add it to next line.
Dimiter Madjarov
Telerik team
 answered on 18 Apr 2013
4 answers
430 views
I'm having problems when trying to format the date that's displayed on a grid.

With the following code:
@(Html.Kendo().Grid(Model.Users)
      .Name("Grid")
      .Columns(columns =>
                   {
                       columns.Bound(u => u.UserView.CreatedOn).Format("{0:g}");
                       columns.Bound(u => u.UserView.ID).Title("").Sortable(false).Width(100)
                           .ClientTemplate("<a class='button' href='" +
                                              Url.Action("EditUser", "Admin") +
                                              "/#= UserView.ID #'" +
                                              ">Edit</a>"
                           );
                   })
      .Pageable()
      .Sortable()
      .Scrollable(scr => scr.Height(400))
      .Resizable(resize => resize.Columns(true))
      .DataSource(dataSource => dataSource.Ajax().ServerOperation(false)))
The date appears unformatted (e.g. /Date(1361292162723)/) and the edit button appears in the other column (see the edit image).

If I change the code so that the date column uses a client template with the date formatting:
@(Html.Kendo().Grid(Model.Users)
      .Name("Grid")
      .Columns(columns =>
                   {
                       columns.Bound(u => u.UserView.CreatedOn).ClientTemplate("#=CreatedOn ? kendo.format('{0:d}', kendo.parseDate(CreatedOn)) : ''#");
                       columns.Bound(u => u.UserView.ID).Title("").Sortable(false).Width(100)
                           .ClientTemplate("<a class='button' href='" +
                                              Url.Action("EditUser", "Admin") +
                                              "/#= UserView.ID #'" +
                                              ">Edit</a>"
                           );
                   })
      .Pageable()
      .Sortable()
      .Scrollable(scr => scr.Height(400))
      .Resizable(resize => resize.Columns(true))
      .DataSource(dataSource => dataSource.Ajax().ServerOperation(false)))
Then the date formats correctly but the edit button in the other column no longer appears. It just shows the ID as a string (see the noedit image).

How can I get the date to format correctly and have the other client template working?
Daniel
Telerik team
 answered on 18 Apr 2013
1 answer
224 views
Hi,
While retrieving the value of dropdownlist I am getting 'undefined'. here is my code: 

 @(Html.Telerik().DropDownList()
          .Name("cmbInvoieNo")
          .BindTo(new SelectList(Model.PIModel, "InvoiceID", "InvoiceName"))
                   .Placeholder("Select Invoice Number...")
                   .HtmlAttributes(new { style = "width: 230px; float: left;" })
                                    ) 
 <div><button type="submit" class="t-button t-state-default" onclick="getInvoiceNo()"> @Model.ButtonCaption</button> </div>
----------------------------------------------------------------------------------------------
@{
    <script type="text/javascript">
              function getInvoiceNo() {
            var cmbInvoice = $("#cmbInvoieNo").data("tDropDownList").text();            
            alert(" Invoice1 : " + cmbInvoice);
        }      
   </script>
}

--- On Click of 'Submit' button : $("#cmbInvoieNo").data("tDropDownList").text() return 'undefined' 
$("#cmbInvoieNo") ---  'defined'
$("#cmbInvoieNo").data("tDropDownList") ------- undefined

any Idea what could be wrong ??

Khem
Top achievements
Rank 1
 answered on 18 Apr 2013
1 answer
199 views
I am trying to implement search criteria which bind to Kendo Ui grid.
However it return no record and no error display. Is there something i
missed?

Controller code :

[HttpPost]
public ActionResult SearchProduct(ProductSearchCriteria criteria)
{
string nameCriteria = string.Empty;
string descCriteria = string.Empty;

TTSEntities dc = new TTSEntities();
if (!string.IsNullOrWhiteSpace(criteria.Name)) nameCriteria = criteria.Name.ToLower().Trim();

if (!string.IsNullOrWhiteSpace(criteria.Community)) descCriteria = criteria.Desc.ToLower().Trim();

var results = dc.Products.AsQueryable();
if (criteria.Name!= null)
results = results.Where(b => b.Name== criteria.Name);

if (criteria.Desc!= null)
results = results.Where(b => b.Desc== criteria.Desc);


return PartialView("_ProductGrid", results.ToList());
}



Index.cshtml


@model HHIMS_Web_App.Models.ProductSearchCriteria

@using (Html.BeginForm())
{
<div id="headerpanel">
<fieldset>
<legend style="font-size:14px">Search Criteria</legend>
<div>
<div class="editor-label">
@Html.LabelFor(model => model.Name)

</div>
<div class="editor-field">
@Html.EditorFor(model => model.Name)
</div>

</div>
<div>
<div class="editor-label">
@Html.LabelFor(model => model.Desc)

</div>

<div class="editor-field">
@Html.EditorFor(model => model.Desc)
</div>

<div class="smallBox">

<input type="button" value="Search" id="btnProductSearch" style="height:33px; font-size:14px; background-color:#3399FF" class="k-button" />

</div>
</div>
</fieldset>

</div>
}




<script type="text/javascript">

$(document).ready(function () {

$('#btnProductSearch').click(function (e) {
var searchParameters = GetSearchParameters();
var jsonData = JSON.stringify(searchParameters, null, 2);

$.ajax({
url: '@Url.Content("~/ProductDetails/SearchProduct/")',
type: 'POST',
data: jsonData,
datatype: 'html',
contentType: 'application/json; charset=utf-8',
success: function (data) {
$('#btnProductSearch').replaceWith(data);
},
error: function (request, status, err) {
alert(status);
alert(err);
}
});

});


function GetSearchParameters() {
var hrn = $("#Name").val();
var community = $("#Desc").val();


return { Name: name,
Desc: desc

};
}



});

</script>

_ProductGrid.cshtml

<div>
<fieldset class="searchResults">
<legend style="font-size:14px">Search Result</legend>
<br />
<div>
@(Html.Kendo().Grid<TTP.Models.ProductModel>()

.Name("Product")
.HtmlAttributes(new { @Style = "align:center; font-size:10px; width:500px" })
.Columns(columns =>
{

columns.Bound(p => p.Name);
columns.Bound(p => p.Desc);

})
.AutoBind(false)
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable()
//.Pageable()
.Pageable(paging => paging
.Input(false)
.Numeric(true)

.PreviousNext(true)
.PageSizes(new int[] { 5, 10, 25, 50 })
.Refresh(false)

)
.Selectable()
.Scrollable()
.ColumnMenu(c => c.Columns(false))
.DataSource(dataSource => dataSource
.Ajax()//bind with Ajax instead server bind
.PageSize(10)
.ServerOperation(true)
.Model(model =>
{
model.Id(p => p.Name);

})




)
)

</div>
</fieldset>
</div>
Petur Subev
Telerik team
 answered on 17 Apr 2013
1 answer
127 views
I have a custom edit pop-up.  I'm trying to add a hidden byte array, but it's not working.  They byte array will be dynamic but I can't even get a hard coded version to work properly.

If I put the following line in the custom edit cshtml file,
<input id="RowVersion" name="RowVersion" type="hidden" value="AAAAAAAAZZM=">
The pop-up renders it as:
<input id="RowVersion" name="RowVersion" type="hidden" value="[object Object]" data-bind="value:RowVersion">
When I try it in a regular MVC page everything works as expected.  (Also, this is the only part of the model that doesn't render correctly in the custom edit pop-up.)
Atanas Korchev
Telerik team
 answered on 17 Apr 2013
1 answer
130 views
I want to know how I have somthing like this
http://www.aspnetwiki.com/page:kendoui-ext-api-dropdowngrid
in kendo.mvc?
Dimo
Telerik team
 answered on 17 Apr 2013
1 answer
123 views
I am trying to implement an Autocomplete on a partial view.  The model contains the data in a property called AvailableMatters which is an IEnumerable<Matter>.  Matter has a property called "Name" which is what I want to display and have users type in the autocomplete box.

Looking at the html that is being rendered, it's got my data in the autocomplete widget.  However, nothing happens when you type in the autocomplete box. 
This is the html that is being rendered:
 <input id="activeMatterID" name="activeMatterID" type="text" />
<script>
    jQuery(function(){jQuery("#activeMatterID").kendoAutoComplete({"select":activeMatterIDSelected,"change":activeMatterIDChanged,
"dataSource":[{"MatterID":10259,"IsMasterDataset":false,"IsChildMatter":false,"ParentMatterID":0,"ParentMatterName":null,"Name":"01_Automated Test Matter","ClientID":3089,"ClientName":"01_AutomatedTestClient","SubClientID":0,"SubClientName":null,"Description":"","ServerID":1,"DatabaseName":"20_10259_3089_Matter_100062_22Jan13_052007","JobNumber":0,"Status":1,"StatusDisplay":1,"Priority":2,"EstimatedJobSizeInGb":0,"ArchiveLocation":null,"DBSchemaVersion":"5.0.0.0","AccountManagerID":21,"AccountManagerName":"Bob Jones","ClientMatterPO":"Matter Test","ContactName":"","ContactPhone":"","ProjectPath":null,"DisplayProjectPath":"","BackupNotes":null,"CurrentLoadVersion":null,"CreatedBy":67,"CreatedDate":"\/Date(1358896807610)\/","ModifiedBy":67,"LastModifiedDate":"\/Date(1358896807610)\/","LastAccessedDate":"\/Date(-62135575200000)\/","LastBackupDate":"\/Date(-62135575200000)\/","TimeZoneName":null},{"MatterID":10263,"IsMasterDataset":false,"IsChildMatter":false,"ParentMatterID":0,"ParentMatterName":null,"Name":"01_AutomatedTestMatter2","ClientID":3089,"ClientName":"01_AutomatedTestClient","SubClientID":0,"SubClientName":null,"Description":"","ServerID":1,"DatabaseName":"20_10263_3089_Matter_23Jan13_023035","JobNumber":0,"Status":1,"StatusDisplay":1,"Priority":2,"EstimatedJobSizeInGb":0,"ArchiveLocation":null,"DBSchemaVersion":"5.0.0.0","AccountManagerID":21,"AccountManagerName":"Bob Jones","ClientMatterPO":"987654","ContactName":"","ContactPhone":"","ProjectPath":null,"DisplayProjectPath":"","BackupNotes":null,"CurrentLoadVersion":null,"CreatedBy":67,"CreatedDate":"\/Date(1358973035963)\/","ModifiedBy":67,"LastModifiedDate":"\/Date(1358973035963)\/","LastAccessedDate":"\/Date(-62135575200000)\/","LastBackupDate":"\/Date(-62135575200000)\/","TimeZoneName":null},],
"dataTextField":"Name",
"placeholder":"Search..."});});
</script>

In Firebug if I look at the HTML view it actually shows me stuff I can't see from the page source, presumably digging down into the Kendo script somewhere:
<span class="k-widget k-autocomplete k-header k-state-default" tabindex="-1" role="presentation" style=""><input id="activeMatterID" class="k-input" type="text" name="activeMatterID" data-role="autocomplete" placeholder="Search..." style="width: 100%;" autocomplete="off" role="textbox" aria-haspopup="true" aria-disabled="false" aria-readonly="false" aria-owns="activeMatterID_listbox" aria-autocomplete="list"><span class="k-icon k-loading" style="display:none"></span></span>

Why does autocomplete="off"?  I don't see anywhere in the helper where I can explicitly turn this on?

And this is the helper code, which was derived from your documentation.
 @(Html.Kendo().AutoComplete()
          .Name("activeMatterID") //The name of the autocomplete is mandatory. It specifies the "id" attribute of the widget.
          .DataTextField("Name") //Specifies which property of the Matter to be used by the autocomplete.
          .BindTo(Model.AvailableMatters)   //Pass the list of Matters to the autocomplete.
          .Events(e => e.Select("activeMatterIDSelected").Change("activeMatterIDChanged"))
          .Placeholder("Search...")
          )

On screen it just looks like a blank textbox.  I do not even see the placeholder text.  I have the latest version  of these Kendo UI Complete plus MVC, I only downloaded it yesterday.

The change event does fire, the value is whatever got typed into the box (which generally isn't valid because no autocomplete occurred and users aren't going to know the exact name type type in.

We are not using any Telerik data sources, we have a custom WCF service we use to retrieve data so we do not want the autocomplete to bind to anything other than the data we pass in via the model.  I want to just capture the select & change events to call our own methods to act based on what they select.

So..what do I need to do to get the autocomplete to function (i.e. to autocomplete when a user types)?

As a second question, ideally I would like to capture not the text that they type but another field on the object associated with their selection.  The objects are Matters, we are showing the Matter.Name, but I would like to retrieve the Matter.MatterID and use this to act off of instead of the Matter.Name.  Is this possible, and how would I do this?  I can work off name if necessary but it's sub-ideal.  My main concern at the moment is getting the autocomplete to work.

Thanks in advance!
Robert
Top achievements
Rank 1
 answered on 16 Apr 2013
0 answers
134 views
Please help with rendering a byte array.
Jeremy
Top achievements
Rank 1
 asked on 16 Apr 2013
0 answers
129 views
Good morning,

I'm having the same issue seen here:
http://www.kendoui.com/forums/permalink/4pdb6wyQTUWsacYhmciO0w. (I've
also seen a few other posts about this same issue)

Unfortunately I don't understand the answer.  Could someone please provide a little more detail about what the answer means?

Thanks!
Jeremy
Top achievements
Rank 1
 asked on 16 Apr 2013
1 answer
525 views
Hello,
There seem to be several examples dotted around the place on how to handle Model State errors
e.g. How do I display model state errors?
http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/faq
However I cannot find any documentation on how to create the error on the server in the first place.
Any hint of what needs to replace the comments shown below, would be much appreciated.
Regards,
Pete
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Update_User([DataSourceRequest] DataSourceRequest request, UserProfile userprofile)
{
  if (userprofile != null && ModelState.IsValid)
  {
    if (errorcondition)
    {
      //raise something here that will be picked up by the onError function described above
      //to inform the user that some sort or error occured
    }
  }
  else
  {
    //raise something here that will be picked up by the onError function described above
    //to inform the user that the ModelState.IsValid is Invalid
  }
  return Json(ModelState.ToDataSourceResult());
}


Vladimir Iliev
Telerik team
 answered on 16 Apr 2013
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
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
ColorPicker
DateRangePicker
Security
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
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?