[Admir HodžićParticipant]

Thank you jqwidgets team
I fund tutorial folowin you on twiter
Using jQWidgets with ASP .NET Blazor

Ill try jqwidgets in blazor app as soon as possible, can’t wait

[Admir HodžićParticipant]

Apologies once again for spamming but, I swear I did not know until I did not asked.
For future readers, solution is to call disable property on all grid

before updatebounddata api call you can disable all grid by

$(“#grid”).jqxGrid({ disabled: true });

and on dataadapter loadcomplite or loaderror you can

var dataAdapterListaNarudzbi = new $.jqx.dataAdapter(sourceListaNarudzbi, {
    loadError: function (jqXHR, textStatus,  errorThrown) {
$("#grid").jqxGrid({ disabled: false});
    },
    loadComplete: function () {
$("#grid").jqxGrid({ disabled: false});
    }
});

[Admir HodžićParticipant]

Apologies for spamming,
Looks like if any column change filterable property checklist filters gets lost.

Here is fiddle
http://jsfiddle.net/uka9pvsr/4/

[Admir HodžićParticipant]

@todor thank you on tip,
But unfortunately, setting filterable property to false, and to true back breaking grid logic.

If in filter row exist column with filter type checkedlist.
If that column is filtered and if that column change filterabile poperty from true to false and to true again.
Column looses sense of previous set filter.
That column in next filtering event is not filtered any more.

Please check this fiddle,
Filde showing loosing filter data on disable and enable filterable property
Set filter on colun lastname,
after that disable and enable filterabile property by clicing on buutons
after that try to filter column Product, to se how filter lastname is lost

[Admir HodžićParticipant]

On 3th day of debugging this I fund that every second grid filtering through api kill drop and down items if gird is set to remote filter.
I do not why is this happening.
Here is full investigation (I can this confirm on 2 spearate forms)

My grid has data soruce definied:

var sourceListaTiketa =
{
    datatype: "json",
    method: "post",
    type: "post",
    datafields: [
        { name: 'TiketId', type: 'int' },
        { name: 'Barcode', type: 'string' },
        { name: 'Ulaz', type: 'date' },
        { name: 'Izlaz', type: 'date' },
        { name: 'Unutra', type: 'bool' },
        { name: 'CodeName', type: 'string' },
        { name: 'MinutaOdUlaza', type: 'int' },
        { name: 'BioNaGarazi', type: 'int' },
        { name: 'Naplaceno', type: 'number' },
        { name: 'Odobreno', type: 'number' }
    ],
    url: "../../Tiketi/ListaTiketaData",
    key: "TiketId",
    formatData: function (data) {
        return {
            'GridFilter': JSON.stringify(data)
        };
    },
    filter: function (data) {
        if (data.length === 0) {
            $("#samo100").show();
        }
        else {
            $("#samo100").hide();
        }
        $("#gridTiketa").jqxGrid('updatebounddata', 'filter');
    }
};
var dataAdapterListaTiketa = new $.jqx.dataAdapter(sourceListaTiketa);

function intGridListaTiketa() {
    var windowHeight = 0;
    var headherHeight = 0;
    var hhh = 0;
    windowHeight = document.documentElement.scrollHeight;
    headherHeight = $('#headedAdo').height();
    hhh = windowHeight - headherHeight - 30;

    SetFilterPropForGridTiketa();

    $("#gridTiketa").jqxGrid('setcolumnproperty', 'MinutaOdUlaza', 'filterable', false);
    $("#gridTiketa").jqxGrid('setcolumnproperty', 'BioNaGarazi', 'filterable', false);
    $("#gridTiketa").jqxGrid('setcolumnproperty', 'Naplaceno', 'filterable', false);
    $("#gridTiketa").jqxGrid('setcolumnproperty', 'Odobreno', 'filterable', false);

    $('#gridTiketa').jqxGrid({
        source: dataAdapterListaTiketa,
        height: hhh,
        rendertoolbar: function (toolbar) {
            var me = this;
            var container = $("<div style='margin: 5px;'></div>");
            var span = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'></span>");
            var samo100 = $("<span class='bg-warning' id='samo100' style='float: left; margin-top: 5px; margin-right: 4px;'>Prikazano je samo 100 zadnjih tiketa jer niste odabrali filter</span>");
            toolbar.append(container);
            toolbar.append(samo100);
            container.append(span);

        }
    });
}
function SetFilterPropForGridTiketa() {
    $.ajax({
        url: "../../Tiketi/Statusi",
        type: "GET",
        dataType: "json",
        async: false,
        success: function (data) {
            $("#gridTiketa").jqxGrid('setcolumnproperty', 'CodeName', 'filteritems', data);
        }
    });
}
function InitGridFilterTodayListaTiketa() {

    var filtergroup = new $.jqx.filter();
    var filtervalue = new Date();
    var filtercondition = 'EQUAL';
    var filter1 = filtergroup.createfilter('datefilter', filtervalue, filtercondition);
    var filter_or_operator = 1;
    filtergroup.addfilter(filter_or_operator, filter1);
    $("#gridTiketa").jqxGrid('addfilter', 'Ts', filtergroup);
    $("#gridTiketa").jqxGrid('applyfilters');

}

First time this grid inicijlize and get filter it works
next time if I call InitGridFilterTodayListaTiketa() this will freze checkedlist
On another call of InitGridFilterTodayListaTiketa()

Any hope to get idea what I am doing wrong

[Admir HodžićParticipant]

Appologies for spaming,
But looks like it date filter woks if you set one date end EQUAL condition

http://jsfiddle.net/sp87xyc1/

 var data = generatedata(500);
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     }, {
         name: 'lastname',
         type: 'string'
     }, {
         name: 'productname',
         type: 'string'
     }, {
         name: 'date',
         type: 'date'
     }, {
         name: 'quantity',
         type: 'number'
     }, {
         name: 'price',
         type: 'number'
     }],
     datatype: "array"
 };
 var addfilter = function () {
var filtergroup = new $.jqx.filter();
        var filtervalue = new Date(2019,2,18);
        var filtercondition = 'EQUAL';
        var filter1 = filtergroup.createfilter('datefilter', filtervalue, filtercondition);
        var filter_or_operator = 1;
        filtergroup.addfilter(filter_or_operator, filter1);
        $("#jqxgrid").jqxGrid('addfilter', 'date', filtergroup);
        $("#jqxgrid").jqxGrid('applyfilters');
     }
 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
     width: 500,
     theme: 'energyblue',
     showfilterrow: true,
     source: adapter,
     filterable: true,
     sortable: true,
     ready: function () {
         addfilter();
     },
     autoshowfiltericon: true,
     columns: [{
         text: 'First Name',
         datafield: 'firstname',
         filterType: 'checkedlist',
         filteritems: ["Beate", "Antoni"],
         width: 90
     }, {
         text: 'Last Name',
         datafield: 'lastname',
         filterType: 'checkedlist',
         width: 90
     }, {
         text: 'Product',
         datafield: 'productname',
         width: 170
     }, {
         text: 'Order Date',
         datafield: 'date',
         width: 160,
         cellsformat: 'dd.MM.yyyy',
         filterType: 'range'
     }, {
         text: 'Quantity',
         datafield: 'quantity',
         width: 80,
         cellsalign: 'right'
     }, {
         text: 'Unit Price',
         datafield: 'price',
         cellsalign: 'right',
         cellsformat: 'c2'
     }]
 });

