Forum Replies Created

Viewing 15 posts - 1 through 15 (of 42 total)
  • Author
    Posts

  • 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();
    
            }
        });
    };
    in reply to: How to validate Form How to validate Form #101373

    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.

Viewing 15 posts - 1 through 15 (of 42 total)