I've implemented a Kendo grid with basic CRUD functionality (JS front end, MVC controller) and this all works correctly. I have a requirement to provide functionality that enables a "replace all" type function. For example, I filter by a company name then click edit on a record and change the email address or phone number - I also need the option to update all records in the current filtered set to the edited email/phone number. (instead of editing each record individually).
Is there anything in the tool set enabling this type of functionality or will I need to build a custom control?
Many thanks!
I found a solution from a previous question, an example is here:
http://jsbin.com/alocoj/1/edit
Also if you require the filtered and sorted data set (instead of the entire set) use:
var grid = $('#grid').data('kendoGrid');
var dataSource = grid.dataSource;
var data = dataSource.view();
The .view() gets the current set
Related
I have a kendo ui spreadsheet which I would like to display remote data and based on a value disable an entire row to prevent user form editing it rather than a cell. Is there any way todo this?? Similar like inline edit for a kendo grid but in this case I would like to edit only certain rows within the spreadsheet??
You could use a range and then disable the whole range. As presented here:
https://demos.telerik.com/kendo-ui/spreadsheet/disabled-cells but with rows rather then columns.
there is a feature called "Filter Row" in Kendo Grid
http://demos.telerik.com/kendo-ui/grid/filter-row
I want to add a drop-down list instead of a text box or a number box, to the filter box. It's for filtering a column that has countries. So I want list of countries in a drop-down list. How can I do this?
It's very similar to the custom Filter Menu (http://demos.telerik.com/kendo-ui/grid/filter-menu-customization). I made the mistake of no using valuePrimitive: true. You might not want it in your situation but keep that in mind.
Here's a sample: http://dojo.telerik.com/OKaS
Also, the filter menu should take up the editor model of the column but it's not always what you want.
Edit
Starting from 2014 Q2 SP1, the template function now receives an object containing "datasource" and "element". In my example, you would have to change the dropdown initialization from "container.kendoDropDownList" to "container.element.kendoDropDownList". The datasource is empty in my example but I'm assuming this can be used to pass the choices to a control without requiring another datasource or to externalize your current. I have not experimented with this feature but I suggest you do before taking my sample blindly.
As Pluc mentioned earlier valuePrimitive: true will help you create a custom filter for your grid/columns to send id's to your controller, if you are not using setting this property true you will receive an Object in your controller instead of a number, the conversion will not be made automatically . This is still working as of 2019
We are developing a web app project in that we are using Kendo UI. Is that possible to make first column title/heading as what ever we selected from drop down. For example :- If a serial number is searched , serial number should be in the first column of the search. But I am unable to get that since we defined column definition generically in sorted manner. Depending upon selection we hide rest of the column.
for example:
xxx.GridColDef = [ {
field : "serialNo",
title : "Serial No",
}, {
field : "firstname",
title : "firstname",
}, {
field : "lastnameo",
title : "lastname",
},
from the drop down if i select first name the first name should be in the first column. but i am getting first column as serial no Is there any way? without adding separate column definition for each.
Kendo version - 2012.1.322
this should be done automatically not using column re-ordering not manually
Sorry if I am not clear. What I want is
In drop down I have
Serial No
First Name
Last Name
DOB
Initially the the grid will be as below
Serial No First Name Last Name DOB
If user selects "First Name" from drop down it should be like this
First Name Serial No Last Name DOB
Hope this helps. if you need more clarification let me know . Thanks for providing solution for this.
One more thing: -
"Fiddle using your current version of Kendo 2012.1.322 " in this fiddle i am unable to select from drop down.
Updated Answer 2
The current KendoUI grid framework does not support the ability to switch columns in code. I've created a new fiddle where you don't have to completely re-order the columns in every switch case. It loops through your column definition and if the drop down value is there, it removes it from the array and places it at the first position. I don't know how your 50 columns and 8 drop downs interact so it's hard for me to give a completely accurate answer. But between the multiple suggestions on here, I hope you can come to a solution :)
I created a new tempColumn definition variable so that the original column definition is still available in it's original state.
function onSelect(e) {
var ddlVal = this.dataItem(e.item.index()).value;
var tempColumns = columnDefinitions;
$(tempColumns).each(function(index) {
if (ddlVal == this.title) {
tempColumns.splice(index, 1);
tempColumns.splice(0, 0, this);
}
});
createGrid(tempColumns);
}
New fiddle which uses spice to re-order the columns
Updated Answer
I've created a new fiddle with your current version of Kendo. You don't need to update your version because I don't believe there is any way to do this within the Kendo framework.
This solution involves re-defining your column definitions when you make a selection from the drop down and then re-create the grid.
Updated fiddle with your current version of Kendo
*For some reason, Internet Explorer doesn't play nice with jsfiddle sometimes. This example works in Firefox and Chrome but not in IE. If you can't try a different browser to see it work, plug the code into your solution and test it.
Original Answer
I've provided 2 different solutions.
1) Is it possible for you to update your version of KendoUI? If you can, then you can take advantage of the .showColumn() and .hideColumn() methods.
Here's a fiddle below using KendoUI 2012.2.710. On the select event of the drop down, you just show/hide the appropriate columns. Really easy and straight forward.
Fiddle using Kendo 2012.2.710
2) If you can't update your KendoUI version, you can alter your columnDefinition array and then re-create the grid.
In the onSelect method of the drop down list, you remove the first column from the columnDefinition array and then add in the new column object to the array. After that, you remove the content of the grid's div element and then re-create the grid.
You're still binding to the same data so you don't have to go back across the wire to get the data again.
Fiddle using your current version of Kendo 2012.1.322
~ In both cases, the code could definitely be cleaned up to suit your needs better but I just wanted to give you some base functionality to work with. Hope this helps!
I need to make multiple RadGrids with editable columns throughout them. I understand how to make bound columns and make template columns but i do not know how to place Textbox's and Dropdownlists inside of those template columns.
string templateColumnName = "ContactName";
GridTemplateColumn templateColumn = new GridTemplateColumn();
templateColumn.ItemTemplate = new MyTemplate(templateColumnName);
templateColumn.HeaderText = templateColumnName;
what do I do after this.
You should instantiate the desired webcontrol within the container. This happens in the InstantiateIn method. I'd recommend that you examine this link:
Programmatic creation
If you need more info, you can also examine this one:
Creating Web Server Control Templates Programmatically
Let us know if you have any specific question about that.
I have an MVC 3 Razor Telerik grid. I have an Edit comand on the row.
When a user clicks on Edit (this places the grid in Edit mode with an Update and Cancel button), I want to set a property for two of the columns to readonly.
When the user clicks on Cancel or Update, I want to set the columns back to full permission.
I know there must be some properties in the controller I should be able to set when the Edit button is pressed for this, but have not seen any docs on how to accomplish this.
How can I do this?
I'm using version 2011.2.712.340 of the controls.
What your describing above sounds a little bit confusing. The purpose of the readonly property is to ensure that when your row enters edit mode the columns that had readonly explicitly set cannot be edited, which seems to be what you're looking for. When in regular read mode all columns will have the same permission whether or not readonly was set, since you are just viewing the data and not editing.
Edit after clarification from comment:
Seems like you want to have this field editable when you are inserting a record, but not when you edit the row. Well, this can be done using some JavaScript. If you use Ajax binding (the only way to fire this event) you can do the following by subscribing to the onEdit client-side event:
...
.ClientEvents(clientEvents => clientEvents.OnEdit("onEdit"))
...
And here's the JavaScript:
<script type="text/javascript">
function onEdit(e) {
var form = e.form;
var mode = e.mode;
if (mode == "edit") {
var country = form.Country; //Country is a public property of my Model
country.disabled = true;
}
}
As you can see above, I get the form with the associated edited row and specifically grab the field associated with the property I do not want to be edited and disable that input element.