I have a shield-ui grid with a hidden column. Once I modify the data source ie perform a filter or do a sort my column sizes get messed up.
My problem can be seen on the demo website as well
Just sort the grid no problem, then hide a column and sort again and you will see the issue
https://demos.shieldui.com/aspnet/grid-columns/columns-show-hide
jQuery(function($) {
$("#grid").shieldGrid({
dataSource: {
data: gridJson
},
sorting: {
multiple: true
},
paging: {
pageSize: 5,
pageLinksCount: 4
},
selection: {
type: "row",
multiple: false,
toggle: true
},
columns: [
{ field: "ServiceMarketingId", title: "ServiceMarketingId", width:"20%" },
{ field: "Code", title: "Code" , width:"20%"},
{ field: "Name", title: "Name", width:"20%" },
{ field: "MarketingName", title: "MarketingName", width:"20%" },
{ field: "Description", title: "Description" , width:"20%"}
],
resizing: true
});
var dataSource = $("#grid").swidget().dataSource,
timeout;
$("#searchInput").on("keyup", function() {
var val = $(this).val();
console.log(val);
clearTimeout(timeout);
timeout = setTimeout(function() {
dataSource.filter = dataSource.filter = {
or: [
{ path: "Code", filter: "contains", value: val },
{ path: "Name", filter: "contains", value: val }
]
}
dataSource.read();
}, 300);
});
$("#grid").swidget().hideColumn("ServiceMarketingId");
});
The Shield UI developers are working on fixing this bug and a fix should be available shortly.
Related
I am using kendo grid with MVC in a .NET project. Two columns of my grid are templates and those have an input text inside of the template. That way every time the grid loads the input texts are always visible and available for change.
When the user clicks on save, I need to check all the rows of the grid, at client side and get the values of those two columns (the only two have templates) and get the values of the input box. So the result I am expecting is a list with two columns that have the last values inserted by the user in the input boxes and not the original value.
Here is my code:
//Grid Data source
var dataSource = new kendo.data.DataSource({
transport: {
read: { url: "/CsmForecastRegistration/GetForecast", cache: false }
},
error: function (e) {
openDialog(e.errorThrown);
},
batch: true,
pageSize: 20,
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "ForecastItemId",
fields: {
ForecastItemId: { editable: false },
RecordId: { editable: false },
SaleId: { editable: false },
IsUpSell: { editable: false },
BusinessName: { editable: false },
HealthScore: { editable: false },
CurrencySymbol: { editable: false },
ForecastWeekTotalContractValue: { editable: true },
ForecastWeekMonths: { editable: true },
ForecastWeek12Months: { editable: false }
}
}
}
});
$("#grdCsmForecast").kendoGrid({
dataSource: dataSource,
scrollable: true,
dataBound: onDataBound,
toolbar: ["excel"],
excel: {
allPages: true,
fileName: "CSMForecast.xlsx"
},
pageable: true,
columns: [
{ title: "", width: "80px", template: $("#comments-template").html(), attributes: { style: "text-align:center; background-color: white;" } },
{
title: "Contract Details",
columns: [
{ field: "RecordId", title: "RecordId", width: "90px", attributes: { "class": "contractDetailGridStyle" } },
{ field: "SaleId", title: "SaleId", width: "90px", attributes: { "class": "contractDetailGridStyle" } },
{ field: "IsUpSell", title: "Upsell?", width: "75px", attributes: { "class": "contractDetailGridStyle" } },
{ field: "BusinessName", title: "Business Name", width: "250px", attributes: { "class": "contractDetailGridStyle"} },
{ field: "HealthScore", title: "Health Score", width: "95px", attributes: { "class": "contractDetailGridStyle"} },
{ field: "CurrencySymbol", title: "CCY", width: "50px", attributes: { "class": "contractDetailGridStyle" } }
]
},
{
title: "Forecast Week",
columns: [
{ field: "ForecastWeekTotalContractValue", title: "TCV", width: "75px", template: $("#forecast-week-tcv").html(), attributes: { "class": "forecastWeekGridStyle" }, footerTemplate: "#: sum # " },
{ field: "ForecastWeekMonths", title: "Months", width: "70px", template: $("#forecast-weekMonths").html(), attributes: { "class": "forecastWeekGridStyle" } },
{ field: "ForecastWeek12Months", title: "12Month", width: "75px", attributes: { "class": "forecastWeekGridStyle" }, footerTemplate: "#: sum # " }
]
}
]
});
And the templates:
<script id="forecast-week-tcv" type="text/x-kendo-template">
# if(IsNewContract === true ){ #
<span>#=ForecastWeekTotalContractValue#</span>
#}
else{#
<input type="text" value="#=ForecastWeekTotalContractValue#" />
#}#
</script>
<script id="forecast-weekMonths" type="text/x-kendo-template">
# if(IsNewContract === true ){ #
<span>#=ForecastWeekMonths#</span>
#}
else{#
<input type="text" value="#=ForecastWeekMonths#" />
#}#
</script>
So I would like to have a list and send to my MVC the controller all the values of these two inputs:
<input type="text" value="#=ForecastWeekTotalContractValue#" />
<input type="text" value="#=ForecastWeekMonths#" />
Thanks
Try something like this:
function getInputValues() {
let result = [];
$('#grid tbody tr').each((i, tr) => {
let row = {};
$(tr).find('input[type="text"]').each((index, input) => {
row[(index ? "ForecastWeekTotalContractValue" : "ForecastWeekMonths")] = $(input).val();
});
result.push(row);
});
return result;
}
Demo
It just iterates over the elements and adds to an array of objects.
Requirement 1:
I need the user to the ability to edit content of the grid all the time, meaning as a template, the user should not be required click on the field and then the editor appears.
Requirement 2: I want a kendo editor for the user to enter/edit values.
The following is what I tried, since I don't know how to do this using template I tried out using editor
Grid setup:
dataSource: {
data: $scope.planOverviewModel,
sort: {
field: "TermName",
dir: "asc"
},
schema: {
model: {
fields: {
TermName: { type: "string", editable: false },
InNetwork: { type: "string", editable: true },
OutNetwork: { type: "string", editable: true }
}
}
},
},
columns: [
{ field: "TermName", title: "Term" },
{
field: "InNetwork",
title: "In-Network",
editor: $scope.setupTextBox
},
{
field: "OutNetwork",
title: "Out-Network",
editor: $scope.setupTextBox
}
],
editable: true,
change: function (e) {
console.log("changed");
if (e.action == "itemchange") {
this.sync();
}
}
Editor setup:
$scope.setupTextBox = function(container, options) {
$('<textarea class="form-control" type="text" data-bind="value:' + options.field + '"> </textarea>')
.appendTo(container).kendoEditor({
resizable: {
content: true,
toolbar: true
}
});
};
I have a kendo grid with create, edit and delete buttons. I also have a next button outside the grid. What I want to do is prevent the user from clicking on the next button, if the user doesn't at least create/edit one record first.
<div ng-show="showActivePage === 'PageTwo'" ng-controller="inputFiscalYearController" >
<div kendo-grid="myGrid" k-options="gridOptionsFiscalYear" ></div>
<div ng-click="showActivePage = 'PageThree'"> Next </div>
<div ng-click="showActivePage = 'PageOne'"> Back </div>
</div>
app.controller('inputFiscalYearController', ['$scope', function ($scope) {
$scope.isDisabled = false;
$scope.gridOptionsFiscalYear = {
toolbar: ["create"],
editable: true,
pageable: true,
edit: function(){
alert();
},
columns: [
{
field: "Name",
title: "Name",
width: "250px",
},
{
field: "Surname",
title: "Surname",
width: "250px",
},
{
title: "",
command: ["edit", "destroy"],
width: "105px"
},
],
editable: "inline",
dataSource: {
data: [
],
pageSize: 10,
schema: {
model: {
id: "id",
fields: {
id: { editable: false },
Name: {
type: "string",
validation: {
required: {
message: "*Required"
}
}
},
Surname: {
type: "string",
validation: {
required: {
message: "*Required"
}
}
},
}
}
}
},
}
}]);
I'm not familiar with kendo-ui, but I do know Angular. Couldn't you just do:
<div ng-click="showActivePage = 'PageThree'" disabled="!gridOptionsFiscalYear.data.length"> Next </div>
I'm presuming that gridOptionsFiscalYear.data is where new records will be created.
Edit: didn't have the required negation on the length.
I have a small grid that only has vertical space to display 10 records. A vertical scroll bar should be able to be used to navigate beyond the first 10 records. I do not want a pager in the grid.
I am having trouble getting it to work (the grid is not scrollable):
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
},
pageable: false,
scrollable: true,
columns: [{
field:"OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 260
}, {
field: "ShipCity",
title: "Ship City",
width: 150
}
]
});
});
As you can see, I am setting pageable to false and scrollable to true, but again, there is no way to scroll the grid.
Here is a plunker: http://plnkr.co/edit/JlMsPa4tey4NBsQbsNp5?p=preview
I got this working. I had to set the height as well:
pageable: false,
scrollable: true,
height: 300,
http://plnkr.co/edit/JlMsPa4tey4NBsQbsNp5?p=preview
I have a kendo chart with group field and also have tree-view with 3 check-boxes.I want to filter the graph with the check-box checked event.but in my application it is not working.please any one help me.
my chart code is
$("#myChart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
dataSource: {
data: tmpData2,
sort: {
field: "date",
dir: "asc"
},
group: {
field: "close"
},
schema: {
model: {
fields: {
date: {
type: "date" }
}
}
}
},
title: {
text: "My Date-aware Chart"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "line",
labels: {
visible: true
},
missingValues: "gap"
},
series: [{
name: "Close",
field: "closeA",
axis: "A"
},
{
name: "Close",
field: "closeb",
axis: "B"
},
{ name: "Close",
field: "closec",
axis: "B"
}],
valueAxis: [{
name: "A",
labels: {
format: "{0}%"
}
},
{
name: "B",
labels: {
format: "{0}D"
}
}],
categoryAxis: {
type: "Date",
field: "date",
axisCrossingValue: [0, 1000]
}
});
and my tree-view code is
$("#treeview").on("change", function (e) {
console.log("click", multi.text());
var selected = multi.text().split(",");
console.log("multi", selected);
var condition = {
logic : "or",
filters: [
]
};
$.each(selected, function (idx, elem) {
condition.filters.push({ field: " close", operator: "eq", value: elem.trim() });
});
mychart.dataSource.filter(condition);
});
I think I now understand what your requirement is. You need to remove series from the chart when checking the treeview. This should be implemented by removing series from the chart configuration and then calling the refresh method:
// All series
var series = [{
name: "Close",
field: "closeA",
axis: "A"
},
{
name: "Close",
field: "closeb",
axis: "B"
},
{
name: "Close",
field: "closec",
axis: "B"
}
];
$("#treeview").on("change", function (e) {
var chart = $("#myChart").data("kendoChart");
// Start with empty series
var checkedSeries = [];
// Iterate all checked checkboxes in the treeview
$("#treeview").find(":checked").each(function() {
// Get the checked node's text - it is the grand parent of the checkbox element
var nodeText = $(this).parent().parent().text();
// Find the series whose field is the same as the node's text
$.each(series, function(index, series) {
if (series.field == nodeText) {
// add it to the checkedSeries array
checkedSeries.push(series);
}
});
});
// Set the chart series
chart.options.series = checkedSeries;
// Refresh the chart
chart.refresh();
});
Here is the updated jsFiddle: http://jsfiddle.net/RHh67/43/