[Admir HodžićParticipant]

Is this in common
http://www.jqwidgets.com/community/topic/cells-format-for-jqx-grid-column-not-working-for-nullabile-datetime/

[Admir HodžićParticipant]

How then we can make grid that is not pageable and has less records then height,
Without drawing all rows.
I want to my non pageable grids draws only rows whit data.
And if is in grid less rows then what is height of grid , it will be nice to not draws all rows

[Admir HodžićParticipant]

Once again, sory for asking and answering own questions.
My intention it grove up .NET Core tag helpers and to tune it to maximum so we can fast devlop apps, not to spam or to make stupid own questinos and answers.

When I asked here about IntelliSense i did also googling for other and fund that there is know issue for VS about taghelpers and intelisene

https://github.com/aspnet/tooling/blob/master/known-issues-vs2017.md

ag Helpers do not work

Issue:

Razor Tag Helpers do not get colorization or special IntelliSense at design time.  They work normally at runtime.

Workaround:

Install the Razor Language Service extension.

I did install https://marketplace.visualstudio.com/items?itemName=ms-madsk.RazorLanguageServices
and now razor works as shoud.

Sory once again for spamming before googling.

[Admir HodžićParticipant]

I am sory for spaming form, but I fund solution.
For future readers that is workaround:

When writing razor using .NET core tag helpers properties that accepts string as function names shod not have quotes

<jqx-grid-column editable="true" datafield="rb1" init-editor=initNumEditor() text="Rabat1" cells-format="p2" width="80" cell-end-edit=setMartMpcNaGriduCijena() cells-align="HorizontalAlignment.Right" align="center"  column-type="numberinput" cell-begin-edit="function(row, datafield, columntype, value){
                                                if (row==0){
                                                 return false;
                                                };
                                }" ></jqx-grid-column>

Take look for properies init-editor or cell-end-edit they are call function names whiteout quotes ” even it accepts sting.

[Admir HodžićParticipant]

For sql I try two approaches:

When using linq langine by skip and take arguments.
And for total records showing total record of table.
That works when grid shows full table in grid and when ther is not filters.

For paging with filters I do sql like this

ALTER PROCEDURE [dbo].[grid_docs]
	 @page_size int = 10
	,@page_num int  = 0
	,@sort_dir varchar(10) ='desc'
	,@sort varchar(100) 	 = 'id'
	,@valutaId int =null

AS
BEGIN
	set transaction isolation level read uncommitted;
	SET NOCOUNT ON;

    select
		redova ,
		id ,
		datum ,
		skladiste_id ,
		mjenjacnica ,
		tipDokumenta ,
		broj ,
		serija ,
		valutaId ,
		valutaOznaka ,
		valutaNaziv ,
		uValuti ,
		uBam ,
		korisnik
from (
select
			   redova =count(*) over (partition by 1)
			  ,rwn = ROW_NUMBER() over (order by 
						case when @sort_dir='DESC' then
							case	
								when @sort =  'datum' then cast( cast(MJE_DOC.DATUM  AS int) as varchar(30))
								when @sort =  'mjenjacnica' then  SKLADISTE.SIFRA  
								when @sort =  'tipDokumenta' then  MJE_DOC.TIP
								when @sort =  'broj' then  MJE_DOC.BROJ
								when @sort =  'serija' then  MJE_DOC.serija
								when @sort =  'valutaOznaka' then mje_valute.oznaka_valute
								when @sort =  'valutaNaziv' then mje_valute.zemlja_valute
								when @sort =  'uValuti' then cast(round(mje_doc.iznos_u_valuti,0) AS VARCHAR(30))
								when @sort =  'uBam' then cast(round(mje_doc.iznos_u_bam,0) AS VARCHAR(30))
								when @sort =  'user' then mje_users.name 
							end
							end desc,
						case when @sort_dir='ASC' then
							case	
								when @sort =  'datum' then cast( cast(MJE_DOC.DATUM  AS int) as varchar(30))
								when @sort =  'mjenjacnica' then  SKLADISTE.SIFRA
								when @sort =  'tipDokumenta' then  MJE_DOC.TIP
								when @sort =  'broj' then  MJE_DOC.BROJ
								when @sort =  'serija' then  MJE_DOC.serija
								when @sort =  'valutaOznaka' then mje_valute.oznaka_valute
								when @sort =  'valutaNaziv' then mje_valute.zemlja_valute
								when @sort =  'uValuti' then cast(round(mje_doc.iznos_u_valuti,0) AS VARCHAR(30))
								when @sort =  'uBam' then cast(round(mje_doc.iznos_u_bam,0) AS VARCHAR(30))
								when @sort =  'user' then mje_users.name 
							end
							end
						
						
						)
		  ,id = mje_doc.id
          ,datum = mje_doc.datum
          ,skladiste_id = mje_doc.skladiste_id
          ,mjenjacnica = SKLADISTE.SIFRA+ ' '+SKLADISTE.NAZIV
          ,tipDokumenta = mje_dokumenti.tip
          ,broj = mje_doc.broj
          ,serija = mje_doc.serija
          ,valutaId = mje_doc.valuta_id
          ,valutaOznaka = mje_valute.oznaka_valute
          ,valutaNaziv = mje_valute.zemlja_valute
          ,uValuti = mje_doc.iznos_u_valuti
          ,uBam = mje_doc.iznos_u_bam
          ,korisnik = mje_users.name+' '+mje_users.surname 
from mje_doc
where 
	 (@valutaId is null or mje_doc.valuta_id = @valutaId)
) as engin
where	rwn > @page_num*@page_size 
		and rwn <= @page_num*@page_size+@page_size