[Admir HodžićParticipant]

Investigating this I fund that looks like filtering widget dying (stop working ) whenever I apply filter on grid with filter row.

Digging around I fund that whenever I apply filter my items stop working

Am I doing something wrong, when I doing my custom filtering

function OtvoriListuDokumenata(broj) {
        preventLoadFIlterGridDokumeanta = true;
        if (prviPutBindamGridDokumenata !== "DA") {
            $('#gridDokumenata').jqxGrid('clearfilters');
        }
        preventLoadFIlterGridDokumeanta = false;
        var filtergroup = new $.jqx.filter();
        var filter_or_operator = 1;
        var filtervalue = broj;
        var filtercondition = 'starts_with';
        var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        filtergroup.addfilter(filter_or_operator, filter1);
        if (prviPutBindamGridDokumenata === "DA") {
            filterGridDokumentat = filtergroup;
        }
        else {
            // add the filters.
            $("#gridDokumenata").jqxGrid('addfilter', 'KarticaBroj', filtergroup);
            // apply the filters.
            $("#gridDokumenata").jqxGrid('applyfilters');
        }
}

Ill keep digging , but for now I can reproduce problem

[Admir HodžićParticipant]

@Hriso thak a lot on help.
My apologies for opening question, it was my misunderstanding.

First explanation about rendered ,
Yes I was trying to set tool tip on columns.
But I forgot to set enable-tool-tips=”true” on grid and column definition.

Second about initial filtering
Confusing thing is that there is autocomplete property filter in jqx-grid-column definition.
I did try to set initial filter using that property. (Because in demo page for JS init filter are set using filter property in column definition).
But looks like that is not working.
As in your sample you not referring filter for initial filter, you are setting it in ready function .

Thnk you a lot

[Admir HodžićParticipant]

