How i Concatenate string to Kendo Ui Gridview column - asp.net-mvc

I bound Amount column in Kendo UI Gridview column
columns.Bound(c => c.Amount).Title("Amount").Width(50);
I want to Concatenate string "$" to that
So it should look like $5000, how I do this?


One option is to use the currency format format: "{0:c}" Documentation
{ field: "Amount", title: "Amount", format: "{0:c}", width: 50 },

Related

Shield UI Grid Hyperlink on a Column Value

I am trying to use the values in a given column as a hyperlink using Shield UI's Grid. There doesn't appear to be anything on making a value within a column a hyperlink in the documentation.
Does anyone have an idea how to make a hyperlink within the grid?
example:
File_001 (href="\somefolder\File_001.pdf")
File_002 (href="\somefolder\File_002.pdf")
etc...etc...

You can use the column format option to add custom HTML markup in your cells like this:
columns: [
{ field: "id", width: "70px", title: "ID" },
{ field: "name", title: "Person Name" },
{ field: "company", title: "Company Name" },
{
field: "email", title: "Email Address", width: "270px",
format: function(val) { return '' + val + ''; }
}
]

Programmatic filter trigger on antd tables

Is there a way to programmatically trigger filtering on Antd Table Columns?
I'm building a custom Header which is a standalone styled component (So, I set the prop showHeader={ false } on the table and use my custom header to communicate with the table by setting states).
I want to be able to use it to trigger filtering on the table columns.
For sorting, I can pass a value to the sortOrder prop and trigger the sorter function externally. For filtering however, I don't have any obvious way to trigger the filter function.
{
title: 'Title',
dataIndex: 'title',
width: '40%',
key: 'title',
sorter: (a, b) => a.title.localeCompare(b.title),
sortOrder: { this.state.columns['title'].sortOrder }
},
{
title: 'Type',
dataIndex: 'operation',
key: 'defectType',
width: '10%',
filters: Object.keys(topicType).map(key => ({ text: topicType[key], value: key })),
onFilter: (value, record) => String(value) === record.defectType
},

Just managed to get this figured.
If you want to explicitly filter your items on a table and manage the filter state on your own; you need to pass the filteredValue prop on the column configuration.
Setting this to null renders the whole list without filtering.

jqgrid currency formatter returns NaN

I want to format the amount using the jqGrid.
When i use the below code,the column displays 'NaN' instead of currency value.
I want to display $1,000.00 or $10,000.00 in this format using jqGird
How can i achieve this ?
{
name: 'amount',
index: 'amount',
align: 'left',
formatter:'currency', formatoptions:{decimalSeparator:",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ "}
},
Any suggestions ?

formatter:'currency',
formatoptions: {prefix:'($', suffix:')',thousandsSeparator:',',decimalPlaces: 2}

how to display the date value in the format YYYY-MM-DD in the jqxgrid?

I have to obtain the date value from the database which is given in the format
YYYY-MM-DD and display in the jqxgrid in the same format,,,
I have used the following code:
text : ‘Start Date’, id: ‘startDatePopUp’,datafield : ‘startDate’, columntype: ‘datetimeinput’, cellsformat: ‘YYYY-MM-DD’, align : ‘center’, width : 150, cellsalign : ‘center’,
but it is being displayed in the grid as YYYY-MM-DD 00:00:00.0
how will I display the date value in the format YYYY-MM-DD in the jqxgrid??
Thanks & Regards,
ssp

In the source try adding the following attributes.
{ name: 'LastLoginDate', type: 'date', format: 'd' },
Then in the Cell definition.
{ text: 'Last Activity', datafield: 'LastLoginDate', cellsformat: 'yyyyy-MM-dd' },

Try adding the 'format' in the source like
var source={
datafield:[
{ name: 'startDate',type:'date',format:'yyyy/MM/dd' }
]
}

here's a working sample for you .....
https://jsfiddle.net/Vinod1/by6duep4/10/
and this is the specific part of the sample code.
{
text: 'Date',
datafield: 'date',
filtertype: 'date',
cellsalign: 'right',
width: '100',
cellsformat: 'yyyy/MM/dd' }

jqgrid column linq with ASP.NET MVC

I have a class (Person) with 4 properties : Id, FirstName, LastName, Code.
I show a person list in a jqgrid. I'd like a link column with this format (the code has this format 2011.0001)
/Person/Detail/Code => /Person/Code/2011.0001
But I have this with the code below :
/Customer/Detail?Code=2
I tried this :
colModel: [
{ name: 'Code', index: 'Code', formatter: 'showlink', formatoptions: { baseLinkUrl: '/Customer/Detail', idName: 'Code' }},
{ name: 'LastName', index: 'LastName', align: 'left' },
{ name: 'FirstName', index: 'FirstName', align: 'left' }
],
How can I correct this ?
Thanks,
Update1, Data format
[
{"Id":1,"FirstName":"AAAA","LastName":"AA","Code":"2011.0001"},
{"Id":3,"FirstName":"BBBB","LastName":"BB","Code":"2011.0003"}
]

You can try to use the custom formatter in the form
formatter: function (cellvalue, options, rowObject) {
return '' + cellvalue + '';
}
instead of predefined formatter 'showlink':
formatter: 'showlink', formatoptions: {baseLinkUrl:'/Customer/Detail', idName:'Code'}
You can easy receive /Customer/Detail?Code=2011.0001 if you have unique data in the 'Code' column and if you would add key: true to the column definition. In the case the Id value from the JSON input will be ignored and the value from the 'Code' column will be used as the rowid. If you do need to have the href value in the form /Customer/Detail/Code/2011.0001 or instead of /Customer/Detail?Code=2011.0001 you will need use custom formatter as I described before.

Resources