Here I do select of select in first select I do select all data without paging and do count(*) over (partition by 1) to get total number of records inside where clue when there is no paging applied.
Also I do row_number() in combination whit case so in next query I can take only records that is on current page.

When I initaly wrote this it was slow then I put it on sql execution plans and make index covering my select from table and now it works pretty fast on table whit 263K records.

if you make sql fillde whit scema I can try to hepl you write sql

[Admir HodžićParticipant]

May I jump in (I am not quite expert but I did spent a lot time implmentig servr side paging using jqwidgets).

But if I do not supply the total number of records initially as done in the demo, the grid thinks it only has 10 rows, so it does not want to page.

If you download jqerywidgets under
C:\jquery\jqwidgets-ver4.5.0\demos\asp.net-core-mvc-tag-helpers
there is controller whih method

 public string GetPageData(string jsonData)
        {
//lot of code
/in th end
JSONData data = new JSONData();
            data.TotalRecords = allEmployees.Count;
            data.Employees = employees;
            return JsonConvert.SerializeObject(data);
        }

you see data total records that is param whic tells GridHelper how many record do you have.
This is quite good working when grid preforms remootly

[Admir HodžićParticipant]

I confirm also this BUG all columns inside JSON data has wrong value, ID, UID, _UID.
Maybe work around is to have in model one more ID column for referencing updates.

[Admir HodžićParticipant]

My apologies for spamming here,
I did find work around:
looks like there was error caused because in my section scripts was:
<script src="~/jqwidgets/jqx-all.js"></script>

When I do open jqx-all.js it looks like it is update
/*
jQWidgets v4.5.0 (2017-Jan)
Copyright (c) 2011-2017 jQWidgets.
License: http://jqwidgets.com/license/
*/

When I did remove jqx-all.js from scrip selection
I needed to reference each component by its own scrip.
And now it is working as was in version 4.4.0

[Admir HodžićParticipant]

Here is link of picture captured by google chrome console

https://goo.gl/photos/xFUdTaVD9MNrZK1h9

[Admir HodžićParticipant]

I have similar issue whit buton colum.
http://www.jqwidgets.com/community/topic/how-to-bind-button-inside-column-of-gird-generated-by-tag-helper/

At end I do subscribing buttons on entire grid.

You cluod also do that and then do JS deletenig of row.

[Admir HodžićParticipant]

I did pass over problem by binding cellclick for entire grid in JS
My ready function looks like

 $(document).ready(function () {
            $("#grid").bind('cellclick', function (event) {
                if (event.args.columnindex == 12) {
                    editrow = event.args;
                    console.log(editrow.row.bounddata.id);
                };
            });
            });

Sub-question:
Is there a way to bind cellclick for grid inside razor for column.

Razor give us

<li>cell-begin-edit</li>
<li> cell-end-edit </li>
<li>cell-value-changing</li>

events
Can we get here Click bindig ?

[Admir HodžićParticipant]

Sory for spamming.(answering my own question)

I managed to do panel resizing in razor,
but this is pretty ugly maybe you can considered adding properties to panel in next releases.

This is how I can resize panels.

@{ 
    object[] s = new object[2];
    s[0] = "{size: \'10%\' }";
    s[1] = "{size: \'90%\' }";
}
<jqx-splitter showSplitBar="true" width="100%" height="800"  orientation="horizontal" panels=@s.ToList() >
    <jqx-splitter-panel >

    </jqx-splitter-panel>
    <jqx-splitter-panel >
        
    </jqx-splitter-panel>
</jqx-splitter>

[Admir HodžićParticipant]

Thanx for clarifying that.
For future readers.
Here is how I do this.
It is possible to set filter on client side of grid.
When js set filter for grid , grid then call controller and inside jsondata I have filter set.

This is working peaty nice but I need much more effort to create settings filter on JS

        var clickEnvet = function () {
            var filtergroup = new $.jqx.filter();
            var filter_or_operator = 1;
            var filtervalue = 'ado';
            var filtercondition = 'contains';
            var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
            filtergroup.addfilter(filter_or_operator, filter1);
            $("#grid").jqxGrid('addfilter', 'BrojListe', filtergroup);
            $("#grid").jqxGrid('applyfilters');
        };

Also there is lot of pain extracting filters inside controller from JToken
but I get working.
At end , my Views are much cleaner ant there is enormous smaller JS code there.

Thakx on all .

[Admir HodžićParticipant]

Once again sory for reopening this.
Can you please give me one more try to accomplish this.

What I want to do is something similar to this sample
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/toolbar.htm?light

On this sample param data which is sent to server is extend inside

var dataAdapter = new $.jqx.dataAdapter(source,
                {
                    formatData: function (data) {
                        data.name_startsWith = $("#searchField").val();
                        return data;
                    }
                }

So grid when sends request to server send extra param name_startsWith .
I want to do same thing but whit grid created by mvc tag helper.
I created grid whit serverProcessing set to true
When I on client side from some events call
$(“#grid”).jqxGrid(‘updatebounddata’);
I get request sent to mvc controller .
I want to to that request add extra param or extra data.
So my server side code can filter data as I want.

When I look at source code of MVC page in browser ,
There is js attached to jqx-grid inside that JS there is function
formatData: function(data){ return { 'jsonData': JSON.stringify(data)}; }
is there any way to I extend this function so I can add my own param whic is going to be send to conntoler

[Admir HodžićParticipant]

THanx,
I saw that sample.
But there is two problems.
That is nested rows, not master detail.(it is hard to explain users how to use nested grids).
Second thing nested grid on this sample is created pure through JS without razor.
Jqwidgets are great framework, but for large html forms using TagHerlpers would be ideal.
I want to minimize using JS on my views.

I am looking a way to refers grid created by razor ?

[Author]

Posts