I apologize for spamming but same thing happening if you try to set tooltiprenderer in razor code by tag helper

<jqx-grid id="gridKartice" name="gridKartice" columns-reorder="true" theme="bootstrap" width="99%" height="99%" auto-save-state="true" auto-load-state="true" columns-resize="true" localization="{{localization}}" show-filter-row="true" sortable="true" filterable="true" pageable="false" editable="false" selection-mode="multiplerowsextended" columns-auto-resize="true">
                        <jqx-grid-columns>
                            <jqx-grid-column datafield="broj" min-width="80" rendered=tooltiprenderer text="Kartica broj" ></jqx-grid-column>
                        </jqx-grid-columns>
                    </jqx-grid> 

Generate wron JS code on view

$(function () {
	var gridKartice = new jqxGrid($('#gridKartice'), {
			columnsReorder: true,
			theme: 'bootstrap',
			width: '99%',
			height: '99%',
			autoSaveState: true,
			autoLoadState: true,
			columnsResize: true,
			localization: localization,
			showFilterRow: true,
			sortable: true,
			filterable: true,
			pageable: false,
			editable: false,
			selectionMode: 'multiplerowsextended',
			columnsAutoResize: true,
			columns: [{
					text: 'Kartica broj',
					dataField: 'broj',
					minWidth: 80,
					rendered: 'tooltiprenderer'
				}
			]
		});
});

Problem is because column property rendered has value set as ‘tooltiprenderer’

[Admir HodžićParticipant]

Another thing, I am not sure taht is it but on your code you are writing code after
sampleForm.jqxForm('submit',window.location.href, 'GET');
As I understand function submit,
Once when you call it you are refreshing browser and there is no js code after taht.
Do you get execute lines

var text = getUrlVars()["textBoxValue"];
                var dropdown = getUrlVars()["dropdownValue"];
				console.log( text );
				console.log( dropdown);

at all ?

When I try to submit from using builtin form sumbit I am unable do continue executing js code after submit.

[Admir HodžićParticipant]

I am not sure that I get your question clearly ,
But If you want to stay on page after submit you probably do not want to “submit” it.

Why you do not send your form data in $.ajax request.
There you can stay on page whit all params loaded.
Here is how my snipet of sending data from form to server

function postPovartRobe() {
    var formData = $('#formaPovrataSpn').val();

    formData.arts = arts;
    formData.skls = sklData;
    formData.tagId = docId;
    
    $.ajax({
        url: "../../spn/VratiRobu",
        type: "POST",
        data: formData,
        dataType: "json",
        success: function (data) {
            if (data.valid) {
                $("#spnPovratProzor").jqxWindow('close');
                $("#gridSpnSkl").jqxGrid('updatebounddata', 'cells');
            }
            else {
                $("#errorPovratSpan").html(data.msg).show();
            }

        },
        error: function (jqXHR, textStatus, errorThrown) {
            $("#errorPovratSpan").html("sistemska greška " + textStatus + " " + errorThrown).show();

        }
    });
};

[Admir HodžićParticipant]

Thank You a lot.

In future version please considered to make API for error label.
As we already can set custom texts for label and info.
It will be great if we cloud set custom error message on form for component and call display if from code.

[Admir HodžićParticipant]

@Hrsito

Here is my case.
My html doc has grid and form.
Form is editor for grid.
Somethin like in this
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/integration-with-jqxgrid.htm?bootstrap

We use form to edit grid rows.

On our grid there is column Finished (need to be done).
Users when land on page grid is filed with data that has status Finished and those which are not finished yet.
User job is to pass thought all unfinished rows in grid.
For that case user filter column Finished to get reaming rows in grid.
When user fill form for grid row, js code update rowdata in grid.
In that moment when JS code update grid row , grid automatically refresh filter, sort of rows.
That is kind confusing for users, because just after they save form , row disperses in grid from

[Admir HodžićParticipant]

My workaround for this case is to set column property in jQuery ready function

$("#grid").jqxGrid('setcolumnproperty', 'saldo', 'filterable', false);

[Admir HodžićParticipant]

@hristo, thanks on trying to help, sory on poor quality of question.
Here is explanation:
I am trying to write jq-grid using razor.
That grid have filtered row.
And that is working well on razor.
By setting show-filter-row=”true” razor create grid whit all columns filterable by default.

But when I try to make some of columns in my grid non filterable.
(This has sense when making server side filters, sometimes it is hard or too heavy for sql to filter rows by some columns)
In razor you can for column set property filterable to false , but that does not reflec js generated.

If you can look at this fiddle http://jsfiddle.net/RsV5g/793/ and check column last name .

I want to reproduce this in razor.

[Author]

Posts