It appears that my Kendo UI window feature to allow for close, minimize or maximize does not work at all.
I can resize, and expand it using drag, but clicking on either of the 3 buttons icons does not work.
Here is my basic setup on the cshtml file
#{Html.Kendo().Window()
.Name("window")
.Title("Update user")
.Actions(actions => actions
//.Custom("custom")
.Minimize()
.Maximize()
.Close()
)
.Content(#<text>
fun sample
</text>)
.Draggable()
.Resizable()
.Width(600)
.Visible(false)
.Modal(true)
.Render();
}
All other Kendo UI features work, such as tabstrip and grid.
Is there a possibility of crippleware being applied to the current Kendo app I am using?
According to the Telerik site for the account I am using, the DevCraft Complete license has expired.
Or is it the case of not importing the correct kendo links in the _layout.cshtml page?
Many thanks for your help,
RC
Related
I am trying to implement a very simple grid with ability to add a new row via a toolbar button. None of the samples provided in the documentation seem to work as expected.
#model Models.MyModel
#{
ViewBag.Title = "Simple Grid";
}
<div class="container-fluid">
<div class="row"></div>
<div class="row">
<div class="col-xs-11">
#(Html.Kendo().Grid<Models.MyModel>()
.Name("myGrid")
.ToolBar(toolbar => {
toolbar.Create().Text("Add New Row");
})
.Columns(columns => {
columns.Bound(p => p.Name).Width(200);
columns.Bound(p => p.Header1).Width(100);
columns.Bound(p => p.Header2).Width(100);
})
.Scrollable()
.Editable(ed => ed.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Bottom))
.HtmlAttributes(new { style = "height:350px;" })
.DataSource(ds => ds
.Custom()
.Schema(schema => schema
.Model(model => {
model.Id("Id");
model.Field("Name", typeof(string));
model.Field("Header1", typeof(string));
model.Field("Header2", typeof(string));
})
)
)
)
</div>
</div>
</div>
The above is in a simple index.chtml page which uses a layout page and injects all the jQuery and KendoUI scripts.
When the page is loaded get a JS error Unable to get property 'nodeName' of undefined or null reference
Not sure why that happens, but hitting continue, displays an empty grid as expected.
Clicking the "Add new Row" toolbar button results in another JS error (same as above)
Question:
Am I missing a configuration option on the grid? Per documentation, this is supposed to work "out of the box". All I want to achieve is a simple grid which adds a new empty row everytime I click the "Add" button.
While it can be a bit tough to see at first, using the Custom() configuration requires more than just setting the .Schema() configuration. You can refer to samples in in the Custom DataSource documentation article for references to this. Every sample has at least the Transport field defined with a read configuration set so that the DataSource knows where to read the data.
Since you're doing CRUD operations here I also recommend that you set the other transport fields (Create, Read, Update, Destroy) to ensure that you can work with your controller and communicate with your backend properly.
As a quick note, if you search around the Telerik site for the error unable to get property 'nodeName' of undefined or null reference you start to get the hint that this error is due to an incorrect configuration of a component. It's not specific to the Grid, but it does pop up from time-to-time and the issue almost always boils down to configuration options.
Now, to fix this particular issue I'd recommend working with Ajax binding rather than custom binding. Ajax binding is super simple to work with and is perfect for this kind of scenario where you want a simple Grid added to the page without the more advanced configuration that comes from working with a more advanced feature. Plus you can work with your client-side model to set up validation etc., for your server-side (no need to set the schema manually).
Or, alternatively just set the transport field configuration to valid ActionResults or URLs to push information back and forth properly.
When first implementing any new product I always recommend following documentation closely and starting off with the smaller examples and building form there. If you're looking to work with a custom data source then I say start with a bigger configuration and remove pieces until you get the minimal piece that you're looking for.
MVC 5.2.2
Razor 3.2.2
Kendo MVC UI v2014.2.903
In Javascript, when I want to change the placeholder text of a ComboBoxFor, I thought I could do:
#model MyNameSpace.Models.Address
#(Html.Kendo().ComboBoxFor(model => model.ZipCode)
.Placeholder("Select Zip...")
.DataTextField("Text")
.DataValueField("Text")
.Suggest(true)
.BindTo(Model.MailCodes)
)
the javascript I use....
$("#Address_ZipCode").data("kendoComboBox").options.placeholder = "Select Postal...";
But this doesn't seem to affect the dropdownlist placeholder text at all.
What's the correct way do do this?
Here is my Kendo UI JSFiddle:
http://jsfiddle.net/devfingers/qy85emc8/5/
The awesome people at Telerik helped me:
$("#Address_ZipCode").data("kendoComboBox").input.attr("placeholder", "Select Postal...");
I need help creating this below UI (click on "Ui mock up" link) as a popup when clicking on a link. And each text (Text1, Text 2 and Text 3) would be a hyper link
We are using Kendo UI with ASP.Net MVC framework.
UI mock up
Please lhelp
Try this:
View:
#(Html.Kendo().Window()
.Name("popup")
.Title("Whatever")
.Content(#<text>
anything you want here: the HTML for your 3 text links, for example
</text>)
.Modal(true)
.Visible(false)
.Width(200)
)
Script:
$("#popup").data("kendoWindow").center().open();
Call the script when clicking the link you want to trigger the popup.
I am working on Infragistics Grid in MVC and want to do some customization in it.
The issue is that data which I am showing is different than the inputs I am taking from the user (the editors in row editing/adding mode). There is additional processing needed to be done before displaying in a grid.
Infragistics grid provides a good mechanism to show the JSON object array which nice UI and events which works fine for me. The problem comes when I want to Edit a particular Row or Add New. For this Infragistics provides its own UI for it. Or in case we want to customize it, it doesn't provide much room to do so. It just allows providing a template for columns like the following:
<script id="rowEditDialogRowTemplate1" type="text/x-jquery-tmpl">
<tr class="tableBackGround">
<td class="labelBackGround"> ${headerText}
</td>
<td data-key='${dataKey}'>
<input />
</td>
</tr>
</script>
But I want to provide an entire template which will have my custom form and form elements.
I want a simple Infragistics Grid which will just show the data. If I click Add New within the grid then it will load my dialog.
If I double-click any row it will again open my dialog where I can edit the things. Later, once I save the data, I'll make a server trip and refresh the grid accordingly.
To summarize
I want to provide my own custom Form for Add and Edit in Infragistics Grid. And I'll take care of reloading the Grid after saving the data.
Reference : Infragistics Grid
Please help me to get this done!
You have found the correct API reference - in the 'options' tab look for the rowEditDialogTemplate option.
The use of the default Row Edit Template (yes, it can be used for adding rows as well) is shown in the official sample.
You can also find out more about it in the help topics: Row Edit Template and Configuring Row Edit Template.
Also, in the Infragistics forums you can find additional info on how to utilize the igGridUpdating feature's API methods (addRow and updateRow for example) with your fully custom form for row adding and editing.
I'm trying to display small image inside devexpress grid.
My controller return an image file to my view which is fine(please do not advise me to store image path in my db instead file itself, this is not the question here) to continue I'm getting image in my view calling
Url.Action("GetImage", "Property", new {id = image.Id })
Thats working fine except in devexpress gridview.
If anyone have expirience with DevExpressHelper.WriteToResponse() and know how to use it to properly render <img width="50" height="50" src="/Property/GetImage/5" alt=""> inside devexpress gridview please share.
Thanks
The DevExpressHelper.WriteToResponse method seems to be obsolete.
I believe you can use the approach suggested in the http://www.devexpress.com/issue=Q313518 DX KB as a starting point.
The grid supports templates. One template type is for styles.
Have a look at this demo:
http://demos.devexpress.com/MVC/GridView/Templates
For ASP.NET WebForms you could look here
http://demos.devexpress.com/ASPxGridViewDemos/Templates/Template.aspx
Edit: Provided WebForms demo, when a MVC demo would have appropriate